Custom Loading Screen when the browser is still process rendering

K

kapa.ai•11/26/24, 9:41 AM

Hi @Adnan Erlansyah. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base.

K

kapa.ai•11/26/24, 9:41 AM

----------------------
To create a custom loading screen while the browser is still processing rendering in Nuxt 3, you have a few options:

Use the
```
<NuxtLoadingIndicator>
```
<NuxtLoadingIndicator>
```
<NuxtLoadingIndicator>
```
<NuxtLoadingIndicator>
component:

You can add the

<NuxtLoadingIndicator>

<NuxtLoadingIndicator>

<NuxtLoadingIndicator>

<NuxtLoadingIndicator> component to your

app.vue

app.vue

app.vue

app.vue file or layout:

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

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

<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).

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" />

<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).

Use the
```
useLoadingIndicator
```
useLoadingIndicator
```
useLoadingIndicator
```
useLoadingIndicator
composable:

For more control, you can use the

useLoadingIndicator

useLoadingIndicator

useLoadingIndicator

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>

<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

isLoading

isLoading

isLoading and

progress

progress

progress

progress useLoadingIndicator Composable (https://nuxt.com/docs/api/composables/use-loading-indicator).

Create a custom loading component:

For a fully custom loading screen, you can create your own component and use it with the

ClientOnly

ClientOnly

ClientOnly

ClientOnly component to ensure it only renders on the client side:

```vue
<template>
<ClientOnly>
<MyCustomLoadingScreen v-if="isLoading" />
<NuxtPage />
</ClientOnly>
</template>

K

kapa.ai•11/26/24, 9:42 AM

``

Remember that the

``

Remember that the

``

Remember that the

``

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

----------------------

K

kapa.ai•11/26/24, 9:42 AM

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

A

Adnan ErlansyahOP•11/26/24, 9:53 AM

@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.

K

kapa.ai•11/26/24, 9:53 AM

Let me check the knowledge base for you again. One moment!

K

kapa.ai•11/26/24, 9:54 AM

----------------------
I understand you're having issues with the

useLoadingIndicator

useLoadingIndicator

useLoadingIndicator

useLoadingIndicator composable in Nuxt 3, specifically that the

isLoading

isLoading

isLoading

isLoading state remains false even after refreshing and delaying the network. Let's look into this issue based on the available information.

The

useLoadingIndicator

useLoadingIndicator

useLoadingIndicator

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:

Hook into page loading events:

Instead of relying solely on

useLoadingIndicator

useLoadingIndicator

useLoadingIndicator

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>

<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).

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>

<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>

Check for suspensible option:

K

kapa.ai•11/26/24, 9:54 AM

Make sure you're not using the

suspensible: false

suspensible: false

suspensible: false

suspensible: false option in your

defineAsyncComponent

defineAsyncComponent

defineAsyncComponent

defineAsyncComponent calls, as this can affect how loading components are displayed Stack Overflow - Loading component in defineAsyncComponent (https://stackoverflow.com/questions/78590292).

Consider using
```
useLazyFetch
```
useLazyFetch
```
useLazyFetch
```
useLazyFetch
or
```
useLazyAsyncData
```
useLazyAsyncData
```
useLazyAsyncData
```
useLazyAsyncData
:

These composables provide a

pending

pending

pending

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>

<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

----------------------

K

kapa.ai•11/26/24, 9:54 AM

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