Loading states pattern in Vue

Introduction

Loading states show users that something is happening in the background. This helps avoid confusion when data or content takes time to appear.

When fetching data from a server and waiting for the response.

When submitting a form and waiting for confirmation.

When loading images or files that take time to appear.

When switching between pages or views that need to load content.

Syntax

Vue

<template>
  <div>
    <div v-if="isLoading">Loading...</div>
    <div v-else>Content is ready!</div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const isLoading = ref(true)

// Simulate loading
setTimeout(() => {
  isLoading.value = false
}, 2000)
</script>

Use v-if to show or hide loading messages or spinners.

Use a reactive variable like isLoading to track loading state.

Examples

Simple loading message that changes after 1 second.

Vue

<template>
  <div>
    <div v-if="loading">Please wait...</div>
    <div v-else>Data loaded!</div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const loading = ref(true)
setTimeout(() => loading.value = false, 1000)
</script>

Button shows loading text and disables while data loads.

Vue

<template>
  <div>
    <button @click="loadData" :disabled="loading">
      {{ loading ? 'Loading...' : 'Load Data' }}
    </button>
    <div v-if="data">{{ data }}</div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const loading = ref(false)
const data = ref(null)

function loadData() {
  loading.value = true
  setTimeout(() => {
    data.value = 'Here is your data!'
    loading.value = false
  }, 1500)
}
</script>

Sample Program

This Vue component shows a button to fetch content. When clicked, it shows a loading message for 3 seconds. The button disables during loading to prevent repeated clicks. The loading message uses ARIA roles for accessibility.

Vue

<template>
  <main>
    <h1>Loading States Example</h1>
    <section aria-live="polite">
      <div v-if="loading" role="status" aria-label="Loading content">
        <p>Loading content, please wait...</p>
      </div>
      <div v-else>
        <p>Content loaded successfully!</p>
      </div>
    </section>
    <button @click="fetchContent" :disabled="loading" :aria-busy="loading">
      {{ loading ? 'Loading...' : 'Fetch Content' }}
    </button>
  </main>
</template>

<script setup>
import { ref } from 'vue'

const loading = ref(false)

function fetchContent() {
  loading.value = true
  setTimeout(() => {
    loading.value = false
  }, 3000)
}
</script>

<style scoped>
main {
  max-width: 30rem;
  margin: 2rem auto;
  font-family: system-ui, sans-serif;
  padding: 1rem;
  border: 1px solid #ccc;
  border-radius: 0.5rem;
  text-align: center;
}
button {
  margin-top: 1rem;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  cursor: pointer;
  border: 2px solid #007acc;
  border-radius: 0.3rem;
  background-color: white;
  color: #007acc;
  transition: background-color 0.3s ease;
}
button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
button:not(:disabled):hover {
  background-color: #007acc;
  color: white;
}
</style>

Important Notes

Always provide clear feedback so users know the app is working.

Use ARIA roles like role="status" and aria-live="polite" to help screen readers announce loading changes.

Disable buttons or inputs during loading to avoid duplicate actions.

Summary

Loading states improve user experience by showing progress.

Use reactive variables and v-if to toggle loading messages.

Accessibility and disabling controls during loading are important.

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