perf: 首页优化loading效果、路由切换优化loading效果

huangmingfu · Nov 1, 2024 · 66624d5 · 66624d5
1 parent bc400c5
commit 66624d5
Show file tree

Hide file tree

Showing 5 changed files with 94 additions and 70 deletions.
diff --git a/index.html b/index.html
@@ -9,7 +9,69 @@
   </head>
 
   <body>
-    <div id="root"></div>
+    <div id="root">
+      <!-- 白屏阶段会执行的 CSS 加载loading动画 -->
+      <style>
+        .loading {
+          position: fixed;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+        }
+        h3 {
+          color: #269af2;
+        }
+        .loader {
+          --r1: 154%;
+          --r2: 68.5%;
+
+          width: 80px;
+          background: radial-gradient(var(--r1) var(--r2) at top, #0000 79.5%, #269af2 80%),
+            radial-gradient(var(--r1) var(--r2) at bottom, #269af2 79.5%, #0000 80%),
+            radial-gradient(var(--r1) var(--r2) at top, #0000 79.5%, #269af2 80%), #ccc;
+          background-position:
+            -100% 0%,
+            0% 0%,
+            100% 0%;
+          background-repeat: no-repeat;
+          background-size: 50.5% 220%;
+          border-radius: 50%;
+          animation: l9 2s infinite linear;
+          aspect-ratio: 1;
+        }
+
+        @keyframes l9 {
+          33% {
+            background-position:
+              0% 33%,
+              100% 33%,
+              200% 33%;
+          }
+
+          66% {
+            background-position:
+              -100% 66%,
+              0% 66%,
+              100% 66%;
+          }
+
+          100% {
+            background-position:
+              0% 100%,
+              100% 100%,
+              200% 100%;
+          }
+        }
+      </style>
+      <div class="loading">
+        <div class="loader"></div>
+        <h3>%VITE_APP_TITLE%</h3>
+      </div>
+    </div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
diff --git a/src/plugins/loading.ts b/src/plugins/loading.ts
diff --git a/src/router/utils/lazy-load.tsx b/src/router/utils/lazy-load.tsx
@@ -7,7 +7,8 @@ import { LazyExoticComponent, ReactNode, Suspense } from 'react';
  */
 export const LazyLoad = (Component: LazyExoticComponent<() => JSX.Element>): ReactNode => {
   return (
-    <Suspense fallback={<div>loading...</div>}>
+    // loading效果可自行修改为ui组件库的loading组件
+    <Suspense fallback={<div className="route-loading"></div>}>
       <Component />
     </Suspense>
   );

diff --git a/src/styles/scss/global.scss b/src/styles/scss/global.scss
@@ -1 +1,30 @@
 /** 公共样式 */
+
+/* HTML: <div class="route-loading"></div> */
+.route-loading {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  width: 120px;
+  height: 22px;
+  color: #514b82;
+  border: 2px solid;
+  border-radius: 20px;
+  transform: translate(-50%, -50%);
+}
+
+.route-loading::before {
+  position: absolute;
+  margin: 2px;
+  background: currentcolor;
+  border-radius: inherit;
+  content: '';
+  animation: l6 2s infinite;
+  inset: 0 100% 0 0;
+
+  @keyframes l6 {
+    100% {
+      inset: 0;
+    }
+  }
+}
diff --git a/src/views/home/index.tsx b/src/views/home/index.tsx
@@ -10,7 +10,6 @@ import viteLogo from '/vite.svg';
 function Home() {
   const [count, setCount] = useState(0);
   const router = useRouter();
-
   return (
     <div className="pg-home">
       <div>