From b197ca20f1e83b275de1a7c057ba861cd997fbc8 Mon Sep 17 00:00:00 2001
From: Will Chen <willchen90@gmail.com>
Date: Sat, 12 Apr 2025 21:55:00 -0700
Subject: [PATCH] Clean up sandpack client lifecycle management

---
 .../preview_panel/PreviewIframe.tsx           | 22 ++++++-------------
 1 file changed, 7 insertions(+), 15 deletions(-)

diff --git a/src/components/preview_panel/PreviewIframe.tsx b/src/components/preview_panel/PreviewIframe.tsx
index 3849f5f..87f3afb 100644
--- a/src/components/preview_panel/PreviewIframe.tsx
+++ b/src/components/preview_panel/PreviewIframe.tsx
@@ -435,7 +435,6 @@ const SandpackIframe = ({ reloadKey }: { reloadKey: number }) => {
   const selectedAppId = useAtomValue(selectedAppIdAtom);
   const { app } = useLoadApp(selectedAppId);
   const keyRef = useRef<number | null>(null);
-  const isFirstRender = useRef(true);
   const sandpackClientRef = useRef<SandpackClient | null>(null);
 
   async function loadSandpack() {
@@ -443,9 +442,14 @@ const SandpackIframe = ({ reloadKey }: { reloadKey: number }) => {
     keyRef.current = reloadKey;
 
     if (!selectedAppId) return;
+    if (sandpackClientRef.current) {
+      sandpackClientRef.current.destroy();
+      sandpackClientRef.current = null;
+    }
     const sandboxConfig = await IpcClient.getInstance().getAppSandboxConfig(
       selectedAppId
     );
+
     if (!iframeRef.current || !app) return;
 
     const sandpackConfig: SandboxSetup = mapSandpackConfig(sandboxConfig);
@@ -487,20 +491,8 @@ const SandpackIframe = ({ reloadKey }: { reloadKey: number }) => {
   }, [app]);
 
   useEffect(() => {
-    if (isFirstRender.current) {
-      isFirstRender.current = false;
-      return;
-    }
-
-    if (!iframeRef.current || !app || !selectedAppId) return () => {};
-
-    const clientPromise = loadSandpack();
-    return () => {
-      clientPromise.then((client) => {
-        client?.destroy();
-        sandpackClientRef.current = null;
-      });
-    };
+    if (!iframeRef.current || !app || !selectedAppId) return;
+    loadSandpack();
   }, [reloadKey]);
   const iframeRef = useRef<HTMLIFrameElement>(null);