From aab9f0dbf1a45ea55e4b8860898ec4fccf2f9a45 Mon Sep 17 00:00:00 2001
From: ZhenYi <434836402@qq.com>
Date: Tue, 28 Apr 2026 19:59:31 +0800
Subject: [PATCH] =?UTF-8?q?feat(frontend):=20=E6=9B=BF=E6=8D=A2=E5=85=A8?=
=?UTF-8?q?=E5=B1=8Floading=E5=8A=A8=E7=94=BB=E4=B8=BASVG=E9=80=90?=
=?UTF-8?q?=E5=B8=A7=E7=BB=98=E5=88=B6=E5=8A=A8=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
- 新增 loading-animation.tsx 组件，从 public/load.html 转换
- 动画特性: SVG路径逐条绘制 + 渐变填充，最少展示1.5秒
- 替换 homepage/layout.tsx, workspace/redirect.tsx, protected-route.tsx 中的全屏加载
- 修复 sidebar-user.tsx 中 Invitations 按钮在缩回状态下的居中问题
---
public/load.html | 204 ++++++++++++++++++++++++
src/app/homepage/layout.tsx | 8 +-
src/app/workspace/redirect.tsx | 12 +-
src/components/auth/protected-route.tsx | 8 +-
src/components/layout/sidebar-user.tsx | 2 +-
src/components/ui/loading-animation.tsx | 161 +++++++++++++++++++
6 files changed, 376 insertions(+), 19 deletions(-)
create mode 100644 public/load.html
create mode 100644 src/components/ui/loading-animation.tsx
diff --git a/public/load.html b/public/load.html
new file mode 100644
index 0000000..55770ee
--- /dev/null
+++ b/public/load.html
@@ -0,0 +1,204 @@
+
+
+
+
+
+ Topo Draw Animation
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/app/homepage/layout.tsx b/src/app/homepage/layout.tsx
index f6b1fd8..05c67f1 100644
--- a/src/app/homepage/layout.tsx
+++ b/src/app/homepage/layout.tsx
@@ -3,7 +3,7 @@ import {useQuery} from '@tanstack/react-query';
import {workspaceList, workspaceInfo} from '@/client';
import type {WorkspaceInfoResponse} from '@/client';
import {WorkspaceSidebar} from '@/components/layout/workspace-sidebar';
-import {Spinner} from '@/components/ui/spinner';
+import LoadingAnimation from '@/components/ui/loading-animation';
export default function HomePageLayout() {
const {data, isLoading} = useQuery({
@@ -28,11 +28,7 @@ export default function HomePageLayout() {
});
if (isLoading || infoLoading) {
- return (
-
-
-
- );
+ return ;
}
if (!workspaceInfoData) {
diff --git a/src/app/workspace/redirect.tsx b/src/app/workspace/redirect.tsx
index 2d61640..a6b5d72 100644
--- a/src/app/workspace/redirect.tsx
+++ b/src/app/workspace/redirect.tsx
@@ -2,7 +2,7 @@ import {useEffect} from 'react';
import {useNavigate} from 'react-router-dom';
import {useQuery} from '@tanstack/react-query';
import {workspaceList} from '@/client';
-import {Spinner} from '@/components/ui/spinner';
+import LoadingAnimation from '@/components/ui/loading-animation';
export function WorkspaceRedirect() {
const navigate = useNavigate();
@@ -25,9 +25,9 @@ export function WorkspaceRedirect() {
}
}, [isLoading, data, navigate]);
- return (
-
-
-
- );
+ if (isLoading) {
+ return ;
+ }
+
+ return null;
}
diff --git a/src/components/auth/protected-route.tsx b/src/components/auth/protected-route.tsx
index 41bca50..4a7d634 100644
--- a/src/components/auth/protected-route.tsx
+++ b/src/components/auth/protected-route.tsx
@@ -1,5 +1,5 @@
import { Navigate, Outlet, useLocation } from 'react-router-dom';
-import { Spinner } from '@/components/ui/spinner';
+import LoadingAnimation from '@/components/ui/loading-animation';
import { useUser } from '@/contexts/user-context';
export function ProtectedRoute() {
@@ -7,11 +7,7 @@ export function ProtectedRoute() {
const location = useLocation();
if (isLoading) {
- return (
-
-
-
- );
+ return ;
}
if (!isAuthenticated) {
diff --git a/src/components/layout/sidebar-user.tsx b/src/components/layout/sidebar-user.tsx
index d33a658..06dc25f 100644
--- a/src/components/layout/sidebar-user.tsx
+++ b/src/components/layout/sidebar-user.tsx
@@ -23,7 +23,7 @@ export function SidebarUser({collapsed}: { collapsed: boolean }) {