From 189098cd545cc0ea856225a5bf69cd49968dd9c7 Mon Sep 17 00:00:00 2001
From: kkfluous <kkfluous@kdemacbook-air.local>
Date: Sun, 29 Mar 2026 00:35:07 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20Tab=E5=88=87=E6=8D=A2=E5=BB=B6=E8=BF=9F?=
 =?UTF-8?q?=E6=B8=B2=E6=9F=93=E9=87=8D=E5=86=85=E5=AE=B9=EF=BC=8C=E8=A7=A3?=
 =?UTF-8?q?=E5=86=B3=E5=8C=BA=E5=9F=9F=E9=A1=B5=E5=88=87=E6=8D=A2=E5=8D=A1?=
 =?UTF-8?q?=E9=A1=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 切换Tab时先卸载旧内容显示loading，下一帧再渲染新内容
- 图表等重组件不再阻塞Tab切换动画
- 所有Tab统一处理，切换体验一致

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/App.tsx | 30 ++++++++++++++++++++++--------
 1 file changed, 22 insertions(+), 8 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 66bdc58..f5960d9 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback, useMemo, useRef, useTransition } from 'react';
+import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
 import {
   Truck,
   Warehouse,
@@ -114,9 +114,17 @@ const TABS = [
 ];
 
 export default function App() {
-  const [activeTab, setActiveTabRaw] = useState<'overview' | 'department' | 'region' | 'customer'>('overview');
-  const [, startTransition] = useTransition();
-  const setActiveTab = useCallback((tab: typeof activeTab) => { startTransition(() => setActiveTabRaw(tab)); }, []);
+  const [activeTab, setActiveTab] = useState<'overview' | 'department' | 'region' | 'customer'>('overview');
+  const [tabReady, setTabReady] = useState(true);
+  const prevTabRef = useRef(activeTab);
+  useEffect(() => {
+    if (prevTabRef.current !== activeTab) {
+      setTabReady(false);
+      prevTabRef.current = activeTab;
+      const id = requestAnimationFrame(() => { setTabReady(true); });
+      return () => cancelAnimationFrame(id);
+    }
+  }, [activeTab]);
   const [theme, setTheme] = useState<'soft' | 'minimal' | 'vibrant'>('soft');
   const [expandedModels, setExpandedModels] = useState<Set<string>>(new Set());
   const [expandedAssetTypes, setExpandedAssetTypes] = useState<Set<string>>(new Set());
@@ -613,7 +621,13 @@ export default function App() {
       {/* Main Content Area */}
       <div className="flex flex-col gap-6">
 
-        {activeTab === 'overview' && (
+        {!tabReady && (
+          <div className="flex items-center justify-center py-20">
+            <Loader2 className="animate-spin text-blue-500" size={28} />
+          </div>
+        )}
+
+        {tabReady && activeTab === 'overview' && (
           <>
             {/* Header Summary - Ultra Compact */}
             <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-2 mb-2">
@@ -1384,7 +1398,7 @@ export default function App() {
         </>
         )}
 
-        {activeTab === 'department' && (
+        {tabReady && activeTab === 'department' && (
         <section className="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden mb-6">
           <div className="p-0 sm:p-2 bg-gray-50/30">
             {/* Overall Total Summary (Compact) - Moved to Top */}
@@ -1901,7 +1915,7 @@ export default function App() {
         </section>
         )}
 
-        {activeTab === 'region' && (
+        {tabReady && activeTab === 'region' && (
         <div className="flex flex-col gap-6">
           {/* Region Distribution Chart */}
           <section className="bg-white rounded-2xl shadow-sm border border-gray-100 p-4 sm:p-6">
@@ -2175,7 +2189,7 @@ export default function App() {
         </div>
         )}
 
-        {activeTab === 'customer' && (
+        {tabReady && activeTab === 'customer' && (
         <div className="flex flex-col gap-6">
           {/* Customer Region Distribution Chart */}
           <section className="bg-white rounded-2xl shadow-sm border border-gray-100 p-4 sm:p-6">