I am looking to create a unique loading page that conceals itself once all requests and static data have been loaded, including static images and libraries. How can I determine when all requests and static data have finished loading?
I have attempted the following code but it has not worked for me:
<template>
<div v-if="loading" class="fixed left-0 top-0 w-full z-50 bg-green-500 h-screen"></div>
<NuxtPage v-else />
</template>
<script setup>
const nuxtApp = useNuxtApp();
const loading = ref(false);
nuxtApp.hook("page:start", () => {
loading.value = true;
});
nuxtApp.hook("page:finish", () => {
loading.value = false;
});
</script>