fix: improve loading animation and transition effects in the app

MiaoMint · MiaoMint · commit 7df8e13634b0 · 2026-01-12T20:38:32.000+08:00
diff --git a/frontend/index.html b/frontend/index.html
@@ -1,12 +1,62 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>vite-app</title>
+    <style>
+      /* Loading styles to prevent white screen */
+      body {
+        overflow: hidden;
+        transition: overflow 0s 0.45s;
+      }
+
+      body.loaded {
+        overflow: auto;
+      }
+
+      #app-loading {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: #ffffff;
+        z-index: 9999;
+        transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+      }
+
+      @media (prefers-color-scheme: dark) {
+        #app-loading {
+          background-color: #0a0a0a;
+        }
+      }
+
+      #app-loading.fade-out {
+        opacity: 0;
+        pointer-events: none;
+      }
+
+      #root {
+        opacity: 0;
+        filter: blur(4px);
+        transform: scale(0.99);
+        transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1),
+                    filter 0.45s cubic-bezier(0.4, 0, 0.2, 1),
+                    transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
+        will-change: opacity, filter, transform;
+      }
+
+      #root.loaded {
+        opacity: 1;
+        filter: blur(0);
+        transform: scale(1);
+      }
+    </style>
   </head>
   <body>
+    <div id="app-loading"></div>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
@@ -1,4 +1,4 @@
-import { StrictMode } from "react";
+import { StrictMode, useEffect } from "react";
 import { createRoot } from "react-dom/client";
 
 import "./index.css";
@@ -12,13 +12,44 @@ import { defaultLocale, dynamicActivate } from "./i18n";
 // Initialize i18n
 dynamicActivate(defaultLocale);
 
+// 移除加载动画并显示主界面
+const removeLoader = () => {
+  const loader = document.getElementById('app-loading');
+  const root = document.getElementById('root');
+  
+  if (loader && root) {
+    // 先让内容淡入
+    requestAnimationFrame(() => {
+      root.classList.add('loaded');
+      document.body.classList.add('loaded');
+      // 同时让加载屏淡出
+      loader.classList.add('fade-out');
+      // 动画完成后移除加载屏
+      setTimeout(() => {
+        loader.remove();
+      }, 600);
+    });
+  }
+};
+
+function AppWrapper() {
+  useEffect(() => {
+    // 组件挂载后移除加载动画
+    removeLoader();
+  }, []);
+
+  return (
+    <ThemeProvider defaultTheme="system" storageKey="vite-ui-theme">
+      <App />
+      <Toaster position="top-center" />
+    </ThemeProvider>
+  );
+}
+
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <I18nProvider i18n={i18n}>
-      <ThemeProvider defaultTheme="system" storageKey="vite-ui-theme">
-        <App />
-        <Toaster position="top-center" />
-      </ThemeProvider>
+      <AppWrapper />
     </I18nProvider>
   </StrictMode>
 );
