added delayed router loader

resources/js/router/index.js

@@ -368,17 +368,22 @@ const router = createRouter({
 
 // export let activeRoutes = [];
 
-router.beforeEach(async (to, from, next) => {
-    // BC Start
-    // activeRoutes = [];
-    // to.matched.forEach((record) => {
-    //     console.log(record.routeName);
-    //     activeRoutes.push(record);
-    // });
+let routerLoadingTimeout = null;
 
+router.beforeEach(async (to, from, next) => {
     const userStore = useUserStore();
     const applicationStore = useApplicationStore();
 
+    if (routerLoadingTimeout != null) {
+        clearTimeout(routerLoadingTimeout);
+        routerLoadingTimeout = null;
+    }
+
+    routerLoadingTimeout = window.setTimeout(() => {
+        routerLoadingTimeout = null;
+        applicationStore.setRouterLoading(true);
+    }, 1000);
+
     applicationStore.clearDynamicTitle();
 
     // Check Token
@@ -461,4 +466,14 @@ router.beforeEach(async (to, from, next) => {
     }
 });
 
+router.afterEach((to, from) => {
+    if (routerLoadingTimeout != null) {
+        clearTimeout(routerLoadingTimeout);
+        routerLoadingTimeout = null;
+    }
+
+    const applicationStore = useApplicationStore();
+    applicationStore.setRouterLoading(false);
+});
+
 export default router;

resources/js/store/ApplicationStore.ts

@@ -2,14 +2,14 @@ import { defineStore } from "pinia";
 
 export interface ApplicationStore {
     dynamicTitle: string;
-    racers: boolean;
+    routerLoading: boolean;
 }
 
 export const useApplicationStore = defineStore({
     id: "application",
     state: (): ApplicationStore => ({
         dynamicTitle: "",
-        racers: false,
+        routerLoading: false,
     }),
 
     actions: {
@@ -21,5 +21,9 @@ export const useApplicationStore = defineStore({
         clearDynamicTitle() {
             this.$state.dynamicTitle = "";
         },
+
+        setRouterLoading(loading: boolean) {
+            this.$state.routerLoading = loading;
+        },
     },
 });

resources/js/views/App.vue

@@ -8,13 +8,18 @@
         </router-view>
     </main>
     <SMFooter />
+    <SMLoader :loading="applicationStore.routerLoading" />
     <DialogWrapper :transition-attrs="{ name: 'fade' }" />
 </template>
 
 <script setup lang="ts">
 import SMNavbar from "../components/SMNavbar.vue";
 import SMFooter from "../components/SMFooter.vue";
+import SMLoader from "../components/SMLoader.vue";
 import { DialogWrapper } from "vue3-promise-dialog";
+import { useApplicationStore } from "../store/ApplicationStore";
+
+const applicationStore = useApplicationStore();
 </script>
 
 <style lang="scss">