From 029aa2574dc5b838860c6475851fa48075c57db0 Mon Sep 17 00:00:00 2001
From: ShiYu <im@shiyu.dev>
Date: Wed, 22 Oct 2025 10:30:19 +0800
Subject: [PATCH] feat: optimize skeleton screen animations

---
 .../FileExplorerPage/FileExplorerPage.tsx     | 27 ++++++++++++++++++-
 1 file changed, 26 insertions(+), 1 deletion(-)

diff --git a/web/src/pages/FileExplorerPage/FileExplorerPage.tsx b/web/src/pages/FileExplorerPage/FileExplorerPage.tsx
index 917c0df..7be6a3f 100644
--- a/web/src/pages/FileExplorerPage/FileExplorerPage.tsx
+++ b/web/src/pages/FileExplorerPage/FileExplorerPage.tsx
@@ -32,7 +32,9 @@ const FileExplorerPage = memo(function FileExplorerPage() {
   const { token } = theme.useToken();
   const [viewMode, setViewMode] = useState<ViewMode>('grid');
   const [isDragging, setIsDragging] = useState(false);
+  const [showSkeleton, setShowSkeleton] = useState(false);
   const dragCounter = useRef(0);
+  const skeletonTimerRef = useRef<number | null>(null);
 
   // --- Hooks ---
   const { path, entries, loading, pagination, processorTypes, sortBy, sortOrder, load, navigateTo, goUp, handlePaginationChange, refresh, handleSortChange } = useFileExplorer(navKey);
@@ -63,6 +65,29 @@ const FileExplorerPage = memo(function FileExplorerPage() {
     load(routePath, 1, pagination.pageSize, sortBy, sortOrder);
   }, [routePath, navKey, load, pagination.pageSize, sortBy, sortOrder]);
 
+  useEffect(() => {
+    if (skeletonTimerRef.current !== null) {
+      clearTimeout(skeletonTimerRef.current);
+      skeletonTimerRef.current = null;
+    }
+
+    if (loading) {
+      skeletonTimerRef.current = window.setTimeout(() => {
+        setShowSkeleton(true);
+        skeletonTimerRef.current = null;
+      }, 200);
+    } else {
+      setShowSkeleton(false);
+    }
+
+    return () => {
+      if (skeletonTimerRef.current !== null) {
+        clearTimeout(skeletonTimerRef.current);
+        skeletonTimerRef.current = null;
+      }
+    };
+  }, [loading]);
+
   // --- Handlers ---
   const handleOpenEntry = (entry: VfsEntry) => {
     if (entry.is_dir) {
@@ -184,7 +209,7 @@ const FileExplorerPage = memo(function FileExplorerPage() {
       />
 
       <div style={{ flex: 1, overflow: 'auto', paddingBottom: pagination.total > 0 ? '80px' : '0' }} onContextMenu={openBlankContextMenu}>
-        {loading && (entries.length === 0 || path !== routePath) ? (
+        {showSkeleton && loading && (entries.length === 0 || path !== routePath) ? (
           <LoadingSkeleton mode={viewMode} />
         ) : !loading && entries.length === 0 ? (
           <div style={{ textAlign: 'center', padding: 40 }}><EmptyState isRoot={path === '/'} /></div>