add loader

resources/js/router/index.js

@@ -452,6 +452,7 @@ router.beforeEach(async (to, from, next) => {
     const userStore = useUserStore();
     const applicationStore = useApplicationStore();
 
+    applicationStore.hydrated = false;
     applicationStore.clearDynamicTitle();
 
     if (applicationStore.pageLoaderTimeout !== 0) {
@@ -586,6 +587,9 @@ router.afterEach((to, from) => {
     if (pageLoadingElem !== null) {
         pageLoadingElem.style.display = "none";
     }
+
+    applicationStore.hydrated = true;
+    console.log("hydrated");
 });
 
 export default router;

resources/js/store/ApplicationStore.ts

@@ -3,6 +3,7 @@ import { defineStore } from "pinia";
 type ApplicationStoreEventKeyUpCallback = (event: KeyboardEvent) => boolean;
 
 export interface ApplicationStore {
+    hydrated: boolean;
     unavailable: boolean;
     dynamicTitle: string;
     eventKeyUpStack: ApplicationStoreEventKeyUpCallback[];
@@ -13,6 +14,7 @@ export interface ApplicationStore {
 export const useApplicationStore = defineStore({
     id: "application",
     state: (): ApplicationStore => ({
+        hydrated: false,
         unavailable: false,
         dynamicTitle: "",
         eventKeyUpStack: [],

resources/js/views/App.vue

@@ -1,8 +1,8 @@
 <template>
     <SMNavbar />
     <main class="flex-1">
-        <SMLoading v-if="!appLoaded" class="h-95" />
-        <router-view v-slot="{ Component }">
+        <SMLoading v-if="loading" class="h-95" />
+        <router-view v-else v-slot="{ Component }">
             <component :is="Component" />
         </router-view>
     </main>
@@ -12,16 +12,33 @@
 </template>
 
 <script setup lang="ts">
-const appLoaded = ref(false);
-
 import SMNavbar from "../components/SMNavbar.vue";
 import SMPageFooter from "../components/SMPageFooter.vue";
 import SMToastList from "../components/SMToastList.vue";
 import SMDialogList from "../components/SMDialog";
 import SMLoading from "../components/SMLoading.vue";
-import { onMounted, ref } from "vue";
+import { useApplicationStore } from "../store/ApplicationStore";
+import { ref, watch } from "vue";
 
-onMounted(() => {
-    appLoaded.value = true;
-});
+const loading = ref(true);
+let loadingTimeout = null;
+
+watch(
+    () => useApplicationStore().hydrated,
+    (newValue) => {
+        if (newValue == true) {
+            if (loadingTimeout != null) {
+                clearTimeout(loadingTimeout);
+                loadingTimeout = null;
+            }
+            loading.value = false;
+        } else {
+            if (loadingTimeout == null) {
+                loadingTimeout = setTimeout(() => {
+                    loading.value = true;
+                }, 2000);
+            }
+        }
+    }
+);
 </script>