improvements

Author: connorabbas

.devcontainer/devcontainer.json

@@ -20,7 +20,8 @@
                 "hollowtree.vue-snippets",
                 "Vue.volar",
                 "bradlc.vscode-tailwindcss",
-                "shd101wyy.markdown-preview-enhanced"
+                "shd101wyy.markdown-preview-enhanced",
+                "formulahendry.auto-rename-tag"
             ],
             "settings": {
                 "terminal.integrated.shell.linux": "/bin/sh"

src/App.vue

@@ -1,12 +1,21 @@
 <script setup>
-import { RouterView } from "vue-router";
+import { RouterView } from 'vue-router';
 </script>
 
 <template>
     <!-- Use key to re-generate the page view component on each navigation :key="$route.path" -->
     <!-- Alteratively, use a watch() on each component to re-render dynamic data as needed -->
     <Toast position="top-center" />
-    <Suspense>
-        <RouterView />
-    </Suspense>
+    <RouterView v-slot="{ Component }">
+        <Suspense timeout="0">
+            <template #default>
+                <component :is="Component" />
+            </template>
+            <template #fallback>
+                <div class="h-screen flex items-center justify-center">
+                    <ProgressSpinner />
+                </div>
+            </template>
+        </Suspense>
+    </RouterView>
 </template>

src/composables/useAxiosForm.js

@@ -1,6 +1,5 @@
 import { ref } from 'vue';
 import axios from '@/utils/axios';
-import progress from '@/utils/progress';
 import { useAxiosErrorHandling } from '@/composables/useAxiosErrorHandling';
 
 export function useAxiosForm(initialData = {}) {
@@ -28,7 +27,6 @@ export function useAxiosForm(initialData = {}) {
         try {
             clearErrors();
             processing.value = true;
-            progress.start();
 
             if (options.onBefore) options.onBefore();
 
@@ -48,9 +46,7 @@ export function useAxiosForm(initialData = {}) {
         } finally {
             if (onFinishCallback) onFinishCallback();
             if (options.onFinish) options.onFinish();
-
             processing.value = false;
-            progress.done();
         }
     };
 

src/middleware/verified.js

@@ -1,14 +1,11 @@
 export default async function verified({ to, from, authStore }) {
+    if (to.name === 'verifyEmail') return;
+
     if (!authStore.user) {
         await authStore.fetchUser();
     }
-    if (
-        authStore.mustVerifyEmail &&
-        new Boolean(authStore.user?.id) &&
-        authStore.user.email_verified_at === null
-    ) {
-        if (to.name !== 'verifyEmail') {
-            return { name: 'verifyEmail' };
-        }
+
+    if (authStore.mustVerifyEmail && new Boolean(authStore.user?.id) && authStore.user.email_verified_at === null) {
+        return { name: 'verifyEmail' };
     }
 }

src/router/index.js

@@ -14,28 +14,38 @@ const router = createRouter({
         {
             path: '/:pathMatch(.*)*', // 404 route not found
             name: 'NotFound',
-            component: () => import('@/views/NotFound.vue'),
+            component: () => import('@/views/error/NotFound.vue'),
         },
     ],
 });
 
+let progressTimeout = null;
 router.beforeEach(async (to, from) => {
-    progress.start();
+    progressTimeout = setTimeout(() => progress.start(), 250);
     const authStore = useAuthStore();
 
     // Run middleware pipeline
-    const context = { to, from, authStore };
-    const routeMiddleware = to.meta.middleware || [];
-    for (const middleware of routeMiddleware) {
-        const result = await middleware(context);
-        if (result) {
-            return result; // Exit and redirect if middleware returns a route
+    try {
+        const context = { to, from, authStore };
+        const routeMiddleware = to.meta.middleware || [];
+        for (const middleware of routeMiddleware) {
+            const result = await middleware(context);
+            if (result) {
+                return result; // Exit and redirect if middleware returns a route
+            }
+        }
+    } finally {
+        clearTimeout(progressTimeout);
+        if (progress.isStarted()) {
+            progress.done();
         }
     }
 });
 
 router.afterEach(() => {
-    progress.done();
+    if (progress.isStarted()) {
+        progress.done();
+    }
 });
 
 export default router;