fix: hide preview container when previews: false

Author: AriPerkkio

packages/astro/src/default/pages/[...slug].astro

@@ -24,7 +24,7 @@ meta.description ??= 'A TutorialKit interactive lesson';
 
 <Layout title={title} meta={meta}>
   <PageLoadingIndicator />
-  <div id="previews-container"></div>
+  <div id="previews-container" style="display: none;"></div>
   <main class="max-w-full flex flex-col h-full overflow-hidden" data-swap-root>
     <TopBarWrapper logoLink={logoLink ?? '/'} openInStackBlitz={lesson.data.openInStackBlitz} />
     <MainContainer lesson={lesson} navList={navList} />

packages/react/src/Panels/PreviewPanel.tsx

@@ -62,7 +62,14 @@ export const PreviewPanel = memo(
     useEffect(() => {
       // we update the iframes position at max fps if we have any
       if (hasPreviews) {
-        return requestAnimationFrameLoop(onResize);
+        const cancel = requestAnimationFrameLoop(onResize);
+
+        previewsContainer.style.display = 'block';
+
+        return () => {
+          previewsContainer.style.display = 'none';
+          cancel();
+        };
       }
 
       return undefined;