Loading states pattern in Vue - Step-by-Step Execution

Concept Flow - Loading states pattern

Component mounts

↓

Set loading = true

↓

Fetch data async

↓

Data received?

No→Wait

Yes↓

Set loading = false

↓

Render data or loading indicator

This flow shows how a Vue component sets a loading flag, fetches data asynchronously, then updates the UI when data arrives.

Execution Sample

Vue

import { ref, onMounted } from 'vue';

const loading = ref(true);
const data = ref(null);

onMounted(async () => {
  data.value = await fetchData();
  loading.value = false;
});

This Vue code sets loading true, fetches data on mount, then sets loading false to show data.

Execution Table

Step	Action	loading.value	data.value	UI Rendered
1	Component mounts, loading set true	true	null	Show loading spinner
2	Start fetchData async call	true	null	Show loading spinner
3	fetchData resolves with data	true	{...data...}	Show loading spinner
4	Set loading to false	false	{...data...}	Show data content
5	Render completes with data	false	{...data...}	Show data content

💡 Loading is false and data is loaded, so UI shows data instead of spinner.

Variable Tracker

Variable	Start	After Step 1	After Step 3	After Step 4	Final
loading.value	true	true	true	false	false
data.value	null	null	{...data...}	{...data...}	{...data...}

Key Moments - 3 Insights

Why does the UI show a spinner before data arrives?

Because loading.value is true at steps 1-3, the UI renders the loading spinner as shown in the execution_table rows 1-3.

When does the UI switch from spinner to data?

At step 4, loading.value changes to false, triggering the UI to render the data content instead of the spinner.

What happens if fetchData takes a long time?

The loading.value stays true, so the spinner remains visible until data arrives, preventing empty or broken UI.

Visual Quiz - 3 Questions

Look at the execution table, what is loading.value at Step 3?

A true

B false

C null

D undefined

💡 Hint

Check the loading.value column at Step 3 in the execution_table.

At which step does the UI start showing the actual data instead of the spinner?

A Step 2

B Step 4

C Step 3

D Step 1

💡 Hint

Look at the UI Rendered column in the execution_table to find when data content appears.

If loading.value was never set to false, what would the UI show?

A Data content

B Empty screen

C Loading spinner forever

D Error message

💡 Hint

Refer to the key_moments explanation about loading.value controlling the spinner visibility.

Concept Snapshot

Loading states pattern in Vue:
- Use a reactive loading flag (ref) set true initially
- Fetch data asynchronously onMounted
- When data arrives, set loading false
- UI shows spinner if loading true, else shows data
- Keeps UI clear and responsive during async fetch

Full Transcript

This visual execution shows how a Vue component uses a loading state pattern. When the component mounts, it sets a loading flag to true and starts fetching data asynchronously. While waiting, the UI shows a loading spinner. Once the data arrives, the loading flag is set to false, and the UI updates to show the fetched data. This pattern helps keep the user informed and prevents showing empty or broken content during data loading.

Practice

1. What is the main purpose of using a loading state in a Vue component?

easy

A. To disable Vue reactivity

B. To show users that data is being fetched or processed

C. To permanently hide content from users

D. To increase the component's size

Solution

1. Step 1: Understand user experience during data fetching

   Loading states inform users that the app is working on a task, preventing confusion.

2. Step 2: Identify the purpose of loading states in Vue

   They show progress or waiting messages while data loads or actions complete.

3. Final Answer:

   To show users that data is being fetched or processed -> Option B

4. Quick Check:

   Loading states = user feedback [OK]

Hint: Loading states show progress to users during waits [OK]

Common Mistakes:

• Thinking loading states hide content permanently
• Confusing loading states with disabling reactivity
• Assuming loading states change component size

2. Which Vue syntax correctly shows a loading message only when isLoading is true?

easy

A. <div v-show="isLoading">Loading...</div>

B. <div v-if="!isLoading">Loading...</div>

C. <div v-if="isLoading">Loading...</div>

D. <div v-bind:isLoading>Loading...</div>

Solution

1. Step 1: Understand v-if usage

   v-if conditionally renders the element only if the expression is true.

2. Step 2: Match condition to show loading

   We want to show the message when isLoading is true, so v-if="isLoading" is correct.

3. Final Answer:

   <div v-if="isLoading">Loading...</div> -> Option C

4. Quick Check:

   Show loading if isLoading true = v-if="isLoading" [OK]

Hint: Use v-if with the loading variable directly [OK]

Common Mistakes:

• Using v-if with negation (!isLoading) to show loading
• Using v-show which toggles visibility but keeps element
• Using invalid v-bind syntax for conditional rendering

3. Given this Vue setup:

const isLoading = ref(true);
setTimeout(() => { isLoading.value = false; }, 2000);

What will the component show initially if template has <div v-if="isLoading">Loading...</div><div v-else>Content Loaded</div>?

medium

A. Loading... for 2 seconds, then Content Loaded

B. Content Loaded immediately

C. Nothing is shown

D. Loading... forever

Solution

1. Step 1: Analyze initial value of isLoading

   It starts as true, so v-if="isLoading" shows "Loading..." initially.

2. Step 2: Understand the timeout effect

   After 2 seconds, isLoading.value becomes false, switching to v-else content "Content Loaded".

3. Final Answer:

   Loading... for 2 seconds, then Content Loaded -> Option A

4. Quick Check:

   Initial true shows loading, then false shows content [OK]

Hint: Check initial state and delayed change for output [OK]

Common Mistakes:

• Assuming content shows immediately ignoring initial true
• Thinking loading never stops without reactivity knowledge
• Confusing v-if and v-else rendering timing

4. Identify the error in this Vue code snippet for loading state:

const isLoading = ref(false);

function fetchData() {
  isLoading = true;
  fetch('/api/data')
    .then(() => { isLoading = false; });
}

medium

A. No error, code works fine

B. Missing async keyword on fetchData function

C. fetch API call is incorrect syntax

D. Directly assigning to ref variable instead of its .value

Solution

1. Step 1: Understand how to update Vue refs

   Refs are objects; their value must be changed via .value, not by direct assignment.

2. Step 2: Identify incorrect assignments

   Code assigns isLoading = true instead of isLoading.value = true, causing errors.

3. Final Answer:

   Directly assigning to ref variable instead of its .value -> Option D

4. Quick Check:

   Update ref with .value, not direct assignment [OK]

Hint: Change ref values with .value property [OK]

Common Mistakes:

• Assigning ref variable directly instead of .value
• Forgetting to handle promise with then or async/await
• Assuming fetch syntax is wrong when it is correct

5. You want to disable a submit button during loading in Vue. Which code snippet correctly disables the button and shows loading text using isLoading reactive variable?

hard

A. <button :disabled="isLoading">{{ isLoading ? 'Loading...' : 'Submit' }}</button>

B. <button v-if="isLoading" disabled>Submit</button><button v-else>Loading...</button>

C. <button :disabled="!isLoading">Submit</button>

D. <button :loading="isLoading">Submit</button>

Solution

1. Step 1: Disable button based on loading state

   Use :disabled="isLoading" to disable the button when loading.

2. Step 2: Show dynamic button text

   Use interpolation with a ternary to show "Loading..." or "Submit" based on isLoading.

3. Final Answer:

   <button :disabled="isLoading">{{ isLoading ? 'Loading...' : 'Submit' }}</button> -> Option A

4. Quick Check:

   Disable button and show loading text with :disabled and ternary [OK]

Hint: Bind :disabled and use ternary text inside button [OK]

Common Mistakes:

• Using v-if to swap buttons instead of disabling
• Negating isLoading for disabling logic
• Using non-existent :loading attribute on button