1 files changed, 53 insertions, 0 deletions
diff --git a/packages/cli/src/ui/hooks/useLoadingIndicator.ts b/packages/cli/src/ui/hooks/useLoadingIndicator.ts
new file mode 100644
index 00000000..f1ab4552
--- /dev/null
+++ b/packages/cli/src/ui/hooks/useLoadingIndicator.ts
@@ -0,0 +1,53 @@
+import { useState, useEffect, useRef } from 'react';
+import { WITTY_LOADING_PHRASES, PHRASE_CHANGE_INTERVAL_MS } from '../constants.js';
+import { StreamingState } from '../../core/StreamingState.js';
+
+export const useLoadingIndicator = (streamingState: StreamingState) => {
+	const [elapsedTime, setElapsedTime] = useState(0);
+	const [currentLoadingPhrase, setCurrentLoadingPhrase] = useState(WITTY_LOADING_PHRASES[0]);
+	const timerRef = useRef<NodeJS.Timeout | null>(null);
+	const phraseIntervalRef = useRef<NodeJS.Timeout | null>(null);
+	const currentPhraseIndexRef = useRef<number>(0);
+
+	// Timer effect for elapsed time during loading
+	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;
+		}
+		// Cleanup on unmount or when isLoading changes
+		return () => {
+			if (timerRef.current) {
+				clearInterval(timerRef.current);
+			}
+		};
+	}, [streamingState]);
+
+	// 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;
+		}
+		// Cleanup on unmount or when isLoading changes
+		return () => {
+			if (phraseIntervalRef.current) {
+				clearInterval(phraseIntervalRef.current);
+			}
+		};
+	}, [streamingState]);
+
+	return { elapsedTime, currentLoadingPhrase };
+};
+\ No newline at end of file