Nuxt 3 page loader stops while images are still loading

Question

I want to show a loading screen until my site is completely finished loading. <NuxtLoadingIndicator> or runtime hooks like page:finish or page:loading:end don't work for me. Both show the page while the images are still loading.

So far I've tried:

<template>
  <div class="h-screen">
    <div v-if="loading" class="fixed left-0 top-0 h-0.5 w-full z-50 bg-green-500" />

    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>

<script setup lang="ts">
  const nuxtApp = useNuxtApp();
  const loading = ref(false);
  nuxtApp.hook("page:start", () => {
    loading.value = true;
  });
  nuxtApp.hook("page:finish", () => {
    loading.value = false;
  });
</script>

And also:

<template>
  <NuxtLayout>
    <NuxtLoadingIndicator />
    <NuxtPage />
  <NuxtLayout>
</template>

I'm running the app on PWA mode (SSR:false)

Answer 1

Because the <NuxtLoadingIndicator> finishes loading when the router is loaded instead of the resources on the page are loaded.

---

If you want to handle the progress of the <NuxtLoadingIndicator> manually, use useLoadingIndicator().isLoading

<template>
   <img
        @load="loadedTheResource"
   />
</template>
<script lang="ts" setup>

const loadingIndicator = useLoadingIndicator();

loadingIndicator.isLoading.value = true;

const loadedTheResource = () => {
    loadingIndicator.isLoading.value = false;
};

</script>