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(null); - const isFirstRender = useRef(true); const sandpackClientRef = useRef(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(null);