fix tabs flashing that occurs first render

layerok · Jul 1, 2024 · 5433645 · 5433645
1 parent 4869293
commit 5433645
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 4 deletions.
diff --git a/src/examples/clip-one/components/AppLayout/AppLayout.tsx b/src/examples/clip-one/components/AppLayout/AppLayout.tsx
@@ -92,6 +92,9 @@ export function AppLayout() {
               onTabsChange={setTabs}
               onStartPinnedTabsChange={setStartPinnedTabsChange}
               startPinnedTabs={startPinnedTabs}
+              initialActiveTabId={activeTabId}
+              initialTabs={tabs}
+              initialStartPinnedTabs={startPinnedTabs}
               hasControlledActiveTabId
               activeTabId={activeTabId}
               onActiveTabIdChange={setActiveTabId}

diff --git a/src/examples/clip-one/routes/CategoriesRoute.tsx b/src/examples/clip-one/routes/CategoriesRoute.tsx
@@ -97,6 +97,9 @@ export function CategoriesRoute() {
         onActiveTabIdChange={setActiveTabId}
         tabs={tabs}
         startPinnedTabs={startPinnedTabs}
+        initialActiveTabId={activeTabId}
+        initialTabs={tabs}
+        initialStartPinnedTabs={startPinnedTabs}
         onTabsChange={setTabs}
         hasControlledActiveTabId
         onStartPinnedTabsChange={setStartPinnedTabsChange}

diff --git a/src/examples/clip-one/routes/ProductsRoute.tsx b/src/examples/clip-one/routes/ProductsRoute.tsx
@@ -95,6 +95,9 @@ export function ProductsRoute() {
         onTabsChange={setTabs}
         onStartPinnedTabsChange={onStartPinnedTabsChange}
         startPinnedTabs={startPinnedTabs}
+        initialActiveTabId={activeTabId}
+        initialTabs={tabs}
+        initialStartPinnedTabs={startPinnedTabs}
         hasControlledActiveTabId
         activeTabId={activeTabId}
         onActiveTabIdChange={setActiveTabId}

diff --git a/src/lib/tabs/useTabs.tsx b/src/lib/tabs/useTabs.tsx
@@ -24,8 +24,11 @@ export type TabsApi = {
 export type TabsProps = {
   hasControlledActiveTabId?: boolean;
   activeTabId?: string;
+  initialActiveTabId?: string;
   startPinnedTabs?: string[];
   tabs?: TabModel<any>[];
+  initialTabs?: TabModel<any>[];
+  initialStartPinnedTabs?: string[];
   onActiveTabIdChange?: (id: string | undefined) => void;
   onStartPinnedTabsChange?: (ids: string[]) => void;
   onTabsChange?: (tabs: TabModel<any>[]) => void;
@@ -91,7 +94,14 @@ const useActive = (apiRef: MutableRefObject<TabsApi>, props: TabsProps) => {
 };
 
 const useTabsState = (apiRef: MutableRefObject<TabsApi>, props: TabsProps) => {
-  const { onTabsChange, onActiveTabIdChange, onStartPinnedTabsChange } = props;
+  const {
+    onTabsChange,
+    onActiveTabIdChange,
+    onStartPinnedTabsChange,
+    initialTabs = [],
+    initialActiveTabId,
+    initialStartPinnedTabs = [],
+  } = props;
   const handlersMapRef = useRef<{
     tabs?: (tabs: TabModel[]) => void;
     activeTabId?: (id: string | undefined) => void;
@@ -103,9 +113,9 @@ const useTabsState = (apiRef: MutableRefObject<TabsApi>, props: TabsProps) => {
   });
 
   const stateRef = useRef<State>({
-    tabs: [],
-    activeTabId: undefined,
-    startPinnedTabs: [],
+    tabs: initialTabs,
+    activeTabId: initialActiveTabId,
+    startPinnedTabs: initialStartPinnedTabs,
   });
 
   apiRef.current["getState"] = () => {