Suspense fallback flicker when async component resolves instantly

Answer to the exact question

Vue 3’s <Suspense> renders the fallback slot first, then swaps it for an instantly resolved async component. Because the swap happens in the same micro‑task, the fallback can flash briefly before the component is painted.

How the timeout prop works

• Without a timeout, Vue schedules the fallback replacement in the current micro‑task. The browser paints the fallback, then the next micro‑task replaces it, creating a short flash.
• Setting a non‑zero timeout tells Vue to keep the fallback visible until the timeout expires. If the async component resolves earlier, the fallback is held, suppressing the instant swap.
• Both Vue 3.3.x and 3.4.x use the same mechanism; only the exact micro‑task scheduling can vary slightly between patch releases.

Recommended steps for production

1. Wrap the async component in <Suspense> with a small timeout. A value between 30 ms and 100 ms is usually enough to hide the flicker while keeping the UI responsive.
2. Verify the effect. Open Chrome DevTools, record a performance trace, and confirm that the fallback stays on screen for at least the timeout duration before the resolved component appears.
3. Consider pre‑loading or a lightweight placeholder. If the async load is truly instantaneous and you cannot afford any delay, load the component ahead of time or render a lightweight placeholder outside of <Suspense> to avoid the fallback‑then‑swap cycle entirely.

Missing diagnostic detail

Could you confirm which browsers and devices you target? Knowing the user base will help fine‑tune the timeout value, as low‑refresh‑rate displays may still perceive a flicker even with a timeout.