Question
Suspense fallback flicker when async component resolves instantly
Rey River
0 reputation · 09 Jul 2022, 08:18 UTC
94.6K views0
Goal
Determine how Vue 3’s <Suspense> handles the fallback slot when an async child resolves in less than a single tick. The observed behavior is a brief flash of the fallback before the component is rendered, which can degrade UI perceived stability.
Constraints
- Vue 3.3+ introduces a
timeoutprop on<Suspense>, but its effect on rapid resolutions is undocumented. - Behavior may vary between 3.3.x and 3.4.x releases.
- The flicker is subtle and may differ across browsers and devices.
Unresolved Questions
- Is there a documented threshold or rule that suppresses the fallback if the async component resolves before the next tick?
- How does the
timeoutprop interact with fast resolutions—does it delay the fallback or the async component? - What is the recommended strategy for production applications to avoid perceived flicker when using
<Suspense>?