Suspense for async components in Vue - Step-by-Step Execution

Concept Flow - Suspense for async components

Start Rendering Parent

↓

Check Async Component

↓

Render Async

↓

Async Component Loaded

↓

Replace Fallback with Async

↓

Finish Rendering Parent

Vue Suspense shows a fallback UI while waiting for an async component to load, then replaces it with the loaded component.

Execution Sample

Vue

<Suspense>
  <template #default>
    <AsyncComp />
  </template>
  <template #fallback>
    <LoadingSpinner />
  </template>
</Suspense>

This code shows a loading spinner while AsyncComp loads, then shows AsyncComp when ready.

Execution Table

Step	Action	Async Component State	Rendered Output
1	Start rendering Suspense parent	Not loaded	Fallback not rendered yet
2	Check AsyncComp loading status	Loading	Render fallback: LoadingSpinner
3	AsyncComp finishes loading	Loaded	Replace fallback with AsyncComp
4	Render AsyncComp content	Loaded	Show AsyncComp UI
5	Parent rendering complete	Loaded	Final UI with AsyncComp

💡 Async component loaded, fallback replaced, rendering finished.

Variable Tracker

Variable	Start	After Step 2	After Step 3	Final
asyncComponentState	Not loaded	Loading	Loaded	Loaded
renderedOutput	None	LoadingSpinner	AsyncComp replaces LoadingSpinner	AsyncComp UI

Key Moments - 3 Insights

Why do we see the fallback UI first before the async component?

Because the async component is still loading (see Step 2 in execution_table), Vue shows the fallback UI to keep the user informed.

When does the fallback UI get replaced by the async component?

At Step 3, when the async component finishes loading, Vue replaces the fallback with the actual component UI.

Can the fallback UI be anything?

Yes, it can be any valid Vue template or component, like a spinner or message, shown while waiting for the async component.

Visual Quiz - 3 Questions

Look at the execution table, what is the rendered output at Step 2?

A LoadingSpinner

B AsyncComp UI

C Nothing rendered

D Error message

💡 Hint

Check the 'Rendered Output' column at Step 2 in the execution_table.

At which step does the async component state change to 'Loaded'?

A Step 1

B Step 2

C Step 3

D Step 5

💡 Hint

Look at the 'Async Component State' column in the execution_table.

If the async component never loads, what will the user see?

A Nothing at all

B The fallback UI indefinitely

C The async component UI

D An error automatically

💡 Hint

Refer to the variable_tracker for 'asyncComponentState' and 'renderedOutput' when loading is stuck.

Concept Snapshot

Vue Suspense lets you show a fallback UI while waiting for async components.
Use <Suspense> with #default for async content and #fallback for loading UI.
Vue renders fallback first if async component is not ready.
When async component loads, fallback is replaced automatically.
This improves user experience by avoiding blank screens.

Full Transcript

Vue Suspense is a feature that helps show a temporary UI while waiting for an async component to load. When Vue starts rendering a Suspense parent, it checks if the async component is ready. If not, it shows the fallback UI, like a loading spinner. Once the async component finishes loading, Vue replaces the fallback with the actual component UI. This process keeps the user informed and avoids blank or broken screens. The fallback UI can be any Vue template or component. If the async component never loads, the fallback UI remains visible. This behavior is shown step-by-step in the execution table and variable tracker.