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.