diff --git a/packages/core/core.test.mts b/packages/core/core.test.mts index f40a1f2a9..ebc4c832c 100644 --- a/packages/core/core.test.mts +++ b/packages/core/core.test.mts @@ -363,6 +363,7 @@ describe('createPrompt()', () => { it('usePrefix() renders loader and prefix', async () => { vi.useFakeTimers(); + const delay = 300; const { interval } = spinners.dots; const totalDuration = interval * spinners.dots.frames.length; @@ -390,6 +391,9 @@ describe('createPrompt()', () => { const prompt = createPrompt(Prompt); const { answer, events, getScreen } = await render(prompt, { message: 'Question' }); + expect(getScreen()).toMatchInlineSnapshot(`"? Question"`); + + vi.advanceTimersByTime(delay + interval); expect(getScreen()).toMatchInlineSnapshot(`"⠋ Question"`); vi.advanceTimersByTime(interval); diff --git a/packages/core/src/lib/use-prefix.mts b/packages/core/src/lib/use-prefix.mts index d5aeb3c20..22f16da70 100644 --- a/packages/core/src/lib/use-prefix.mts +++ b/packages/core/src/lib/use-prefix.mts @@ -11,6 +11,7 @@ export function usePrefix({ isLoading?: boolean; theme?: Theme; }): string { + const [showLoader, setShowLoader] = useState(false); const [tick, setTick] = useState(0); const { prefix, spinner } = makeTheme(theme); @@ -19,7 +20,9 @@ export function usePrefix({ let tickInterval: NodeJS.Timeout | undefined; let inc = -1; // Delay displaying spinner by 300ms, to avoid flickering - const delayTimeout = setTimeout(() => { + const delayTimeout = setTimeout(AsyncResource.bind(() => { + setShowLoader(true); + tickInterval = setInterval( AsyncResource.bind(() => { inc = inc + 1; @@ -27,16 +30,18 @@ export function usePrefix({ }), spinner.interval, ); - }, 300); + }), 300); return () => { clearTimeout(delayTimeout); clearInterval(tickInterval); }; + } else { + setShowLoader(false); } }, [isLoading]); - if (isLoading) { + if (showLoader) { return spinner.frames[tick]!; }