Nuxt•4w ago

Custom Loading Screen when the browser is still process rendering

How to make or custom loading screen when the browser is still process rendering in NuxtJS 3.

5 Replies

Hi @Adnan Erlansyah. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To create a custom loading screen while the browser is still processing rendering in Nuxt 3, you have a few options: 1. Use the <NuxtLoadingIndicator> component: You can add the <NuxtLoadingIndicator> component to your app.vue file or layout:

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

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

This will display a progress bar between page navigations Nuxt Loading Indicator (https://nuxt.com/docs/api/components/nuxt-loading-indicator#usage). 2. Customize the loading indicator: You can customize the appearance of the loading indicator by passing props:

<NuxtLoadingIndicator :height="5" color="#00dc82" />

<NuxtLoadingIndicator :height="5" color="#00dc82" />

You can adjust properties like color, height, duration, and more Nuxt Loading Indicator Props (https://nuxt.com/docs/api/components/nuxt-loading-indicator#props). 3. Use the useLoadingIndicator composable: For more control, you can use the useLoadingIndicator composable:

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

// You can manually control the loading state
start()
// ... do some work
finish()
</script>

<template>
  <div v-if="isLoading">Loading: {{ progress }}%</div>
</template>

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

// You can manually control the loading state
start()
// ... do some work
finish()
</script>

<template>
  <div v-if="isLoading">Loading: {{ progress }}%</div>
</template>

This allows you to manually control the loading state and access properties like isLoading and progress useLoadingIndicator Composable (https://nuxt.com/docs/api/composables/use-loading-indicator). 4. Create a custom loading component: For a fully custom loading screen, you can create your own component and use it with the ClientOnly component to ensure it only renders on the client side:

<template>
  <ClientOnly>
    <MyCustomLoadingScreen v-if="isLoading" />
    <NuxtPage />
  </ClientOnly>
</template>
<script setup>
const isLoading = ref(true)
// Set isLoading to false when your content is ready
</script>

<template>
  <ClientOnly>
    <MyCustomLoadingScreen v-if="isLoading" />
    <NuxtPage />
  </ClientOnly>
</template>
<script setup>
const isLoading = ref(true)
// Set isLoading to false when your content is ready
</script>

Remember that the ClientOnly component is used for purposely rendering a component only on the client side ClientOnly Component (https://nuxt.com/docs/api/components/client-only). Keep in mind that the loading indicator's speed gradually decreases after reaching a specific point to provide a more accurate reflection of longer page loading times Loading Indicator Enhancement (https://github.com/nuxt/nuxt/pull/25119). These approaches should help you create a custom loading screen while the browser is still processing rendering in Nuxt 3. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

<@1079709612078534676> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Adnan ErlansyahOP•4w ago

@kapa.ai I think it's still work for me, the state isLoading of useLoadingIndicator is still false although I've already refreshed and delayed the network of the browser.

kapa.ai•4w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I understand you're having issues with the useLoadingIndicator composable in Nuxt 3, specifically that the isLoading state remains false even after refreshing and delaying the network. Let's look into this issue based on the available information. The useLoadingIndicator composable is designed to work with Nuxt's built-in page navigation system. However, it seems that in some cases, it might not behave as expected. Here are a few things to consider: 1. Hook into page loading events: Instead of relying solely on useLoadingIndicator, you can try hooking into Nuxt's page loading events directly. Here's an example:

<template>
  <div v-if="loading" class="fixed left-0 top-0 h-0.5 w-full z-50 bg-green-500" />
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</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>

<template>
  <div v-if="loading" class="fixed left-0 top-0 h-0.5 w-full z-50 bg-green-500" />
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</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>

This approach uses Nuxt's hooks to track the loading state Stack Overflow - Nuxt 3 page loader (https://stackoverflow.com/questions/78070807). 2. Manual control: If you need more control over the loading state, you can manually manage it:

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

// Manually start the loading indicator
start()

// Simulate some asynchronous operation
setTimeout(() => {
  // Finish the loading indicator
  finish()
}, 2000)
</script>

<template>
  <div v-if="isLoading">Loading...</div>
  <NuxtPage />
</template>

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

// Manually start the loading indicator
start()

// Simulate some asynchronous operation
setTimeout(() => {
  // Finish the loading indicator
  finish()
}, 2000)
</script>

<template>
  <div v-if="isLoading">Loading...</div>
  <NuxtPage />
</template>

3. Check for suspensible option: Make sure you're not using the suspensible: false option in your defineAsyncComponent calls, as this can affect how loading components are displayed Stack Overflow - Loading component in defineAsyncComponent (https://stackoverflow.com/questions/78590292). 4. Consider using useLazyFetch or useLazyAsyncData: These composables provide a pending state that you can use to show a loading indicator:

<script setup lang="ts">
const { pending, data: posts } = useLazyFetch('/api/posts')
</script>

<template>
  <div v-if="pending">Loading...</div>
  <div v-else>
    <!-- Display your posts here -->
  </div>
</template>

<script setup lang="ts">
const { pending, data: posts } = useLazyFetch('/api/posts')
</script>

<template>
  <div v-if="pending">Loading...</div>
  <div v-else>
    <!-- Display your posts here -->
  </div>
</template>

This approach allows you to handle the loading state for specific data fetching operations Nuxt Data Fetching - Lazy (https://nuxt.com/docs/getting-started/data-fetching#lazy). If none of these solutions work for your specific use case, it might be worth creating a minimal reproduction of the issue and reporting it to the Nuxt GitHub repository. The behavior you're experiencing might be a bug that needs to be addressed by the Nuxt team. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

<@1079709612078534676> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Custom Loading Screen when the browser is still process rendering