perf: prefetch ai pages and soften route loading

web/packages/effects/layouts/src/basic/content/use-content-spinner.ts

@@ -5,41 +5,73 @@ import { preferences } from '@vben/preferences';
 
 function useContentSpinner() {
   const spinning = ref(false);
-  const startTime = ref(0);
+  const visibleStartTime = ref(0);
   const router = useRouter();
-  const minShowTime = 500; // 最小显示时间
+  const showDelay = 220;
+  const minVisibleTime = 160;
   const enableLoading = computed(() => preferences.transition.loading);
+  let pending = false;
+  let showTimer: ReturnType<typeof setTimeout> | undefined;
+  let hideTimer: ReturnType<typeof setTimeout> | undefined;
 
-  // 结束加载动画
-  const onEnd = () => {
+  const clearTimers = () => {
+    clearTimeout(showTimer);
+    clearTimeout(hideTimer);
+    showTimer = undefined;
+    hideTimer = undefined;
+  };
+
+  const onStart = () => {
     if (!enableLoading.value) {
       return;
     }
-    const processTime = performance.now() - startTime.value;
-    if (processTime < minShowTime) {
-      setTimeout(() => {
+
+    pending = true;
+    clearTimers();
+    showTimer = setTimeout(() => {
+      if (!pending) {
+        return;
+      }
+
+      visibleStartTime.value = performance.now();
+      spinning.value = true;
+    }, showDelay);
+  };
+
+  const onEnd = () => {
+    pending = false;
+    clearTimeout(showTimer);
+    showTimer = undefined;
+
+    if (!enableLoading.value || !spinning.value) {
+      return;
+    }
+
+    const visibleTime = performance.now() - visibleStartTime.value;
+    if (visibleTime < minVisibleTime) {
+      hideTimer = setTimeout(() => {
         spinning.value = false;
-      }, minShowTime - processTime);
+        hideTimer = undefined;
+      }, minVisibleTime - visibleTime);
     } else {
       spinning.value = false;
     }
   };
 
-  // 路由前置守卫
   router.beforeEach((to) => {
     if (to.meta.loaded || !enableLoading.value || to.meta.iframeSrc) {
       return true;
     }
-    startTime.value = performance.now();
-    spinning.value = true;
+
+    onStart();
     return true;
   });
 
-  // 路由后置守卫
   router.afterEach((to) => {
     if (to.meta.loaded || !enableLoading.value || to.meta.iframeSrc) {
       return true;
     }
+
     onEnd();
     return true;
   });