Nuxt•14mo ago

nuxtloadingindicator gets stuck half way

Hello, i've used nuxtloadingindicator in all my projects. But in this new project of mine the loading indicator always gets stuck at 50% (half way on the screen) and never dissapears untill the window is manually refreshed. navigating between pages causes the issue again. Has anyone experienced this?

kapa.ai•11/6/24, 3:00 PM

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

kapa.ai•11/6/24, 3:01 PM

----------------------
This issue with the NuxtLoadingIndicator getting stuck halfway is a known problem that has been addressed in recent updates to Nuxt. Based on the information provided in the knowledge sources, I can offer some insights and potential solutions:

Recent Enhancement: A recent feature enhancement PR #25119 (https://github.com/nuxt/nuxt/pull/25119) addressed the issue of the loading indicator prematurely reaching 100% or getting stuck when actual page loading exceeds the specified duration. This update improved the behavior to provide a more accurate visual representation of the loading status, particularly for longer loading scenarios.
Progression Rate: The new implementation includes a progressionRateprogressionRate property that controls how the progress is calculated. The indicator now gradually slows down after hitting 50% progress (by default), ensuring a continuous display of loading progress even during longer load times.
Manual Control: If the automatic behavior is not working as expected, you can manually control the loading indicator using the
```
useLoadingIndicator
```
```
useLoadingIndicator
```
composable. Here's an example of how you can use it:

<script setup lang="ts">
const loadingIndicator = useLoadingIndicator();

// Start the loading indicator
loadingIndicator.start();

// Finish the loading (call this when your resources are loaded)
loadingIndicator.finish();
</script>

<script setup lang="ts">
const loadingIndicator = useLoadingIndicator();

// Start the loading indicator
loadingIndicator.start();

// Finish the loading (call this when your resources are loaded)
loadingIndicator.finish();
</script>

Check for Updates: Ensure that you're using the latest version of Nuxt, as several fixes related to the loading indicator have been implemented in recent updates. For instance, PR #24931 (https://github.com/nuxt/nuxt/pull/24931) addressed issues with the loading indicator not stopping correctly in certain scenarios.

kapa.ai•11/6/24, 3:01 PM

Server-Side Rendering: If you're using server-side rendering, make sure that the loading indicator hooks are not being registered on the server, as this can cause issues. This was addressed in PR #24052 (https://github.com/nuxt/nuxt/pull/24052).
Route Changes: The loading indicator behavior has been improved to better handle route changes, including cases where the route parameters change but the component remains the same PR #23868 (https://github.com/nuxt/nuxt/pull/23868).

If you're still experiencing issues after checking these points, it would be helpful to create a minimal reproduction of the problem and report it as an issue on the Nuxt GitHub repository (https://nuxt.com/docs/community/reporting-bugs). The Nuxt team is actively working on improving the framework, and your feedback could help identify and resolve any remaining bugs.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------

kapa.ai•11/6/24, 3:01 PM

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

sniperfull.OP•11/6/24, 3:02 PM

any way to get it working without stopping it manually?

<script setup lang="ts"> const loadingIndicator = useLoadingIndicator(); // Start the loading indicator loadingIndicator.start(); // Finish the loading (call this when your resources are loaded) loadingIndicator.finish(); </script>

nuxtloadingindicator gets stuck half way

Similar Threads

Similar Threads

Similar Threads