From 716677d97ea55ebb05d98b3c7c8d316a9770e5e7 Mon Sep 17 00:00:00 2001
From: Felix Habib <fhabib@seek.com.au>
Date: Tue, 7 May 2024 17:12:56 +1000
Subject: [PATCH] Fix close panel animation

---
 src/Playroom/Toolbar/Toolbar.tsx | 56 +++++++++++++++++---------------
 1 file changed, 29 insertions(+), 27 deletions(-)

diff --git a/src/Playroom/Toolbar/Toolbar.tsx b/src/Playroom/Toolbar/Toolbar.tsx
index e65150e2..b6262f97 100644
--- a/src/Playroom/Toolbar/Toolbar.tsx
+++ b/src/Playroom/Toolbar/Toolbar.tsx
@@ -1,4 +1,4 @@
-import { useContext, useState, useCallback } from 'react';
+import { useContext, useState, useCallback, useEffect } from 'react';
 import { useTimeoutFn } from 'react-use';
 import classnames from 'classnames';
 import type { PlayroomProps } from '../Playroom';
@@ -58,6 +58,14 @@ export default ({ themes: allThemes, widths: allWidths, snippets }: Props) => {
   const isSettingsOpen = activeToolbarPanel === 'settings';
   const isPreviewOpen = activeToolbarPanel === 'preview';
 
+  const [lastActivePanel, setLastActivePanel] = useState('snippets');
+
+  useEffect(() => {
+    if (activeToolbarPanel) {
+      setLastActivePanel(activeToolbarPanel);
+    }
+  }, [activeToolbarPanel]);
+
   const hasSnippets = snippets && snippets.length > 0;
   const hasFilteredFrames =
     visibleThemes.length > 0 || visibleWidths.length > 0;
@@ -150,11 +158,8 @@ export default ({ themes: allThemes, widths: allWidths, snippets }: Props) => {
         </div>
 
         <div className={styles.panel}>
-          {isSnippetsOpen && (
-            <div
-              hidden={isSnippetsOpen ? undefined : true}
-              className={styles.preference}
-            >
+          {lastActivePanel === 'snippets' && (
+            <div className={styles.preference}>
               <Snippets
                 snippets={snippets}
                 onHighlight={(snippet) => {
@@ -176,29 +181,26 @@ export default ({ themes: allThemes, widths: allWidths, snippets }: Props) => {
               />
             </div>
           )}
-          <div
-            hidden={isFramesOpen ? undefined : true}
-            className={styles.preference}
-          >
-            <FramesPanel
-              availableWidths={allWidths}
-              availableThemes={allThemes}
-            />
-          </div>
+          {lastActivePanel === 'frames' && (
+            <div className={styles.preference}>
+              <FramesPanel
+                availableWidths={allWidths}
+                availableThemes={allThemes}
+              />
+            </div>
+          )}
 
-          <div
-            hidden={isPreviewOpen ? undefined : true}
-            className={styles.preference}
-          >
-            <PreviewPanel themes={allThemes} visibleThemes={visibleThemes} />
-          </div>
+          {lastActivePanel === 'preview' && (
+            <div className={styles.preference}>
+              <PreviewPanel themes={allThemes} visibleThemes={visibleThemes} />
+            </div>
+          )}
 
-          <div
-            hidden={isSettingsOpen ? undefined : true}
-            className={styles.preference}
-          >
-            <SettingsPanel />
-          </div>
+          {lastActivePanel === 'settings' && (
+            <div className={styles.preference}>
+              <SettingsPanel />
+            </div>
+          )}
         </div>
       </div>
     </div>