Nuxt•2mo 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?

3 Replies

kapa.ai•2mo ago

Hi @sniperfull.. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- 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: 1. 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. 2. Progression Rate: The new implementation includes a progressionRate 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. 3. Manual Control: If the automatic behavior is not working as expected, you can manually control the loading indicator using the 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>

4. 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. 5. 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). 6. 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•2mo ago

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

sniperfull.OP•2mo ago

any way to get it working without stopping it manually?

Gaming

Programming

nuxtloadingindicator gets stuck half way