Fix(@inquirer/core): Delay showing any loader by 300ms to avoid spinn…

…er flickering. Ref #1407

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);

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,24 +20,28 @@ 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;
             setTick(inc % spinner.frames.length);
           }),
           spinner.interval,
         );
-      }, 300);
+      }), 300);
 
       return () => {
         clearTimeout(delayTimeout);
         clearInterval(tickInterval);
       };
+    } else {
+      setShowLoader(false);
     }
   }, [isLoading]);
 
-  if (isLoading) {
+  if (showLoader) {
     return spinner.frames[tick]!;
   }