+ div.spinner-border#global-loading-spinner to fix rstacruz/nprogress#142 (comment) @ layouts/default.vue

+ `stores/globalLoading.ts`
$ yarn remove {,@types/}nprogress
@ fe

Author: n0099

fe/package.json

@@ -29,7 +29,6 @@
         "lodash": "^4.17.21",
         "luxon": "^3.5.0",
         "noty": "^3.2.0-beta-deprecated",
-        "nprogress": "^0.2.0",
         "nuxt": "^3.13.0",
         "scroll-into-view-if-needed": "^3.1.0",
         "tippy.js": "^6.3.7",
@@ -51,7 +50,6 @@
         "@types/lodash": "^4.17.7",
         "@types/luxon": "^3.4.2",
         "@types/node": "^22.5.0",
-        "@types/nprogress": "^0.2.3",
         "@typescript-eslint/eslint-plugin": "^8.3.0",
         "@typescript-eslint/parser": "^8.3.0",
         "@vue/eslint-config-typescript": "^13.0.0",

fe/src/api/index.ts

@@ -1,7 +1,6 @@
 import type { PublicRuntimeConfig } from 'nuxt/schema';
 import type { Enabled, InfiniteData, Query, UseInfiniteQueryOptions, UseQueryOptions } from '@tanstack/vue-query';
 import { QueryObserver } from '@tanstack/vue-query';
-import nProgress from 'nprogress';
 import { FetchError } from 'ofetch';
 import _ from 'lodash';
 
@@ -27,7 +26,7 @@ export const queryFunction = async <TResponse>
     signal?: AbortSignal
 ): Promise<TResponse> => {
     if (import.meta.client) {
-        nProgress.start();
+        useGlobalLoadingStore().start();
         document.body.style.cursor = 'progress';
     }
     try {
@@ -48,7 +47,7 @@ export const queryFunction = async <TResponse>
         throw e;
     } finally {
         if (import.meta.client) {
-            nProgress.done();
+            useGlobalLoadingStore().stop();
             document.body.style.cursor = '';
         }
     }

fe/src/app.vue

@@ -13,16 +13,13 @@ import { VueQueryDevtools } from '@tanstack/vue-query-devtools';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import 'noty/lib/noty.css';
 import 'noty/lib/themes/mint.css';
-import nProgress from 'nprogress';
-import 'nprogress/nprogress.css';
 
 useHead({
     titleTemplate: '%pageTitle %separator %siteName',
     templateParams: { separator: '-' }
 });
 
 if (import.meta.client) {
-    nProgress.configure({ trickleSpeed: 200 });
     await import('bootstrap');
     if (import.meta.dev) {
         await import('@/stats');

fe/src/checkCSS.ts

@@ -7,7 +7,6 @@ checkcss.onClassnameDetected = className =>
         'g-recaptcha',
         'router-link-', // vue-router
         'tsqd-', // @tanstack/vue-query-devtools
-        'nprogress',
         'noty_',
         'tippy-',
         'viewer-',

fe/src/layouts/default.vue

@@ -5,6 +5,11 @@
         <MinimumResolutionWarning />
     </header>
     <img :src="iconLoadingBlock" :class="{ 'd-none': !routeUpdatingStore.isUpdating }" id="loading-block" />
+    <div
+        :class="{ 'visually-hidden': !globalLoadingStore.isLoading }"
+        class="spinner-border text-primary" role="status" id="global-loading-spinner">
+        <span class="visually-hidden">Loading...</span>
+    </div>
     <main>
         <AConfigProvider :locale="AntdZhCn">
             <slot v-if="!routeUpdatingStore.isUpdating" />
@@ -40,24 +45,27 @@
 <script setup lang="ts">
 import iconLoadingBlock from 'assets/icon-loading-block.svg';
 import AntdZhCn from 'ant-design-vue/es/locale/zh_CN';
-import nProgress from 'nprogress';
 
-const routeUpdatingStore = useRouteUpdatingStore();
 const config = useRuntimeConfig().public;
+const routeUpdatingStore = useRouteUpdatingStore();
+const globalLoadingStore = useGlobalLoadingStore();
 const isReCAPTCHAEnabled = config.recaptchaSiteKey !== '';
 const isGoogleAnalyticsEnabled = config.gaMeasurementId !== '';
 
 const noScriptStyle = `<style>
     #app-wrapper {
         pointer-events: unset !important;
     }
+    #global-loading-spinner {
+        visibility: hidden;
+    }
 </style>`; // https://github.com/nuxt/nuxt/issues/13848
 useHead({ noscript: [{ innerHTML: noScriptStyle }] });
 const appPointerEvents = ref('none');
 if (import.meta.client) {
-    nProgress.start();
+    globalLoadingStore.start();
     onNuxtReady(() => {
-        nProgress.done();
+        globalLoadingStore.stop();
         appPointerEvents.value = 'unset';
     });
 }
@@ -74,6 +82,12 @@ if (import.meta.client) {
 #footer-lower {
     background-color: rgba(0,0,0,.2);
 }
+
+#global-loading-spinner {
+    position: absolute;
+    right: 1rem;
+    top: 1rem;
+}
 #loading-block {
     height: 200px;
     margin: auto;

fe/src/stores/globalLoading.ts

@@ -0,0 +1,13 @@
+import _ from 'lodash';
+
+export const useGlobalLoadingStore = defineStore('globalLoading', () => {
+    const isLoading = ref(true); // show initially for noscript
+
+    const start = _.debounce(() => { isLoading.value = true }, 100);
+    const stop = () => {
+        start.cancel();
+        isLoading.value = false;
+    };
+
+    return { isLoading, start, stop };
+});

fe/src/stores/routeUpdating.ts

@@ -1,6 +1,5 @@
-import nProgress from 'nprogress';
-
 export const useRouteUpdatingStore = defineStore('isRouteUpdating', () => {
+    const globalLoadingStore = useGlobalLoadingStore();
     let timeoutId = 0;
     const isUpdating = ref(false);
     const start = () => { isUpdating.value = true };
@@ -10,11 +9,11 @@ export const useRouteUpdatingStore = defineStore('isRouteUpdating', () => {
         if (!import.meta.client)
             return;
         if (isUpdating.value) {
-            timeoutId = window.setTimeout(() => { nProgress.start() }, 100);
+            timeoutId = window.setTimeout(() => { globalLoadingStore.start() }, 100);
             window.setTimeout(end, 10000);
         } else {
             clearTimeout(timeoutId);
-            nProgress.done();
+            globalLoadingStore.stop();
         }
     });
 

fe/yarn.lock

@@ -2733,13 +2733,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/nprogress@npm:^0.2.3":
-  version: 0.2.3
-  resolution: "@types/nprogress@npm:0.2.3"
-  checksum: 10c0/cac0fe73aca79bc1472a1556f56303df72026f2fcd8dbe311fe84b1f46e454b9040c1e69223d94e3bf156a5986382170c52ebda19aa70f555f1b6855d8f744a6
-  languageName: node
-  linkType: hard
-
 "@types/resolve@npm:1.20.2":
   version: 1.20.2
   resolution: "@types/resolve@npm:1.20.2"
@@ -8102,13 +8095,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"nprogress@npm:^0.2.0":
-  version: 0.2.0
-  resolution: "nprogress@npm:0.2.0"
-  checksum: 10c0/eab9a923a1ad1eed71a455ecfbc358442dd9bcd71b9fa3fa1c67eddf5159360b182c218f76fca320c97541a1b45e19ced04e6dcb044a662244c5419f8ae9e821
-  languageName: node
-  linkType: hard
-
 "nth-check@npm:^2.0.1, nth-check@npm:^2.1.1":
   version: 2.1.1
   resolution: "nth-check@npm:2.1.1"
@@ -10356,7 +10342,6 @@ __metadata:
     "@types/lodash": "npm:^4.17.7"
     "@types/luxon": "npm:^3.4.2"
     "@types/node": "npm:^22.5.0"
-    "@types/nprogress": "npm:^0.2.3"
     "@typescript-eslint/eslint-plugin": "npm:^8.3.0"
     "@typescript-eslint/parser": "npm:^8.3.0"
     "@vesp/nuxt-fontawesome": "npm:^1.1.0"
@@ -10374,7 +10359,6 @@ __metadata:
     lodash: "npm:^4.17.21"
     luxon: "npm:^3.5.0"
     noty: "npm:^3.2.0-beta-deprecated"
-    nprogress: "npm:^0.2.0"
     nuxt: "npm:^3.13.0"
     schema-dts: "npm:^1.1.2"
     scroll-into-view-if-needed: "npm:^3.1.0"