add page loading icon

resources/js/components/SMLoadingIcon.vue

@@ -48,6 +48,7 @@ const props = defineProps({
     div:nth-child(4) {
         left: 2em;
         animation: loading-icon3 0.6s infinite;
+        z-index: -1;
     }
 
     @keyframes loading-icon1 {

resources/js/router/index.js

@@ -429,19 +429,18 @@ router.beforeEach(async (to, from, next) => {
 
     applicationStore.clearDynamicTitle();
 
+    if (applicationStore.pageLoaderTimeout !== 0) {
+        window.clearTimeout(applicationStore.pageLoaderTimeout);
+        applicationStore.pageLoaderTimeout = window.setTimeout(() => {
+            const pageLoadingElem = document.getElementById("sm-page-loading");
+            if (pageLoadingElem !== null) {
+                pageLoadingElem.style.display = "flex";
+            }
+        }, 0);
+    }
+
     if (to.meta.middleware == "authenticated") {
         if (userStore.id) {
-            // try {
-            //     let res = await api.get({
-            //         url: "/me",
-            //     });
-            //     userStore.setUserDetails(res.json.user);
-            // } catch (err) {
-            //     if (err.status == 401) {
-            //         userStore.clearUser();
-            //     }
-            // }
-
             api.get({
                 url: "/me",
             })
@@ -482,6 +481,8 @@ router.beforeEach(async (to, from, next) => {
 });
 
 router.afterEach((to, from) => {
+    const applicationStore = useApplicationStore();
+
     if (from.name !== undefined) {
         document.body.classList.remove(`page-${from.name}`);
     }
@@ -550,6 +551,16 @@ router.afterEach((to, from) => {
             }
         }
     }, 10);
+
+    if (applicationStore.pageLoaderTimeout !== 0) {
+        window.clearTimeout(applicationStore.pageLoaderTimeout);
+        applicationStore.pageLoaderTimeout = 0;
+    }
+
+    const pageLoadingElem = document.getElementById("sm-page-loading");
+    if (pageLoadingElem !== null) {
+        pageLoadingElem.style.display = "none";
+    }
 });
 
 export default router;

resources/js/store/ApplicationStore.ts

@@ -5,6 +5,7 @@ type ApplicationStoreEventKeyUpCallback = (event: KeyboardEvent) => boolean;
 export interface ApplicationStore {
     dynamicTitle: string;
     eventKeyUpStack: ApplicationStoreEventKeyUpCallback[];
+    pageLoaderTimeout: number;
     _addedListener: boolean;
 }
 
@@ -13,6 +14,7 @@ export const useApplicationStore = defineStore({
     state: (): ApplicationStore => ({
         dynamicTitle: "",
         eventKeyUpStack: [],
+        pageLoaderTimeout: 0,
         _addedListener: false,
     }),
 

resources/js/views/App.vue

@@ -10,6 +10,9 @@
     <footer>
         <SMPageFooter />
     </footer>
+    <div id="sm-page-loading">
+        <SMLoadingIcon large />
+    </div>
     <SMToastList />
     <SMDialogList />
 </template>
@@ -19,6 +22,7 @@ import SMNavbar from "../components/SMNavbar.vue";
 import SMPageFooter from "../components/SMPageFooter.vue";
 import SMToastList from "../components/SMToastList.vue";
 import SMDialogList from "../components/SMDialog";
+import SMLoadingIcon from "../components/SMLoadingIcon.vue";
 </script>
 
 <style lang="scss">
@@ -28,6 +32,24 @@ main {
     flex: 1;
 }
 
+#sm-page-loading {
+    position: fixed;
+    display: flex;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    align-items: center;
+    justify-content: center;
+    backdrop-filter: blur(2px);
+    -webkit-backdrop-filter: blur(2px);
+    z-index: 10000;
+
+    .loading-icon-balls div {
+        box-shadow: 0 0 2px 2px white;
+    }
+}
+
 .fade-enter-active,
 .fade-leave-active {
     transition: all 0.35s ease;