feat: Modify loading indicator to support a paused state (#506)

1 files changed, 61 insertions, 27 deletions

diff --git a/packages/cli/src/ui/hooks/useLoadingIndicator.ts b/packages/cli/src/ui/hooks/useLoadingIndicator.ts
index 6d1d77d4..ac75986a 100644
--- a/packages/cli/src/ui/hooks/useLoadingIndicator.ts
+++ b/packages/cli/src/ui/hooks/useLoadingIndicator.ts
@@ -11,7 +11,10 @@ import {
 } from '../constants.js';
 import { StreamingState } from '../types.js';
 
-export const useLoadingIndicator = (streamingState: StreamingState) => {
+export const useLoadingIndicator = (
+  streamingState: StreamingState,
+  isPaused: boolean,
+) => {
   const [elapsedTime, setElapsedTime] = useState(0);
   const [currentLoadingPhrase, setCurrentLoadingPhrase] = useState(
     WITTY_LOADING_PHRASES[0],
@@ -20,48 +23,79 @@ export const useLoadingIndicator = (streamingState: StreamingState) => {
   const phraseIntervalRef = useRef<NodeJS.Timeout | null>(null);
   const currentPhraseIndexRef = useRef<number>(0);
 
-  // Timer effect for elapsed time during loading
+  const [shouldShowSpinner, setShouldShowSpinner] = useState(true);
+
   useEffect(() => {
     if (streamingState === StreamingState.Responding) {
-      setElapsedTime(0); // Reset timer on new loading start
-      timerRef.current = setInterval(() => {
-        setElapsedTime((prevTime) => prevTime + 1);
-      }, 1000);
-    } else if (timerRef.current) {
-      clearInterval(timerRef.current);
-      timerRef.current = null;
+      if (!isPaused) {
+        if (!timerRef.current) {
+          // No specific action needed here if timer wasn't running and we are not paused.
+          // Elapsed time continues from where it left off or starts from 0 if it's a fresh start.
+        }
+        if (timerRef.current) clearInterval(timerRef.current);
+        timerRef.current = setInterval(() => {
+          setElapsedTime((prevTime) => prevTime + 1);
+        }, 1000);
+      } else {
+        if (timerRef.current) {
+          clearInterval(timerRef.current);
+          timerRef.current = null;
+        }
+      }
+    } else {
+      if (timerRef.current) {
+        clearInterval(timerRef.current);
+        timerRef.current = null;
+      }
+      setElapsedTime(0);
     }
-    // Cleanup on unmount or when isLoading changes
+
     return () => {
       if (timerRef.current) {
         clearInterval(timerRef.current);
+        timerRef.current = null;
       }
     };
-  }, [streamingState]);
+  }, [streamingState, isPaused]);
 
-  // Effect for cycling through witty loading phrases
   useEffect(() => {
     if (streamingState === StreamingState.Responding) {
-      currentPhraseIndexRef.current = 0;
-      setCurrentLoadingPhrase(WITTY_LOADING_PHRASES[0]);
-      phraseIntervalRef.current = setInterval(() => {
-        currentPhraseIndexRef.current =
-          (currentPhraseIndexRef.current + 1) % WITTY_LOADING_PHRASES.length;
-        setCurrentLoadingPhrase(
-          WITTY_LOADING_PHRASES[currentPhraseIndexRef.current],
-        );
-      }, PHRASE_CHANGE_INTERVAL_MS);
-    } else if (phraseIntervalRef.current) {
-      clearInterval(phraseIntervalRef.current);
-      phraseIntervalRef.current = null;
+      if (!isPaused) {
+        setShouldShowSpinner(true);
+        if (!phraseIntervalRef.current) {
+          currentPhraseIndexRef.current = 0;
+          setCurrentLoadingPhrase(WITTY_LOADING_PHRASES[0]);
+          phraseIntervalRef.current = setInterval(() => {
+            currentPhraseIndexRef.current =
+              (currentPhraseIndexRef.current + 1) %
+              WITTY_LOADING_PHRASES.length;
+            setCurrentLoadingPhrase(
+              WITTY_LOADING_PHRASES[currentPhraseIndexRef.current],
+            );
+          }, PHRASE_CHANGE_INTERVAL_MS);
+        }
+      } else {
+        setShouldShowSpinner(false);
+        setCurrentLoadingPhrase('Waiting for user confirmation...');
+        if (phraseIntervalRef.current) {
+          clearInterval(phraseIntervalRef.current);
+          phraseIntervalRef.current = null;
+        }
+      }
+    } else {
+      if (phraseIntervalRef.current) {
+        clearInterval(phraseIntervalRef.current);
+        phraseIntervalRef.current = null;
+      }
     }
-    // Cleanup on unmount or when isLoading changes
+
     return () => {
       if (phraseIntervalRef.current) {
         clearInterval(phraseIntervalRef.current);
+        phraseIntervalRef.current = null;
       }
     };
-  }, [streamingState]);
+  }, [streamingState, isPaused]);
 
-  return { elapsedTime, currentLoadingPhrase };
+  return { elapsedTime, currentLoadingPhrase, shouldShowSpinner };
 };