` component that shows the loading bar at the top but I think if we combine that with this native loading indicator feature we can really make great UX.\r\n\r\nYes, this is bleeding edge feature not currently supported everywhere but I think it would be nice to still give users the option to use this new feature _**IF their browser supports it.**_\r\n\r\nDocs: \r\nhttps://developer.chrome.com/docs/web-platform/navigation-api/\r\nhttps://developer.mozilla.org/en-US/docs/Web/API/Navigation_API\r\n\r\nDemo:\r\nhttps://gigantic-honored-octagon.glitch.me/\r\n\r\n_(In the demo, you can activate the `Add an artificial two-second delay to all navigations (should impact the loading spinner/scroll restoration/focus reset/accessibility announcements).` checkbox to see the native loader appearing on the tab when navigating)_\r\n\r\n\r\n\r\n\r\n### Additional information\r\n\r\n- [ ] Would you be willing to help implement this feature?\r\n- [ ] Could this feature be implemented as a module?\r\n\r\n### Final checks\r\n\r\n- [X] Read the [contribution guide](https://nuxt.com/docs/community/contribution).\r\n- [X] Check existing [discussions](https://github.com/nuxt/nuxt/discussions) and [issues](https://github.com/nuxt/nuxt/issues).",[2896,2897,2900,2903],{"name":2879,"color":2880},{"name":2898,"color":2899},"good first issue","fbca04",{"name":2901,"color":2902},"upstream","E8A36D",{"name":2904,"color":2905},"🍰 p2-nice-to-have","0E8A16",24553,"[Feature Request] Use the new browser Navigation API to show a native loading indicator when navigating","2025-02-22T19:58:43Z","https://github.com/nuxt/nuxt/issues/24553",0.71875364,{"description":2912,"labels":2913,"number":2920,"owner":2869,"repository":2869,"state":2921,"title":2922,"updated_at":2923,"url":2924,"score":2925},"### Describe the feature\n\nCurrently, the NuxtLoadingIndicator component is not very smart about the way it shows page loading. For example if you set the `duration` prop to 2000 ms it will simply go to the end in 2 seconds and that's all. But if the page takes 5 seconds to load then the loading bar will be at the end stuck for 3 seconds. Not a very good UX.\r\n\r\nI have seen loading indicators where it slowly backs off from reaching the end if the page is not loaded yet. For example if it gets to about 50% and the page is still not loaded it starts moving more slowly and gets slower with time so it does not reach the end. It's an incremental back-off strategy.\n\n### Additional information\n\n- [ ] Would you be willing to help implement this feature?\n- [ ] Could this feature be implemented as a module?\n\n### Final checks\n\n- [X] Read the [contribution guide](https://nuxt.com/docs/community/contribution).\n- [X] Check existing [discussions](https://github.com/nuxt/nuxt/discussions) and [issues](https://github.com/nuxt/nuxt/issues).",[2914,2915,2916,2919],{"name":2879,"color":2880},{"name":2898,"color":2899},{"name":2917,"color":2918},"3.x","29bc7f",{"name":2904,"color":2905},24552,"closed","[Feature Request] Implement a backing off strategy for \u003CNuxtLoadingIndicator>","2024-01-29T16:19:34Z","https://github.com/nuxt/nuxt/issues/24552",0.67696995,{"description":2927,"labels":2928,"number":2932,"owner":2869,"repository":2869,"state":2921,"title":2933,"updated_at":2934,"url":2935,"score":2936},"### Describe the feature\n\nI'd like to be able to disable the global loading indicator for some API calls in cases where I build components that have their own loading indicator. Having a global one is redundant in such a case.\r\n\r\n\n\n### Additional information\n\n- [X] Would you be willing to help implement this feature?\n- [ ] Could this feature be implemented as a module?\n\n### Final checks\n\n- [X] Read the [contribution guide](https://nuxt.com/docs/community/contribution).\n- [X] Check existing [discussions](https://github.com/nuxt/nuxt/discussions) and [issues](https://github.com/nuxt/nuxt/issues).",[2929,2930,2931],{"name":2879,"color":2880},{"name":2882,"color":2883},{"name":2917,"color":2918},26050,"Add ability to disable the `NuxtLoadingIndicator` on some API calls","2024-03-06T20:55:02Z","https://github.com/nuxt/nuxt/issues/26050",0.68243045,{"labels":2938,"number":2942,"owner":2869,"repository":2869,"state":2921,"title":2943,"updated_at":2944,"url":2945,"score":2946},[2939,2940,2941],{"name":2879,"color":2880},{"name":2917,"color":2918},{"name":2904,"color":2905},14221,"`\u003CNuxtLoadingIndicator>` and loading events","2023-12-19T10:18:13Z","https://github.com/nuxt/nuxt/issues/14221",0.6856996,{"description":2948,"labels":2949,"number":2953,"owner":2869,"repository":2869,"state":2921,"title":2954,"updated_at":2955,"url":2956,"score":2957},"### Describe the feature\n\nMaybe I'm missing something, I see the `\u003CNuxtLoadingIndicator />` component, but how can I start/stop the loading manually like in Nuxt 2 ? \r\n\r\nIn Nuxt 2 I could do this:\r\n```\r\nthis.$nuxt.$loading.start();\r\nawait somePromise();\r\nthis.$nuxt.$loading.finish();\r\n```\r\nIn Nuxt 3, could we get a composable to do the same ?\r\n```\r\nconst loading = useLoading();\r\nloading.start();\r\nawait somePromise();\r\nloading.finish();\r\n```\r\n\n\n### Additional information\n\n- [ ] Would you be willing to help implement this feature?\n- [ ] Could this feature be implemented as a module?\n\n### Final checks\n\n- [X] Read the [contribution guide](https://nuxt.com/docs/community/contribution).\n- [X] Check existing [discussions](https://github.com/nuxt/nuxt/discussions) and [issues](https://github.com/nuxt/nuxt/issues).",[2950,2951,2952],{"name":2879,"color":2880},{"name":2917,"color":2918},{"name":2904,"color":2905},19650,"`useLoading` composable to control `\u003CNuxtLoadingIndicator />` ?","2023-03-13T20:30:06Z","https://github.com/nuxt/nuxt/issues/19650",0.68717796,{"description":2959,"labels":2960,"number":2965,"owner":2869,"repository":2869,"state":2921,"title":2966,"updated_at":2967,"url":2968,"score":2969},"### Describe the feature\r\n\r\nHello,\r\n\r\nAs discussed in #24900.\r\n\r\nThere should be an option for `useLoadingIndicator.start({ force: true })` so when it's called the Loading indicator should start from scratch.\r\n\r\nCurrently, after the page load it's not possible to manually start `useLoadingIndicator` because there is `setTimeout` which is basically preventing the start:\r\n\r\nhttps://github.com/nuxt/nuxt/blob/f5676fba5668c3dbff8c1c40e988d469740ee82e/packages/nuxt/src/app/composables/loading-indicator.ts#L16-L23\r\n\r\n\r\nAs suggested by @manniL I could use a workaround and wait 1 second\r\n\r\n```javascript\r\nexport default defineNuxtPlugin({\r\n // eslint-disable-next-line unused-imports/no-unused-vars\r\n async setup(nuxtApp) {},\r\n hooks: {\r\n // You can directly register Nuxt app runtime hooks here\r\n 'page:loading:end': async function () {\r\n console.log('Calling startLoading function from a plugin!');\r\n await new Promise(r => setTimeout(r, 1000))\r\n startLoading();\r\n },\r\n },\r\n});\r\n```\r\n\r\nHonestly, this makes loading indicator as lagging which is weird.\r\n\r\nThanks!\r\n\r\n\r\n### Additional information\r\n\r\n- [ ] Would you be willing to help implement this feature?\r\n- [ ] Could this feature be implemented as a module?\r\n\r\n### Final checks\r\n\r\n- [X] Read the [contribution guide](https://nuxt.com/docs/community/contribution).\r\n- [X] Check existing [discussions](https://github.com/nuxt/nuxt/discussions) and [issues](https://github.com/nuxt/nuxt/issues).",[2961,2962,2963,2964],{"name":2879,"color":2880},{"name":2898,"color":2899},{"name":2917,"color":2918},{"name":2904,"color":2905},24938,"[feat] useLoadingIndicator force reset function","2024-03-06T16:27:06Z","https://github.com/nuxt/nuxt/issues/24938",0.6894827,{"description":2971,"labels":2972,"number":2975,"owner":2869,"repository":2869,"state":2921,"title":2976,"updated_at":2977,"url":2978,"score":2979},"### Environment\r\n\r\n- Operating System: `Darwin`\r\n- Node Version: `v21.7.1`\r\n- Nuxt Version: `3.10.3`\r\n- CLI Version: `3.10.1`\r\n- Nitro Version: `2.9.1`\r\n- Package Manager: `pnpm@8.15.4`\r\n- Builder: `-`\r\n- User Config: `devtools`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\r\n\r\n\r\n### Reproduction\r\n\r\n[https://codesandbox.io/p/sandbox/fancy-cloud-hdr3gz](https://codesandbox.io/p/sandbox/fancy-cloud-hdr3gz).\r\n\r\n### Describe the bug\r\n\r\nIn the repoduction provided, I'm trying to avoid manually handling the loading indicator or filler state returned by `useFetch`. Instead, I want Nuxt.js to take care of it.\r\n\r\nDuring page changes, the `\u003CNuxtLoadingIndicator />` component effectively shows the loading state while `useFetch` is awaited, blocking navigation until the request finishes. This seemed like a good solution to eliminate the need for manual loading state management.\r\n\r\nHowever, this approach falls short when the page doesn't reload but the request is refetched due to actions like refresh, parameter changes, or anything that doesn't trigger a full page mount.\r\n\r\nInitially, it seemed like `useLoadingIndicator` could be used to control the loading indicator manually using `onRequest` and `onResponse` events. Unfortunately, since the loading indicator is tied to route changes, changing a query parameter triggers Nuxt's `page:loading:start` and `page:loading:end` events. This causes the loading indicator to finish before the response arrives, breaking my solution.\r\n\r\nCheck the `composables/api-fetch.ts` for more clarity.\r\n\r\n### Additional context\r\n\r\nI patched the original `useLoadingIndicator`. In `start()` method I added the following code:\r\n\r\n```ts\r\nconst start = () => {\r\n nuxtApp._loadingIndicatorCount = nuxtApp._loadingIndicatorCount || 0;\r\n nuxtApp._loadingIndicatorCount++;\r\n set(0);\r\n};\r\n```\r\nand for `finish()`\r\n\r\n```ts\r\nfunction finish({ force } = { force: false }) {\r\n if (nuxtApp._loadingIndicatorCount && nuxtApp._loadingIndicatorCount > 1 && !force) {\r\n nuxtApp._loadingIndicatorCount--;\r\n return;\r\n }\r\n progress.value = 100;\r\n done = true;\r\n clear();\r\n _hide(isLoading, progress);\r\n}\r\n```\r\n\r\nand in `useFetch`, i called `loadingIndicator.finish({force: true})` inside `onResponse`\r\n\r\n**Patch:**\r\n\r\n```patch\r\ndiff --git a/dist/app/composables/loading-indicator.d.ts b/dist/app/composables/loading-indicator.d.ts\r\nindex a11650a06ec63d485056f294de09997f0fd9ad19..0ddee29d949df9f3e6b6b9817ee6082388cfe0bd 100644\r\n--- a/dist/app/composables/loading-indicator.d.ts\r\n+++ b/dist/app/composables/loading-indicator.d.ts\r\n@@ -17,7 +17,7 @@ export type LoadingIndicator = {\r\n isLoading: Ref\u003Cboolean>;\r\n start: () => void;\r\n set: (value: number) => void;\r\n- finish: () => void;\r\n+ finish: ({ force }: { force: boolean }) => void;\r\n clear: () => void;\r\n };\r\n /**\r\ndiff --git a/dist/app/composables/loading-indicator.js b/dist/app/composables/loading-indicator.js\r\nindex 7324e6f0aad0d6693e3f3301547533343170143c..663e07ed12e78f109247b6731cfb5766d8b1bf77 100644\r\n--- a/dist/app/composables/loading-indicator.js\r\n+++ b/dist/app/composables/loading-indicator.js\r\n@@ -23,7 +23,11 @@ function createLoadingIndicator(opts = {}) {\r\n let done = false;\r\n let rafId;\r\n let _throttle = null;\r\n- const start = () => set(0);\r\n+ const start = () => {\r\n+ nuxtApp._loadingIndicatorCount = nuxtApp._loadingIndicatorCount || 0;\r\n+ nuxtApp._loadingIndicatorCount++;\r\n+ set(0);\r\n+ };\r\n function set(at = 0) {\r\n if (nuxtApp.isHydrating) {\r\n return;\r\n@@ -43,7 +47,12 @@ function createLoadingIndicator(opts = {}) {\r\n _startProgress();\r\n }\r\n }\r\n- function finish() {\r\n+ function finish({ force } = { force: false }) {\r\n+ if (nuxtApp._loadingIndicatorCount && nuxtApp._loadingIndicatorCount > 1 && !force) {\r\n+ nuxtApp._loadingIndicatorCount--;\r\n+ return;\r\n+ }\r\n+\r\n progress.value = 100;\r\n done = true;\r\n clear();\r\n```\r\n```json\r\n\"pnpm\": {\r\n \"patchedDependencies\": {\r\n \"nuxt@3.10.3\": \"patches/nuxt@3.10.3.patch\"\r\n }\r\n}\r\n```\r\n\r\n\r\n### Logs\r\n\r\n_No response_",[2973,2974],{"name":2917,"color":2918},{"name":2866,"color":2867},26226,"loading indicator finishes before the actual `finish()` is called if route query param changes","2024-04-10T04:51:32Z","https://github.com/nuxt/nuxt/issues/26226",0.7014028,{"description":2981,"labels":2982,"number":2987,"owner":2869,"repository":2869,"state":2921,"title":2988,"updated_at":2989,"url":2990,"score":2991},"### What problem does this feature solve?\n\nIt's common enough to want to have placeholder spinners or loading indicators for specific components or on certain parts of a page. Rather than paste from the source code or add another spinner/loader plugin, why not call the existing loadingIndicator animations inside a given component. \n\nMaybe this is already possible; I'm not super clear on the scoping for Nuxt and the documentation is pretty sparse in that area. \n\nSlightly related: loading and loadingIndicator do pretty different things, but are named very similarly. Something like 'route-progress-load' and 'loadingIndicator-page' might be better (those are both terrible names but hopefully the idea comes across).\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This feature request is available on \u003Ca href=\"https://cmty.app/nuxt\">Nuxt\u003C/a> community (\u003Ca href=\"https://cmty.app/nuxt/nuxt.js/issues/c7290\">#c7290\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2983,2984],{"name":2879,"color":2880},{"name":2985,"color":2986},"2.x","d4c5f9",3475,"Easily reuse either loading or loadingIndicator for other parts of a site","2023-01-22T15:50:41Z","https://github.com/nuxt/nuxt/issues/3475",0.7067178,["Reactive",2993],{},["Set"],["ShallowReactive",2996],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fI2AQvmQPiUihV6UyOrRSqEUP9SW8RaqVrTV_-ARj7F0":-1},"/nuxt/nuxt/27175"]