🔗 Linked issue

resolves #27175

📚 Description

This PR adds an error option to finish function from useLoadingIndicator
It can be called with

<script setup lang="ts">
const { start, finish, error } = useLoadingIndicator()

start()

finish({ error: true })

console.log(error.value)
</script>

When finish is called with error set to true, the error ref from useLoadingIndicator will be set to true until the next start(), where it is set back to false

The color of the error can also be change with errorColor prop on NuxtLoadingIndicator component

<template>
  <NuxtLoadingIndicator errorColor="blue" />
</template>

example:

<script setup lang="ts">
const { start, finish, isLoading, error } = useLoadingIndicator()
</script>

<template>
  <NuxtLoadingIndicator :height="5" />
  <div>
    Nuxt 3 Playground
  </div>
  <button @click="start">
    Start
  </button>
  <button @click="finish">
    Finish
  </button>
  <button @click="finish({ error: true })">
    Error
  </button>
  <p :style="isLoading ? 'color: green;' : 'color: red;'">
    isLoading: {{ isLoading }}
  </p>
  <p :style="error ? 'color: green;' : 'color: red;'">
    error: {{ error }}
  </p>
</template>

Before creating the pull request, please make sure you do the following:

• Check that there isn't already a PR that solves the problem the same way. If you find a duplicate, please help us reviewing it.
• Read the contribution docs at https://nuxt.com/docs/community/contribution
• Ensure that PR title follows conventional commits (https://www.conventionalcommits.org)
• Update the corresponding documentation if needed.
• Include relevant tests that fail without this PR but pass with it.