` 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).",[2865,2868,2871,2874],{"name":2866,"color":2867},"enhancement","8DEF37",{"name":2869,"color":2870},"good first issue","fbca04",{"name":2872,"color":2873},"upstream","E8A36D",{"name":2875,"color":2876},"馃嵃 p2-nice-to-have","0E8A16",24553,"nuxt","open","[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.6454529,{"labels":2885,"number":2895,"owner":2878,"repository":2878,"state":2896,"title":2897,"updated_at":2898,"url":2899,"score":2900},[2886,2889,2892],{"name":2887,"color":2888},"stale","ffffff",{"name":2890,"color":2891},"pending triage","E99695",{"name":2893,"color":2894},"2.x","d4c5f9",7123,"closed","Loading indicator customization not working for default loader","2023-01-22T15:34:50Z","https://github.com/nuxt/nuxt/issues/7123",0.6402223,{"description":2902,"labels":2903,"number":2906,"owner":2878,"repository":2878,"state":2896,"title":2907,"updated_at":2908,"url":2909,"score":2910},"### Versions\r\n\r\n- nuxt: v2.15.8\r\n- node: v14.17.1\r\n\r\n### Reproduction\r\nCodeSandbox: https://codesandbox.io/s/nuxt-customloadingindicator-bug-i79yf\r\n\r\n### Steps to reproduce\r\n\r\n1 - Open sandbox and type \"npm run build\", I disabled SSR on nuxt.config.js. \r\n2 - Watch the console.\r\n\r\n### What is actually happening?\r\n\r\nI created a custom loading indicator based on the Nuxt template and I have put it on the root assets folder and configured it the following way:\r\n```js\r\n loadingIndicator: {\r\n name: '@/assets/splashscreen.html',\r\n },\r\n```\r\n\r\nHowever, when I build I got the following:\r\n\r\n`7:60 error failed to tokenize \"=\\\"./assets...\", expected attribute, \">\" or \"/>\" parser-error` from HTML Validator for every route\r\n`ERROR Error generating route \"/\": HTML minification failed. Make sure the route generates valid HTML. Failed HTML:` from Nuxt for every route.\r\n\r\nI also tested the following:\r\n```js\r\n loadingIndicator: {\r\n name: '@/assets/splashscreen',\r\n },\r\n```\r\n```js\r\n loadingIndicator: {\r\n name: '/assets/splashscreen.html',\r\n },\r\n```\r\nBut as expected I got the following:\r\n` ERROR Could not fetch loading indicator: @/assets/splashscreen`\r\n\r\nThank you for the amazing work 馃檹 excited for what is coming!\r\n\r\n------\r\n\r\nPS: I also tried an Inline SVG instead of an img tag and got a similar error:\r\n`7:64 error failed to tokenize \"=\\\"0 0 512 ...\", expected attribute, \">\" or \"/>\" parser-error`\r\n",[2904,2905],{"name":2890,"color":2891},{"name":2893,"color":2894},9695,"[CodeSandbox] Custom Loading Indicator breaks SPA build","2023-01-22T15:45:05Z","https://github.com/nuxt/nuxt/issues/9695",0.6420193,{"labels":2912,"number":2915,"owner":2878,"repository":2878,"state":2896,"title":2916,"updated_at":2917,"url":2918,"score":2919},[2913,2914],{"name":2866,"color":2867},{"name":2893,"color":2894},6831,"know SPA ready from loadingIndicator page","2023-02-17T00:13:23Z","https://github.com/nuxt/nuxt/issues/6831",0.6531524,{"description":2921,"labels":2922,"number":2924,"owner":2878,"repository":2878,"state":2896,"title":2925,"updated_at":2926,"url":2927,"score":2928},"Hello, \r\nI would like to show nuxt's default loading while some backend api calls are in progress. How to do it right?\r\nThanks\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c2280\">#c2280\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2923],{"name":2893,"color":2894},2621,"how to use nuxt's loading component inside page?","2023-01-18T16:02:22Z","https://github.com/nuxt/nuxt/issues/2621",0.65337855,{"description":2930,"labels":2931,"number":2934,"owner":2878,"repository":2878,"state":2896,"title":2935,"updated_at":2936,"url":2937,"score":2938},"### What problem does this feature solve?\r\n\r\nCurrently the navigation behavior with Nuxt is the following:\r\n\r\n1. User clicks on a link\r\n2. Loading of new page starts\r\n3. User waits for new page load to complete\r\n4. Route updates\r\n5. Exit transition of current view plays\r\n6. Enter transition of new view plays\r\n7. Navigation is complete\r\n\r\nThis is not ideal UX-wise. Even when I make efforts to make my page quite fast and enable the loading indicator, the load times are inconsistent, and the page feels broken and frozen upon clicking a link as a result.\r\n\r\n\r\n### What does the proposed changes look like?\r\n\r\nI think a better behavior would be the following:\r\n\r\n1. User clicks on a link\r\n2. Route updates\r\n3. Loading of new page starts\r\n4. Exit transition of current view plays\r\n5. User waits for new page load to complete\r\n6. Enter transition of new view plays\r\n7. Navigation is complete\r\n\r\nThis way, we mitigate the problems significantly by taking advantage of two common patterns: offering immediate feedback after user interaction, and using exit transition duration to hide part of the loading time.\r\n\r\nI don't think there's need to take away the current behavior, but to rather a new alternative as an option, and also consider using it as a default. I'm sure I'm not the first one thinking of this but could still find no issues or discussion around it. Also whether the route visibly updating immediately or during the transition phase... probably not that big a deal, but immediate feedback is good.\r\n\r\nI'm not really up-to-date on all the tech behind the navigation logic, but I think this could drastically improve the perceived performance of Nuxt sites, hiding most of the page loads behind transitions.\r\n\r\n**EDIT:** \r\n\r\nA couple more points to clarify:\r\n\r\n- I'm not proposing any changes to the loading bar - at least nothing comes to mind that would need it.\r\n- I could already move loading logic from `asyncData` to other lifecycle hooks, in which case I get detailed control over my loading and wait time behavior. But I of course rely on `asyncData` for a reason, which is I want my prerendered pages to have the content available.\r\n- I'm **not** proposing rendering the new page without asyncData completing first. I'm proposing removing current page without delay, and waiting for the new page to load after that, if loading still takes time.\r\n\r\nOf course it would be awesome to have even more controls over how long loading times are handled between transitions, or even rendering (some) pages before asyncData completes in SPA mode only (i.e. allowing devs to write custom loading behavior while still staying server-render-friendly).\r\n\r\n\u003C!--cmty-->\r\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/c8620\">#c8620\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2932,2933],{"name":2866,"color":2867},{"name":2893,"color":2894},4978,"When moving to a new route, transition current view out without delay","2024-06-14T16:10:17Z","https://github.com/nuxt/nuxt/issues/4978",0.6559557,{"description":2940,"labels":2941,"number":2944,"owner":2878,"repository":2878,"state":2896,"title":2945,"updated_at":2946,"url":2947,"score":2948},"### Environment\r\n\r\n```bash\r\nNuxt project info: 0:30:28\r\n\r\n------------------------------\r\n- Operating System: Windows_NT\r\n- Node Version: v20.10.0\r\n- Nuxt Version: 3.11.1\r\n- CLI Version: 3.11.1\r\n- Nitro Version: 2.9.4\r\n- Package Manager: pnpm@8.15.4\r\n- Builder: -\r\n- User Config: typescript, modules, app, features, experimental, css, postcss, recaptcha, pwa, devtools, vite\r\n- Runtime Modules: @unocss/nuxt@0.58.6, @nuxtjs/i18n@8.1.1, @vueuse/nuxt@10.9.0, @vite-pwa/nuxt@0.6.0\r\n- Build Modules: -\r\n------------------------------\r\n```\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/github-lpzonl?file=app.vue,styles%2Fglobal.css,nuxt.config.ts\r\n\r\n### Describe the bug\r\n\r\nThere is no way to change `hideDelay` from the loading indicator component, and so we need to await ~1s to hide the indicator: page end + 500ms in `hideDelay` + 400ms in the css transition.\r\n\r\nNuxtLoadingIndicator should expose the `hideDelay` or `force` prop without needing to rewrite it, `hideDelay: 0` should be the default value.\r\n\r\nYou can check the SB reproduction:\r\n- open preview in a new tab\r\n- check the delay when navigating\r\n- open devtools and find `_nuxt/node_modules/nuxt/dist/app/composables/loading-indicator.js?v=\u003Csome_version>` in the source tab\r\n- add a breakpoint in L9\r\n- refresh the page and set `hideDelay` to 0\r\n- navigate again\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[2942,2943],{"name":2866,"color":2867},{"name":2875,"color":2876},26637,"weird behavior with loading indicator component","2025-04-03T15:17:07Z","https://github.com/nuxt/nuxt/issues/26637",0.65795875,{"description":2950,"labels":2951,"number":2956,"owner":2878,"repository":2878,"state":2896,"title":2957,"updated_at":2958,"url":2959,"score":2960},"I have a problem with the way google crawler renders my Nuxt SPA website. It just renders the loading indicator and ignores the content.\r\n\r\nI don't want to disable the loading animation, but can't find any other option. Are there any other solutions for this?\r\n\r\nThanks in advance\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c2095\">#c2095\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2952,2955],{"name":2953,"color":2954},"question","cc317c",{"name":2893,"color":2894},2409,"Loading indicator and Google crawler","2023-01-18T15:55:12Z","https://github.com/nuxt/nuxt/issues/2409",0.6616637,{"description":2962,"labels":2963,"number":2968,"owner":2878,"repository":2878,"state":2896,"title":2969,"updated_at":2970,"url":2971,"score":2972},"### Describe the feature\r\n\r\nCurrently, the Nuxt3 loading indicator looks for the \"page:finish\" event [here](https://github.com/nuxt/nuxt/blob/2fbc73b3a3965cfa32e99e74f639ff7f66e5397e/packages/nuxt/src/app/components/nuxt-loading-indicator.ts#L34). This event is fired whenever a page is loaded. When dealing with nested routes, the parent might be loaded before the child. This is not a problem if you go from e.g. /dashboard -> dashboard/:id, but if you go from e.g. /user -> dashboard/:id, this problem will arise.\r\n\r\nIn my case, I would like the loading indicator to wait for the entire route to be loaded, including child routes.\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).",[2964,2967],{"name":2965,"color":2966},"3.x","29bc7f",{"name":2890,"color":2891},18813,"Nuxt3 loading indicator should wait for nested routes","2023-05-11T17:57:22Z","https://github.com/nuxt/nuxt/issues/18813",0.6694791,{"description":2974,"labels":2975,"number":2978,"owner":2878,"repository":2878,"state":2896,"title":2979,"updated_at":2980,"url":2981,"score":2982},"### 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>",[2976,2977],{"name":2866,"color":2867},{"name":2893,"color":2894},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.67341906,["Reactive",2984],{},["Set"],["ShallowReactive",2987],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fLGxobGpBGB4B33u5IBuPCFZz0L5TBHweAc4KoFBEcvU":-1},"/nuxt/nuxt/7568"]