\r\n ...\r\n````\r\n\r\nAdd some page with some async load time so to have the loading indicator show between route change.\n\n### Describe the bug\n\nThe browser view transition diffing makes the NuxtLoadingIndicator invisible up until the page is fully loaded when it shortly flashes to a 100%. If I remove the `viewTransition: true` it works as expected again.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3019,3022,3025],{"name":3020,"color":3021},"good first issue","fbca04",{"name":3023,"color":3024},"bug","d73a4a",{"name":3026,"color":3027},"馃敤 p3-minor","FBCA04",21280,"nuxt","open","NuxtLoadingIndicator is broken when using together with experimental.viewTransitions ","2024-11-19T16:20:26Z","https://github.com/nuxt/nuxt/issues/21280",0.61469597,{"description":3036,"labels":3037,"number":3049,"owner":3029,"repository":3029,"state":3030,"title":3050,"updated_at":3051,"url":3052,"score":3053},"### Environment\r\n\r\n- Operating System: Windows_NT\r\n- Node Version: v18.17.1\r\n- Nuxt Version: 3.10.2\r\n- CLI Version: 3.10.1\r\n- Nitro Version: -\r\n- Package Manager: pnpm@8.15.2\r\n- Builder: -\r\n- User Config: devtools, modules, routeRules\r\n- Runtime Modules: @nuxtjs/tailwindcss@6.11.4\r\n- Build Modules: -\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/github-uqxt1s\r\n\r\n### Describe the bug\r\n\r\nWhen using `NuxtLoadingIndicator`, an issue arises when navigating to a page with a different layout that contains an asynchronous operation within the setup function. In these specific cases, the loading indicator gets stuck and fails to disappear after the page has loaded.",[3038,3041,3042,3045,3046],{"name":3039,"color":3040},"workaround available","11376d",{"name":3023,"color":3024},{"name":3043,"color":3044},"pages","00DFB5",{"name":3026,"color":3027},{"name":3047,"color":3048},"suspense","C70109",25840,"NuxtLoadingIndicator gets stuck on page with different layout and async setup","2025-03-18T07:34:32Z","https://github.com/nuxt/nuxt/issues/25840",0.64162445,{"description":3055,"labels":3056,"number":3063,"owner":3029,"repository":3029,"state":3064,"title":3065,"updated_at":3066,"url":3067,"score":3068},"### Environment\r\n\r\n------------------------------\r\n- Operating System: `Windows_NT`\r\n- Node Version: `v16.16.0`\r\n- Nuxt Version: `3.2.0`\r\n- Nitro Version: `2.2.1`\r\n- Package Manager: `yarn@1.22.15`\r\n- Builder: `vite`\r\n- User Config: `modules`\r\n- Runtime Modules: `@nuxtjs/tailwindcss@6.4.0`, `@nuxtjs/fontaine@0.2.4`, `nuxt-icon@0.2.11`, `@nuxt/devtools@0.1.2`, `@nuxt/image-edge@1.0.0-27919678.2f5b64b`, `@nuxtjs/google-fonts@3.0.0-1`\r\n- Build Modules: `-`\r\n------------------------------\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/github-tvjuvn?file=app.vue\r\n\r\n### Describe the bug\r\n\r\nIt seems that `NuxtLoadingIndicator` is not setting its opacity to `1` when it needs to be shown. This is a screenshot of the moment the loading indicator should appear:\r\n\r\n\r\n\r\n\r\n\r\n\r\n### Additional context\r\n\r\nNot working on v3.1.2 and edge either.\r\n\r\n### Logs\r\n\r\n_No response_",[3057,3060],{"name":3058,"color":3059},"3.x","29bc7f",{"name":3061,"color":3062},"pending triage","E99695",18969,"closed","`\u003CNuxtLoadingIndicator>` not working on `3.2.0`","2023-02-12T07:55:54Z","https://github.com/nuxt/nuxt/issues/18969",0.5826949,{"description":3070,"labels":3071,"number":3074,"owner":3029,"repository":3029,"state":3064,"title":3075,"updated_at":3076,"url":3077,"score":3078},"### Environment\n\n- Operating System: Darwin\r\n- Node Version: v20.10.0\r\n- Nuxt Version: 3.9.1\r\n- CLI Version: 3.10.0\r\n- Nitro Version: 2.8.1\r\n- Package Manager: yarn@4.0.2\r\n- Builder: -\r\n- User Config: ssr, runtimeConfig, app, modules, apiParty, devtools, eslint, storyblok, image, i18n, router, routeRules, components, vue, typescript\r\n- Runtime Modules: @nuxt/devtools@1.0.6, @nuxtjs/device@3.1.1, @nuxt/image@1.1.0, @nuxtjs/i18n@8.0.0, @nuxtjs/eslint-module@4.1.0, nuxt-api-party@0.22.3, nuxt-clarity-analytics@0.0.6, nuxt-jsonld@2.0.8, nuxt-swiper@2.0.0-0, @voctag/ui@1.0.50, @vueuse/nuxt@10.7.1, @pinia/nuxt@0.5.1, @storyblok/nuxt@6.0.0\r\n- Build Modules: -\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-wlowtc?file=app.vue\n\n### Describe the bug\n\nNuxtLoadingIndicator stuck/freeze\r\n\r\nHappens for example when you navigate from one page with layout A to another page with layout B via `navigateTo()`\r\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3072,3073],{"name":3058,"color":3059},{"name":3061,"color":3062},25081,"NuxtLoadingIndicator still not working properly in nuxt 3.9.1 when using navigateTo()","2024-02-18T14:36:09Z","https://github.com/nuxt/nuxt/issues/25081",0.5994276,{"description":3080,"labels":3081,"number":3084,"owner":3029,"repository":3029,"state":3064,"title":3085,"updated_at":3086,"url":3087,"score":3088},"### Environment\n\n- Operating System: `Darwin`\r\n- Node Version: `v16.15.1`\r\n- Nuxt Version: `3.2.0`\r\n- Nitro Version: `2.2.1`\r\n- Package Manager: `yarn@1.22.4`\r\n- Builder: `vite`\r\n- User Config: `modules`, `app`, `vite`, `i18n`, `build`, `runtimeConfig`, `telemetry`\r\n- Runtime Modules: `@pinia/nuxt@0.4.6`, `@nuxtjs/tailwindcss@6.2.0`, `@nuxtjs/i18n@8.0.0-beta.7`\r\n- Build Modules: `-`\r\n\n\n### Reproduction\n\n- Install the latest nuxt version (3.2.0)\r\n- create at least 2 pages for navigating\r\n- Add **NuxtLoadingIndicator** to your app.vue file like state [here](https://nuxt.com/docs/api/components/nuxt-loading-indicator#nuxtloadingindicator)\r\n\n\n### Describe the bug\n\nWhen adding **nuxtLoadingIndicator** to app.vue it will not show up. This only happens in Nuxt version 3.2.0. In Nuxt version 3.0.0 it works fine. \n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3082,3083],{"name":3058,"color":3059},{"name":3061,"color":3062},18996,"NuxtLoadingIndicator doesn't work in Nuxt 3.2.0","2023-02-14T16:25:01Z","https://github.com/nuxt/nuxt/issues/18996",0.60127836,{"description":3090,"labels":3091,"number":3094,"owner":3029,"repository":3029,"state":3064,"title":3095,"updated_at":3096,"url":3097,"score":3098},"### Environment\r\n\r\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.18.0\r\n- Nuxt Version: 3.9.0\r\n- CLI Version: 3.10.0\r\n- Nitro Version: 2.8.1\r\n- Package Manager: npm@9.4.2\r\n- Builder: -\r\n- User Config: extends\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/nuxt-examples-4fafzz?file=pages%2Findex.vue\r\n\r\nStep to reproduce:\r\n\r\n1. Click on Demo Link (doesnt work)\r\n2. Check console logs (`useLoadingIndicator().start();`is called but not working)\r\n3. Click on Start/Stop and see it's working fine from page.\r\n\r\n### Describe the bug\r\n\r\nI've tried implementing `useLoadingIndicator().start()`but failed because it doesn't work from plugin hooks/pinia store for unknown reason.\r\n\r\nI've provided reproduction which should work, check DevTools logs and click on ?\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[3092,3093],{"name":3058,"color":3059},{"name":3061,"color":3062},24900,"useLoadingIndicator doesn't work correctly","2023-12-28T09:45:09Z","https://github.com/nuxt/nuxt/issues/24900",0.60883003,{"description":3100,"labels":3101,"number":3104,"owner":3029,"repository":3029,"state":3064,"title":3105,"updated_at":3106,"url":3107,"score":3108},"### Environment\r\n\r\n------------------------------\r\n- Operating System: Darwin\r\n- Node Version: v21.5.0\r\n- Nuxt Version: 3.11.0\r\n- CLI Version: 3.10.1\r\n- Nitro Version: -\r\n- Package Manager: pnpm@8.15.4\r\n- Builder: -\r\n- User Config: modules, app, css, site, i18n, colorMode, ui, robots, sitemap, linkChecker, runtimeConfig, devServer, devtools\r\n- Runtime Modules: @nuxt/image@1.4.0, @nuxt/ui@2.14.2, @nuxtjs/i18n@8.2.0, @nuxtjs/seo@2.0.0-rc.9, @vueuse/nuxt@10.9.0, @pinia/nuxt@0.5.1, @pinia-plugin-persistedstate/nuxt@1.2.0\r\n- Build Modules: -\r\n------------------------------\r\n\r\n### Reproduction\r\n\r\nI tried but I guess nuxt is broken on stackblitz? \r\n\r\nhttps://stackblitz.com/edit/nuxt-starter-uq849c?file=README.md\r\n\r\n### Describe the bug\r\n\r\nBefore nuxt 3.11.0 I was able to use the loading indicator like this\r\n\r\n```ts\r\nconst { start, isLoading, finish } = useLoadingIndicator()\r\nstart()\r\n...\r\nfinish()\r\n```\r\n\r\nNow it gives me a type error if a don't add {} inside the finish func\r\n```ts\r\nconst { start, isLoading, finish } = useLoadingIndicator()\r\nstart()\r\n...\r\nfinish({})\r\n```\r\n\r\n### Additional context\r\n\r\n\r\n\r\nSince force is the only entry inside opts and it's optional, I guess opts should be\r\n```ts\r\nopts?: {\r\n\tforce?: boolean | undefined\r\n}\r\n```\r\n\r\nSorry in advance if I'm saying anything wrong here!\r\n\r\n### Logs\r\n\r\n_No response_",[3102,3103],{"name":3058,"color":3059},{"name":3061,"color":3062},26317,"[3.11.0] useLoadingIndicator finish type error","2024-03-17T19:13:47Z","https://github.com/nuxt/nuxt/issues/26317",0.61449826,{"description":3110,"labels":3111,"number":3114,"owner":3029,"repository":3029,"state":3064,"title":3115,"updated_at":3116,"url":3117,"score":3118},"### Environment\n\nmultiple environments\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-ni6a1j?file=app.vue\n\n### Describe the bug\n\nNot sure if this was deprecated?\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3112,3113],{"name":3058,"color":3059},{"name":3061,"color":3062},23568,"NuxtLoadingIndicator stopped working","2023-12-19T10:18:12Z","https://github.com/nuxt/nuxt/issues/23568",0.62260735,{"description":3120,"labels":3121,"number":3125,"owner":3029,"repository":3029,"state":3064,"title":3126,"updated_at":3127,"url":3128,"score":3129},"### Environment\n\n- Operating System: `Darwin`\r\n- Node Version: `v18.16.0`\r\n- Nuxt Version: `3.7.1`\r\n- CLI Version: `3.7.3`\r\n- Nitro Version: `2.6.2`\r\n- Package Manager: `yarn@1.22.19`\r\n- Builder: `-`\r\n- User Config: `devtools`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\r\n\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-cei3lp?file=app.vue\n\n### Describe the bug\n\nNuxtLoadingIndicator does not working for dynamic pages (loaded via `[...slugs].vue`). It works only for staticly added pages. I suppose that the last working version of nuxt is `3.5.0`, I tried with versions:\r\n- 3.6.0\r\n- 3.6.5\r\n- 3.7.0\r\n- 3.7.1 (latest)\r\n\r\n**Preview:**\r\nhttps://github.com/nuxt/nuxt/assets/33403174/bc8cf61b-5923-4f77-a183-4c80138f1cef\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3122,3123,3124],{"name":3058,"color":3059},{"name":3023,"color":3024},{"name":3026,"color":3027},23042,"NuxtLoadingIndicator does not working for dynamic pages","2024-01-16T10:45:23Z","https://github.com/nuxt/nuxt/issues/23042",0.6283055,{"description":3131,"labels":3132,"number":3134,"owner":3029,"repository":3029,"state":3064,"title":3135,"updated_at":3136,"url":3137,"score":3138},"### Environment\n\n- Operating System: Linux\n- Node Version: v20.19.1\n- Nuxt Version: 3.17.3\n- CLI Version: 3.25.1\n- Nitro Version: 2.11.12\n- Package Manager: npm@10.8.2\n- Builder: -\n- User Config: compatibilityDate, devtools\n- Runtime Modules: -\n- Build Modules: -\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-shxr5zha\n\n### Describe the bug\n\nCan't trigger NuxtLoadingIndicator on query change. I know that useAsyncData doesn't trigger indicator on query change (unfortunately :c). Tried to use:\n\n`useNuxtApp().callHook('page:loading:start')` + `useNuxtApp().callHook('page:loading:end')`\nand\n`useLoadingIndicator().start()` + `useLoadingIndicator().finish()`\n\nIs it a bug or am I doing smth wrong?\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3133],{"name":3061,"color":3062},32132,"Can't trigger NuxtLoadingIndicator","2025-05-17T15:47:30Z","https://github.com/nuxt/nuxt/issues/32132",0.6325271,["Reactive",3140],{},["Set"],["ShallowReactive",3143],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fnOLy7iLgi5XuQOcxjXh5WZFOu8YXgvSVBtyXyTraET8":-1},"/nuxt/nuxt/18630"]