show indicator on button while submitting daily guess

3 files changed, 9 insertions, 2 deletions

diff --git a/src/components/Game/index.tsx b/src/components/Game/index.tsx
index 657b2af..8afa516 100644
--- a/src/components/Game/index.tsx
+++ b/src/components/Game/index.tsx
@@ -19,6 +19,7 @@ interface Props {
   guess: () => void;
   mode?: "daily" | "unlimited";
   onPlayAgain?: () => void;
+  isSubmitting?: boolean;
 }
 
 function getUtcDate() {
@@ -36,6 +37,7 @@ export function Game({
   guess,
   mode = "daily",
   onPlayAgain,
+  isSubmitting = false,
 }: Props) {
   const recentFinishedPlay = localStorage.getItem("recentFinishedPlay");
   const hasFinishedCurrentRound = didGuess || currentTry >= guesses.length;
@@ -110,12 +112,14 @@ export function Game({
       <Search currentTry={currentTry} setSelectedSong={setSelectedSong} />
       <Styled.Buttons>
         <Button onClick={skip}>
-          {currentTry === 5
+          {isSubmitting
+            ? "Skipping..."
+            : currentTry === 5
             ? "Give Up"
             : `Skip +${playTimes[currentTry] / 1000}s`}
         </Button>
         <Button variant="green" onClick={guess}>
-          Submit
+          {isSubmitting ? "Submitting..." : "Submit"}
         </Button>
       </Styled.Buttons>
     </>
diff --git a/src/hooks/useGameState.ts b/src/hooks/useGameState.ts
index 7ef7683..c6bf6f7 100644
--- a/src/hooks/useGameState.ts
+++ b/src/hooks/useGameState.ts
@@ -339,5 +339,6 @@ export function useGameState({
     skip,
     guess,
     reset,
+    isSubmitting
   };
 }
diff --git a/src/pages/DailyPage.tsx b/src/pages/DailyPage.tsx
index d1482b1..17efaeb 100644
--- a/src/pages/DailyPage.tsx
+++ b/src/pages/DailyPage.tsx
@@ -69,6 +69,7 @@ export function DailyPage() {
     didGuess,
     skip,
     guess,
+    isSubmitting,
   } = useGameState({
     solution: todaysSolution?.song ?? null,
     persist: true,
@@ -109,6 +110,7 @@ export function DailyPage() {
           setSelectedSong={setSelectedSong}
           skip={skip}
           guess={guess}
+          isSubmitting={isSubmitting}
         />
       </Styled.Container>
       <Footer />