From c5d58086573207f1bb0cf25145f8b3a4cb4c96cb Mon Sep 17 00:00:00 2001
From: Felix Habib <33821218+felixhabib@users.noreply.github.com>
Date: Thu, 10 Oct 2024 15:16:38 +1100
Subject: [PATCH] fix: Disable snippet previews while snippet panel is closing
 (#371)

---
 .changeset/four-peaches-attack.md  |  8 ++++++++
 cypress/e2e/snippets.cy.ts         | 22 ++++++++++++++++++++++
 src/Playroom/Snippets/Snippets.tsx | 13 ++++++++++---
 src/Playroom/Toolbar/Toolbar.tsx   |  1 +
 4 files changed, 41 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/four-peaches-attack.md

diff --git a/.changeset/four-peaches-attack.md b/.changeset/four-peaches-attack.md
new file mode 100644
index 00000000..0c7bbaaa
--- /dev/null
+++ b/.changeset/four-peaches-attack.md
@@ -0,0 +1,8 @@
+---
+'playroom': patch
+---
+
+Disable snippet previews while the snippets panel is closing.
+
+Previously, snippet previews could be triggered while the snippet panel was closing, causing preview frames to enter an invalid state.
+Previewing a snippet will now only work when the snippet panel is open.
diff --git a/cypress/e2e/snippets.cy.ts b/cypress/e2e/snippets.cy.ts
index 088e3f55..b600f68f 100644
--- a/cypress/e2e/snippets.cy.ts
+++ b/cypress/e2e/snippets.cy.ts
@@ -114,4 +114,26 @@ describe('Snippets', () => {
         </div>\n
       `);
   });
+
+  it('snippets preview code is disabled while snippet pane is closing', () => {
+    toggleSnippets();
+    toggleSnippets();
+
+    // Mouse over snippet while snippet panel is closing
+    mouseOverSnippet(0);
+
+    assertCodePaneContains(dedent`
+      <div>Initial <span>code</span></div>
+    `);
+
+    assertFirstFrameContains('Initial code');
+
+    typeCode('<div>test');
+
+    assertCodePaneContains(dedent`
+      <div>Initial <span>code<div>test</div></span></div>
+    `);
+
+    assertFirstFrameContains('Initial code\ntest');
+  });
 });
diff --git a/src/Playroom/Snippets/Snippets.tsx b/src/Playroom/Snippets/Snippets.tsx
index ea9cc567..7656585d 100644
--- a/src/Playroom/Snippets/Snippets.tsx
+++ b/src/Playroom/Snippets/Snippets.tsx
@@ -13,6 +13,7 @@ import * as styles from './Snippets.css';
 type HighlightIndex = number | null;
 type ReturnedSnippet = Snippet | null;
 interface Props {
+  isOpen: boolean;
   snippets: PlayroomProps['snippets'];
   onHighlight?: (snippet: ReturnedSnippet) => void;
   onClose?: (snippet: ReturnedSnippet) => void;
@@ -33,7 +34,7 @@ const filterSnippetsForTerm = (snippets: Props['snippets'], term: string) =>
         .map(({ original, score }) => ({ ...original, score }))
     : snippets;
 
-export default ({ snippets, onHighlight, onClose }: Props) => {
+export default ({ isOpen, snippets, onHighlight, onClose }: Props) => {
   const [searchTerm, setSearchTerm] = useState<string>('');
   const [highlightedIndex, setHighlightedIndex] =
     useState<HighlightIndex>(null);
@@ -142,9 +143,15 @@ export default ({ snippets, onHighlight, onClose }: Props) => {
                 [styles.highlight]: isHighlighted,
               })}
               onMouseMove={
-                isHighlighted ? undefined : () => setHighlightedIndex(index)
+                isOpen && !isHighlighted
+                  ? () => {
+                      setHighlightedIndex(index);
+                    }
+                  : undefined
               }
-              onMouseDown={() => closeHandler(filteredSnippets[index])}
+              onMouseDown={() => {
+                closeHandler(filteredSnippets[index]);
+              }}
               title={getLabel(snippet)}
             >
               <Stack space="none">
diff --git a/src/Playroom/Toolbar/Toolbar.tsx b/src/Playroom/Toolbar/Toolbar.tsx
index d887b9ef..389401bc 100644
--- a/src/Playroom/Toolbar/Toolbar.tsx
+++ b/src/Playroom/Toolbar/Toolbar.tsx
@@ -166,6 +166,7 @@ export default ({ themes: allThemes, widths: allWidths, snippets }: Props) => {
           <div className={styles.panel} id="custom-id">
             {lastActivePanel === 'snippets' && (
               <Snippets
+                isOpen={isOpen}
                 snippets={snippets}
                 onHighlight={(snippet) => {
                   dispatch({