Loading states pattern in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will the component display during data loading?

Consider this Vue 3 component using the Composition API. What will the user see while the data is being fetched?

Vue

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

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

onMounted(() => {
  setTimeout(() => {
    data.value = 'Hello Vue!'
    loading.value = false
  }, 2000)
})
</script>

<template>
  <div>
    <p v-if="loading">Loading data...</p>
    <p v-else>{{ data }}</p>
  </div>
</template>

A An error message is displayed because 'data' is null initially.

B The component shows 'Hello Vue!' immediately without delay.

C The text 'Loading data...' appears for 2 seconds, then 'Hello Vue!' is shown.

D The component remains blank until data is loaded.

💡 Hint

Look at the loading variable and how it controls the displayed text.

The loading ref starts as true, so the template shows 'Loading data...'. After 2 seconds, loading becomes false and data is set, so the message changes to 'Hello Vue!'.

❓ state_output

intermediate

What is the value of 'isLoading' after fetchData() resolves?

In this Vue 3 component, what will be the value of isLoading after fetchData() finishes?

Vue

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

const isLoading = ref(false)
const data = ref(null)

async function fetchData() {
  isLoading.value = true
  data.value = await new Promise(resolve => setTimeout(() => resolve('Done'), 1000))
  isLoading.value = false
}

fetchData()
</script>

A false

B true

C null

D undefined

💡 Hint

Check when isLoading is set to false in the async function.

The isLoading ref is set to true before awaiting the promise, then set to false after the promise resolves. So after fetchData() finishes, isLoading is false.

📝 Syntax

advanced

Which option correctly implements a loading state with Vue 3's Composition API?

Choose the code snippet that correctly manages a loading state while fetching data asynchronously.

A

<script setup>
import { ref } from 'vue'
const loading = ref(false)
async function load() {
  loading.value = true
  fetch('/api/data')
  loading.value = false
}
load()
</script>

B

<script setup>
import { reactive } from 'vue'
const state = reactive({ loading: false })
function load() {
  state.loading = true
  fetch('/api/data').then(() => {
    state.loading = false
  })
}
load()
</script>

C

<script setup>
import { ref } from 'vue'
const loading = false
async function load() {
  loading = true
  await fetch('/api/data')
  loading = false
}
load()
</script>

D

<script setup>
import { ref } from 'vue'
const loading = ref(false)
function load() {
  loading = true
  fetch('/api/data').then(() => {
    loading = false
  })
}
load()
</script>

💡 Hint

Remember how to correctly update reactive state in Vue 3.

Option B uses reactive and updates state.loading correctly inside a promise. Option B is missing await on fetch and does not handle the promise properly. Options C and D try to assign directly to refs without .value, causing errors.

🔧 Debug

advanced

Why does the loading spinner disappear too soon in this Vue component?

Examine the code below. The loading spinner shows briefly but disappears too soon. What is the cause?

Vue

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

const loading = ref(true)

onMounted(() => {
  fetch('/api/data')
    .then(response => response.json())
    .then(data => {
      // process data
    })
  loading.value = false
})
</script>

<template>
  <div>
    <div v-if="loading">Loading spinner...</div>
    <div v-else>Data loaded</div>
  </div>
</template>

A loading.value is set to false immediately after fetch starts, so spinner disappears too soon.

B loading.value is never set to false because the fetch promise is not awaited before setting loading.

C The fetch call is missing error handling, causing loading to stay true on failure.

D The loading ref is not reactive, so changes do not update the template.

💡 Hint

Check when loading.value is updated relative to the fetch call.

The code sets loading.value = false immediately after starting fetch, not waiting for the data to load. This causes the spinner to disappear too soon.

🧠 Conceptual

expert

Which approach best ensures accessibility during loading states in Vue components?

When showing a loading spinner in a Vue component, which practice best improves accessibility for screen reader users?

A Use <code>aria-hidden="true"</code> on the spinner to hide it from screen readers.

B Only show a spinner icon with no text or ARIA attributes to keep UI clean.

C Disable all keyboard interactions until loading finishes without announcing loading state.

D Use <code>aria-busy="true"</code> on the container and provide visually hidden text describing loading status.

💡 Hint

Think about how screen readers detect loading and how to inform users.

Using aria-busy="true" signals to assistive technologies that content is loading. Adding visually hidden text helps users understand the loading state. Options B, C, and D either hide important info or block interaction without feedback, which harms accessibility.

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