From d6f236fcd4fcd01398976df778443fe23ad61a9d Mon Sep 17 00:00:00 2001
From: Danilo Woznica <danilowoz@gmail.com>
Date: Fri, 7 Oct 2022 13:18:58 +0100
Subject: [PATCH 01/19] cache babel assets

---
 beta/src/components/MDX/Sandpack/Preview.tsx      | 3 ++-
 beta/src/components/MDX/Sandpack/SandpackRoot.tsx | 4 ++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/beta/src/components/MDX/Sandpack/Preview.tsx b/beta/src/components/MDX/Sandpack/Preview.tsx
index 20c8311ee46..75f3500579b 100644
--- a/beta/src/components/MDX/Sandpack/Preview.tsx
+++ b/beta/src/components/MDX/Sandpack/Preview.tsx
@@ -222,7 +222,8 @@ export function Preview({
           loading={!isReady && iframeComputedHeight === null}
         />
       </div>
-      <SandpackConsole visible={!error} />
+      {/* TODO: temp */}
+      {/* <SandpackConsole visible={!error} /> */}
     </SandpackStack>
   );
 }
diff --git a/beta/src/components/MDX/Sandpack/SandpackRoot.tsx b/beta/src/components/MDX/Sandpack/SandpackRoot.tsx
index 27ea59152d0..8b3b5074c1e 100644
--- a/beta/src/components/MDX/Sandpack/SandpackRoot.tsx
+++ b/beta/src/components/MDX/Sandpack/SandpackRoot.tsx
@@ -87,8 +87,8 @@ function SandpackRoot(props: SandpackProps) {
           autorun,
           initMode: 'user-visible',
           initModeObserverOptions: {rootMargin: '1400px 0px'},
-          bundlerURL: 'https://ac83f2d6.sandpack-bundler.pages.dev',
-          logLevel: SandpackLogLevel.None,
+          bundlerURL: 'https://sandpack-bundler.pages.dev',
+          logLevel: SandpackLogLevel.Debug, // TODO: temp
         }}>
         <CustomPreset
           showDevTools={showDevTools}

From 0b2205ef379a1bbd9ce69e412e8ed7f32db8b4d4 Mon Sep 17 00:00:00 2001
From: Danilo Woznica <danilowoz@gmail.com>
Date: Thu, 13 Oct 2022 21:50:05 +0000
Subject: [PATCH 02/19] Update SandpackRoot.tsx

---
 beta/src/components/MDX/Sandpack/SandpackRoot.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/components/MDX/Sandpack/SandpackRoot.tsx b/beta/src/components/MDX/Sandpack/SandpackRoot.tsx
index 8b3b5074c1e..c20aee1dd72 100644
--- a/beta/src/components/MDX/Sandpack/SandpackRoot.tsx
+++ b/beta/src/components/MDX/Sandpack/SandpackRoot.tsx
@@ -87,7 +87,7 @@ function SandpackRoot(props: SandpackProps) {
           autorun,
           initMode: 'user-visible',
           initModeObserverOptions: {rootMargin: '1400px 0px'},
-          bundlerURL: 'https://sandpack-bundler.pages.dev',
+          bundlerURL: 'https://71008268.sandpack-bundler.pages.dev/?babel=minimal',
           logLevel: SandpackLogLevel.Debug, // TODO: temp
         }}>
         <CustomPreset

From 46d2c22f19ec50b449e8c951b9ab450333ff28cc Mon Sep 17 00:00:00 2001
From: Danilo Woznica <danilowoz@gmail.com>
Date: Thu, 13 Oct 2022 21:54:06 +0000
Subject: [PATCH 03/19] Update NavigationBar.tsx

---
 beta/src/components/MDX/Sandpack/NavigationBar.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/beta/src/components/MDX/Sandpack/NavigationBar.tsx b/beta/src/components/MDX/Sandpack/NavigationBar.tsx
index eedf9fc38cb..d9072d25e5f 100644
--- a/beta/src/components/MDX/Sandpack/NavigationBar.tsx
+++ b/beta/src/components/MDX/Sandpack/NavigationBar.tsx
@@ -94,9 +94,9 @@ export function NavigationBar({providedFiles}: {providedFiles: Array<string>}) {
   }, [isMultiFile]);
 
   const handleReset = () => {
-    if (confirm('Reset all your edits too?')) {
+    // if (confirm('Reset all your edits too?')) {
       sandpack.resetAllFiles();
-    }
+    // }
     refresh();
   };
 

From 0548b038538249495bece65284e6b24f5ede713a Mon Sep 17 00:00:00 2001
From: Danilo Woznica <danilowoz@gmail.com>
Date: Thu, 13 Oct 2022 22:07:27 +0000
Subject: [PATCH 04/19] Update SandpackRoot.tsx

---
 beta/src/components/MDX/Sandpack/SandpackRoot.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/components/MDX/Sandpack/SandpackRoot.tsx b/beta/src/components/MDX/Sandpack/SandpackRoot.tsx
index c20aee1dd72..9b021e2ee07 100644
--- a/beta/src/components/MDX/Sandpack/SandpackRoot.tsx
+++ b/beta/src/components/MDX/Sandpack/SandpackRoot.tsx
@@ -87,7 +87,7 @@ function SandpackRoot(props: SandpackProps) {
           autorun,
           initMode: 'user-visible',
           initModeObserverOptions: {rootMargin: '1400px 0px'},
-          bundlerURL: 'https://71008268.sandpack-bundler.pages.dev/?babel=minimal',
+          bundlerURL: 'https://6e2b0f76.sandpack-bundler.pages.dev/?babel=minimal',
           logLevel: SandpackLogLevel.Debug, // TODO: temp
         }}>
         <CustomPreset

From db4db1bdd3c210a36658456483ba23fdf3379b99 Mon Sep 17 00:00:00 2001
From: Danilo Woznica <danilowoz@gmail.com>
Date: Sat, 15 Oct 2022 19:23:10 +0000
Subject: [PATCH 05/19] Update 7 files

---
 .../Sandpack/{Error.tsx => ErrorMessage.tsx}  |   6 +-
 .../MDX/Sandpack/LoadingOverlay.tsx           | 144 +++++++++++++++
 .../components/MDX/Sandpack/NavigationBar.tsx |  15 +-
 beta/src/components/MDX/Sandpack/Preview.tsx  | 164 +++++++++---------
 .../components/MDX/Sandpack/SandpackRoot.tsx  |   5 +-
 beta/src/content/test.md                      |  34 ++++
 6 files changed, 281 insertions(+), 87 deletions(-)
 rename beta/src/components/MDX/Sandpack/{Error.tsx => ErrorMessage.tsx} (75%)
 create mode 100644 beta/src/components/MDX/Sandpack/LoadingOverlay.tsx
 create mode 100644 beta/src/content/test.md

diff --git a/beta/src/components/MDX/Sandpack/Error.tsx b/beta/src/components/MDX/Sandpack/ErrorMessage.tsx
similarity index 75%
rename from beta/src/components/MDX/Sandpack/Error.tsx
rename to beta/src/components/MDX/Sandpack/ErrorMessage.tsx
index 61344ebac83..d2a3b67c6f0 100644
--- a/beta/src/components/MDX/Sandpack/Error.tsx
+++ b/beta/src/components/MDX/Sandpack/ErrorMessage.tsx
@@ -10,13 +10,13 @@ interface ErrorType {
   path?: string;
 }
 
-export function Error({error}: {error: ErrorType}) {
+export function ErrorMessage({error}: {error: ErrorType}) {
   const {message, title} = error;
 
   return (
-    <div className={'bg-white border-2 border-red-40 rounded-lg p-6'}>
+    <div className="p-6">
       <h2 className="text-red-40 text-xl mb-4">{title || 'Error'}</h2>
-      <pre className="text-secondary whitespace-pre-wrap break-words">
+      <pre className="text-secondary whitespace-pre-wrap break-words leading-tight">
         {message}
       </pre>
     </div>
diff --git a/beta/src/components/MDX/Sandpack/LoadingOverlay.tsx b/beta/src/components/MDX/Sandpack/LoadingOverlay.tsx
new file mode 100644
index 00000000000..cf83495af33
--- /dev/null
+++ b/beta/src/components/MDX/Sandpack/LoadingOverlay.tsx
@@ -0,0 +1,144 @@
+import {useState} from 'react';
+
+import {
+  LoadingOverlayState,
+  OpenInCodeSandboxButton,
+  useSandpack,
+} from '@codesandbox/sandpack-react';
+import {useEffect} from 'react';
+
+const FADE_ANIMATION_DURATION = 200;
+
+export const LoadingOverlay = ({
+  clientId,
+  dependenciesLoading,
+  forceLoading,
+}: {
+  clientId: string;
+  dependenciesLoading: boolean;
+  forceLoading: boolean;
+} & React.HTMLAttributes<HTMLDivElement>): JSX.Element | null => {
+  const loadingOverlayState = useLoadingOverlayState(
+    clientId,
+    dependenciesLoading,
+    forceLoading
+  );
+
+  if (loadingOverlayState === 'HIDDEN') {
+    return null;
+  }
+
+  if (loadingOverlayState === 'TIMEOUT') {
+    return (
+      <div className="sp-overlay sp-error">
+        <div className="sp-error-message">
+          Unable to establish connection with the sandpack bundler. Make sure
+          you are online or try again later. If the problem persists, please
+          report it via{' '}
+          <a
+            className="sp-error-message"
+            href="mailto:hello@codesandbox.io?subject=Sandpack Timeout Error">
+            email
+          </a>{' '}
+          or submit an issue on{' '}
+          <a
+            className="sp-error-message"
+            href="https://github.com/codesandbox/sandpack/issues"
+            rel="noreferrer noopener"
+            target="_blank">
+            GitHub.
+          </a>
+        </div>
+      </div>
+    );
+  }
+
+  const stillLoading =
+    loadingOverlayState === 'LOADING' || loadingOverlayState === 'PRE_FADING';
+
+  return (
+    <div
+      className="sp-overlay sp-loading"
+      style={{
+        opacity: stillLoading ? 1 : 0,
+        transition: `opacity ${FADE_ANIMATION_DURATION}ms ease-out`,
+      }}>
+      <div className="sp-cube-wrapper" title="Open in CodeSandbox">
+        <OpenInCodeSandboxButton />
+        <div className="sp-cube">
+          <div className="sp-sides">
+            <div className="top" />
+            <div className="right" />
+            <div className="bottom" />
+            <div className="left" />
+            <div className="front" />
+            <div className="back" />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const useLoadingOverlayState = (
+  clientId: string,
+  dependenciesLoading: boolean,
+  forceLoading: boolean
+): LoadingOverlayState => {
+  const {sandpack, listen} = useSandpack();
+  const [state, setState] = useState<LoadingOverlayState>('LOADING');
+
+  if (state !== 'LOADING' && forceLoading) {
+    setState('LOADING');
+  }
+
+  /**
+   * Sandpack listener
+   */
+  useEffect(() => {
+    sandpack.loadingScreenRegisteredRef.current = true;
+
+    const unsubscribe = listen((message) => {
+      if (message.type === 'done') {
+        setState((prev) => {
+          return prev === 'LOADING' ? 'PRE_FADING' : 'HIDDEN';
+        });
+      }
+    }, clientId);
+
+    return (): void => {
+      unsubscribe();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [clientId, sandpack.status === 'idle']);
+
+  /**
+   * Fading transient state
+   */
+  useEffect(() => {
+    let fadeTimeout: NodeJS.Timer;
+
+    if (state === 'PRE_FADING' && !dependenciesLoading) {
+      setState('FADING');
+    } else if (state === 'FADING') {
+      fadeTimeout = setTimeout(
+        () => setState('HIDDEN'),
+        FADE_ANIMATION_DURATION
+      );
+    }
+
+    return (): void => {
+      clearTimeout(fadeTimeout);
+    };
+  }, [state, dependenciesLoading]);
+
+  if (sandpack.status === 'timeout') {
+    return 'TIMEOUT';
+  }
+
+  if (sandpack.status !== 'running') {
+    return 'HIDDEN';
+  }
+
+  return state;
+};
diff --git a/beta/src/components/MDX/Sandpack/NavigationBar.tsx b/beta/src/components/MDX/Sandpack/NavigationBar.tsx
index d9072d25e5f..2e20c91875c 100644
--- a/beta/src/components/MDX/Sandpack/NavigationBar.tsx
+++ b/beta/src/components/MDX/Sandpack/NavigationBar.tsx
@@ -94,9 +94,20 @@ export function NavigationBar({providedFiles}: {providedFiles: Array<string>}) {
   }, [isMultiFile]);
 
   const handleReset = () => {
-    // if (confirm('Reset all your edits too?')) {
+    /**
+     * resetAllFiles must come first, otherwise
+     * the previous content will appears for a second
+     * when the iframe loads.
+     *
+     * Plus, it should only prompts if there's any file changes
+     */
+    if (
+      sandpack.editorState === 'dirty' &&
+      confirm('Reset all your edits too?')
+    ) {
       sandpack.resetAllFiles();
-    // }
+    }
+
     refresh();
   };
 
diff --git a/beta/src/components/MDX/Sandpack/Preview.tsx b/beta/src/components/MDX/Sandpack/Preview.tsx
index 75f3500579b..c0dcd7217f5 100644
--- a/beta/src/components/MDX/Sandpack/Preview.tsx
+++ b/beta/src/components/MDX/Sandpack/Preview.tsx
@@ -3,26 +3,17 @@
  */
 
 /* eslint-disable react-hooks/exhaustive-deps */
-import {useRef, useState, useEffect, useMemo} from 'react';
-import {
-  useSandpack,
-  LoadingOverlay,
-  SandpackStack,
-} from '@codesandbox/sandpack-react';
+import {useRef, useState, useEffect, useMemo, useId} from 'react';
+import {useSandpack, SandpackStack} from '@codesandbox/sandpack-react';
 import cn from 'classnames';
-import {Error} from './Error';
+import {ErrorMessage} from './ErrorMessage';
 import {SandpackConsole} from './Console';
 import type {LintDiagnostic} from './useSandpackLint';
-
-/**
- * TODO: can we use React.useId?
- */
-const generateRandomId = (): string =>
-  Math.floor(Math.random() * 10000).toString();
+import {CSSProperties} from 'react';
+import {LoadingOverlay} from './LoadingOverlay';
 
 type CustomPreviewProps = {
   className?: string;
-  customStyle?: Record<string, unknown>;
   isExpanded: boolean;
   lintErrors: LintDiagnostic;
 };
@@ -40,13 +31,13 @@ function useDebounced(value: any): any {
 }
 
 export function Preview({
-  customStyle,
   isExpanded,
   className,
   lintErrors,
 }: CustomPreviewProps) {
   const {sandpack, listen} = useSandpack();
-  const [isReady, setIsReady] = useState(false);
+  const [bundlerIsReady, setBundlerIsReady] = useState(false);
+  const [showLoading, setShowLoading] = useState(false);
   const [iframeComputedHeight, setComputedAutoHeight] = useState<number | null>(
     null
   );
@@ -95,7 +86,7 @@ export function Preview({
   // It changes too fast, causing flicker.
   const error = useDebounced(rawError);
 
-  const clientId = useRef<string>(generateRandomId());
+  const clientId = useId();
   const iframeRef = useRef<HTMLIFrameElement | null>(null);
 
   // SandpackPreview immediately registers the custom screens/components so the bundler does not render any of them
@@ -106,29 +97,43 @@ export function Preview({
 
   useEffect(function createBundler() {
     const iframeElement = iframeRef.current!;
-    registerBundler(iframeElement, clientId.current);
+    registerBundler(iframeElement, clientId);
 
     return () => {
-      unregisterBundler(clientId.current);
+      unregisterBundler(clientId);
     };
   }, []);
 
   useEffect(
     function bundlerListener() {
+      let timeout: ReturnType<typeof setTimeout>;
+
       const unsubscribe = listen((message: any) => {
         if (message.type === 'resize') {
           setComputedAutoHeight(message.height);
         } else if (message.type === 'start') {
+          /**
+           * The spinner component transition might be longer than
+           * the bundler loading, so we only show the spinner if
+           * it takes more than 1s to load the bundler.
+           */
+          timeout = setTimeout(() => {
+            setShowLoading(true);
+          }, 1000);
+
           if (message.firstLoad) {
-            setIsReady(false);
+            setBundlerIsReady(false);
           }
         } else if (message.type === 'done') {
-          setIsReady(true);
+          setBundlerIsReady(true);
+          setShowLoading(false);
+          clearTimeout(timeout);
         }
-      }, clientId.current);
+      }, clientId);
 
       return () => {
-        setIsReady(false);
+        clearTimeout(timeout);
+        setBundlerIsReady(false);
         setComputedAutoHeight(null);
         unsubscribe();
       };
@@ -136,13 +141,7 @@ export function Preview({
     [status === 'idle']
   );
 
-  const overrideStyle = error
-    ? {
-        // Don't collapse errors
-        maxHeight: undefined,
-      }
-    : null;
-  const hideContent = !isReady || error;
+  // const hideContent = !bundlerIsReady || error;
 
   // WARNING:
   // The layout and styling here is convoluted and really easy to break.
@@ -159,67 +158,72 @@ export function Preview({
   // - It should work on mobile.
   // The best way to test it is to actually go through some challenges.
 
+  const iframeWrapperPosition = (): CSSProperties => {
+    if (!bundlerIsReady || error) {
+      return {position: 'relative'};
+    }
+
+    if (isExpanded) {
+      return {position: 'sticky', top: '2em'};
+    }
+
+    return {};
+  };
+
   return (
-    <SandpackStack
-      className={className}
-      style={{
-        // TODO: clean up this mess.
-        ...customStyle,
-        ...overrideStyle,
-      }}>
+    <SandpackStack className={className}>
       <div
         className={cn(
           'p-0 sm:p-2 md:p-4 lg:p-8 bg-card dark:bg-wash-dark h-full relative md:rounded-b-lg lg:rounded-b-none',
           // Allow content to be scrolled if it's too high to fit.
           // Note we don't want this in the expanded state
           // because it breaks position: sticky (and isn't needed anyway).
-          !isExpanded && (error || isReady) ? 'overflow-auto' : null
+          !isExpanded && (error || bundlerIsReady) ? 'overflow-auto' : null
         )}>
         <div
-          style={{
-            padding: 'initial',
-            position: hideContent
-              ? 'relative'
-              : isExpanded
-              ? 'sticky'
-              : undefined,
-            top: isExpanded ? '2rem' : undefined,
-          }}>
-          <iframe
-            ref={iframeRef}
-            className={cn(
-              'rounded-t-none bg-white md:shadow-md sm:rounded-lg w-full max-w-full',
-              // We can't *actually* hide content because that would
-              // break calculating the computed height in the iframe
-              // (which we're using for autosizing). This is noticeable
-              // if you make a compiler error and then fix it with code
-              // that expands the content. You want to measure that.
-              hideContent
-                ? 'absolute opacity-0 pointer-events-none'
-                : 'opacity-100'
-            )}
-            title="Sandbox Preview"
-            style={{
-              height: iframeComputedHeight || '100%',
-              zIndex: isExpanded ? 'initial' : -1,
-            }}
-          />
-        </div>
-        {error && (
-          <div
-            className={cn(
-              'p-2',
-              // This isn't absolutely positioned so that
-              // the errors can also expand the parent height.
-              isExpanded ? 'sticky top-8' : null
-            )}>
-            <Error error={error} />
+          className={cn(
+            'rounded-t-none sm:rounded-lg bg-white md:shadow-md w-full max-w-full',
+            error && 'border-2 border-red-40'
+          )}>
+          <div style={iframeWrapperPosition()}>
+            <iframe
+              ref={iframeRef}
+              className={cn(
+                'w-full max-w-full rounded-t-none sm:rounded-lg transition-opacity duration-150',
+                // We can't *actually* hide content because that would
+                // break calculating the computed height in the iframe
+                // (which we're using for autosizing). This is noticeable
+                // if you make a compiler error and then fix it with code
+                // that expands the content. You want to measure that.
+                error && 'absolute',
+
+                // Transition between start/refresh and done state
+                bundlerIsReady ? 'opacity-100' : 'opacity-0 pointer-events-none'
+              )}
+              title="Sandbox Preview"
+              style={{
+                height: iframeComputedHeight || '100%',
+                zIndex: isExpanded ? 'initial' : -1,
+              }}
+            />
           </div>
-        )}
+
+          {error && (
+            <div
+              className={cn(
+                // This isn't absolutely positioned so that
+                // the errors can also expand the parent height.
+                isExpanded ? 'sticky top-8' : null
+              )}>
+              <ErrorMessage error={error} />
+            </div>
+          )}
+        </div>
+
         <LoadingOverlay
-          showOpenInCodeSandbox
-          clientId={clientId.current}
-          loading={!isReady && iframeComputedHeight === null}
+          clientId={clientId}
+          dependenciesLoading={!bundlerIsReady && iframeComputedHeight === null}
+          forceLoading={showLoading}
         />
       </div>
       {/* TODO: temp */}
diff --git a/beta/src/components/MDX/Sandpack/SandpackRoot.tsx b/beta/src/components/MDX/Sandpack/SandpackRoot.tsx
index 9b021e2ee07..0abab3b840a 100644
--- a/beta/src/components/MDX/Sandpack/SandpackRoot.tsx
+++ b/beta/src/components/MDX/Sandpack/SandpackRoot.tsx
@@ -87,8 +87,9 @@ function SandpackRoot(props: SandpackProps) {
           autorun,
           initMode: 'user-visible',
           initModeObserverOptions: {rootMargin: '1400px 0px'},
-          bundlerURL: 'https://6e2b0f76.sandpack-bundler.pages.dev/?babel=minimal',
-          logLevel: SandpackLogLevel.Debug, // TODO: temp
+          bundlerURL:
+            'https://6e2b0f76.sandpack-bundler.pages.dev/?babel=minimal',
+          logLevel: SandpackLogLevel.None, // TODO: temp
         }}>
         <CustomPreset
           showDevTools={showDevTools}
diff --git a/beta/src/content/test.md b/beta/src/content/test.md
new file mode 100644
index 00000000000..2d9f0e9470d
--- /dev/null
+++ b/beta/src/content/test.md
@@ -0,0 +1,34 @@
+---
+title: Quick Start
+---
+
+<Intro>
+
+Welcome to the React documentation! This page will give you an introduction to the 80% of React concepts that you will use on a daily basis.
+
+</Intro>
+
+
+
+<Sandpack>
+
+```js
+function MyButton() {
+  return (
+    <button>
+      I'm a button
+    </button>
+  );
+}
+
+export default function MyApp() {
+  return (
+    <div>
+      <h1>Welcome to my app</h1>
+      <MyButton />
+    </div>
+  );
+}
+```
+
+</Sandpack>
\ No newline at end of file

From ba32742a1d422b6229fd9441f5135720e541e4bc Mon Sep 17 00:00:00 2001
From: Danilo Woznica <danilowoz@gmail.com>
Date: Sat, 15 Oct 2022 19:45:41 +0000
Subject: [PATCH 06/19] Update 6 files

---
 beta/package.json                             |  3 ++-
 .../components/MDX/Sandpack/CustomPreset.tsx  | 11 +++++++++-
 .../components/MDX/Sandpack/NavigationBar.tsx | 14 +++++++++---
 beta/src/components/MDX/Sandpack/Preview.tsx  | 22 ++++++++++++++-----
 .../components/MDX/Sandpack/SandpackRoot.tsx  |  2 +-
 beta/yarn.lock                                |  5 +++++
 6 files changed, 46 insertions(+), 11 deletions(-)

diff --git a/beta/package.json b/beta/package.json
index 995ad67bb89..a2f32342a7f 100644
--- a/beta/package.json
+++ b/beta/package.json
@@ -39,7 +39,8 @@
     "react-collapsed": "npm:@gaearon/react-collapsed@3.1.0-forked.1",
     "react-dom": "0.0.0-experimental-cb5084d1c-20220924",
     "remark-frontmatter": "^4.0.1",
-    "remark-gfm": "^3.0.1"
+    "remark-gfm": "^3.0.1",
+    "use-timer": "^2.0.1"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9",
diff --git a/beta/src/components/MDX/Sandpack/CustomPreset.tsx b/beta/src/components/MDX/Sandpack/CustomPreset.tsx
index 7ef53657979..fa207730f13 100644
--- a/beta/src/components/MDX/Sandpack/CustomPreset.tsx
+++ b/beta/src/components/MDX/Sandpack/CustomPreset.tsx
@@ -11,6 +11,7 @@ import {
   SandpackLayout,
 } from '@codesandbox/sandpack-react';
 import cn from 'classnames';
+import {useTimer} from 'use-timer';
 
 import {IconChevron} from 'components/Icon/IconChevron';
 import {NavigationBar} from './NavigationBar';
@@ -69,6 +70,7 @@ const SandboxShell = memo(function SandboxShell({
   lintExtensions: Array<any>;
   isExpandable: boolean;
 }) {
+  const {start, pause, time, reset} = useTimer({interval: 0});
   const containerRef = useRef<HTMLDivElement>(null);
   const [isExpanded, setIsExpanded] = useState(false);
   return (
@@ -76,7 +78,11 @@ const SandboxShell = memo(function SandboxShell({
       <div
         className="shadow-lg dark:shadow-lg-dark rounded-lg"
         ref={containerRef}>
-        <NavigationBar providedFiles={providedFiles} />
+        <NavigationBar
+          reset={reset}
+          start={start}
+          providedFiles={providedFiles}
+        />
         <SandpackLayout
           className={cn(
             showDevTools && devToolsLoaded && 'sp-layout-devtools',
@@ -85,6 +91,9 @@ const SandboxShell = memo(function SandboxShell({
           )}>
           <Editor lintExtensions={lintExtensions} />
           <Preview
+            start={start}
+            pause={pause}
+            time={time}
             className="order-last xl:order-2"
             isExpanded={isExpanded}
             lintErrors={lintErrors}
diff --git a/beta/src/components/MDX/Sandpack/NavigationBar.tsx b/beta/src/components/MDX/Sandpack/NavigationBar.tsx
index 2e20c91875c..4d794354676 100644
--- a/beta/src/components/MDX/Sandpack/NavigationBar.tsx
+++ b/beta/src/components/MDX/Sandpack/NavigationBar.tsx
@@ -22,7 +22,6 @@ import {DownloadButton} from './DownloadButton';
 import {IconChevron} from '../../Icon/IconChevron';
 import {Listbox} from '@headlessui/react';
 
-// TODO: Replace with real useEvent.
 export function useEvent(fn: any): any {
   const ref = useRef(null);
   useInsertionEffect(() => {
@@ -40,7 +39,15 @@ const getFileName = (filePath: string): string => {
   return filePath.slice(lastIndexOfSlash + 1);
 };
 
-export function NavigationBar({providedFiles}: {providedFiles: Array<string>}) {
+export function NavigationBar({
+  providedFiles,
+  reset,
+  start,
+}: {
+  providedFiles: Array<string>;
+  reset: any;
+  start: any;
+}) {
   const {sandpack} = useSandpack();
   const containerRef = useRef<HTMLDivElement | null>(null);
   const tabsRef = useRef<HTMLDivElement | null>(null);
@@ -107,7 +114,8 @@ export function NavigationBar({providedFiles}: {providedFiles: Array<string>}) {
     ) {
       sandpack.resetAllFiles();
     }
-
+    reset();
+    start();
     refresh();
   };
 
diff --git a/beta/src/components/MDX/Sandpack/Preview.tsx b/beta/src/components/MDX/Sandpack/Preview.tsx
index c0dcd7217f5..079e62bbda4 100644
--- a/beta/src/components/MDX/Sandpack/Preview.tsx
+++ b/beta/src/components/MDX/Sandpack/Preview.tsx
@@ -16,6 +16,10 @@ type CustomPreviewProps = {
   className?: string;
   isExpanded: boolean;
   lintErrors: LintDiagnostic;
+
+  start: any;
+  pause: any;
+  time: number;
 };
 
 function useDebounced(value: any): any {
@@ -34,6 +38,9 @@ export function Preview({
   isExpanded,
   className,
   lintErrors,
+  start,
+  pause,
+  time,
 }: CustomPreviewProps) {
   const {sandpack, listen} = useSandpack();
   const [bundlerIsReady, setBundlerIsReady] = useState(false);
@@ -108,7 +115,7 @@ export function Preview({
     function bundlerListener() {
       let timeout: ReturnType<typeof setTimeout>;
 
-      const unsubscribe = listen((message: any) => {
+      const unsubscribe = listen((message) => {
         if (message.type === 'resize') {
           setComputedAutoHeight(message.height);
         } else if (message.type === 'start') {
@@ -122,12 +129,15 @@ export function Preview({
           }, 1000);
 
           if (message.firstLoad) {
+            start();
             setBundlerIsReady(false);
           }
         } else if (message.type === 'done') {
           setBundlerIsReady(true);
           setShowLoading(false);
           clearTimeout(timeout);
+
+          pause();
         }
       }, clientId);
 
@@ -172,6 +182,7 @@ export function Preview({
 
   return (
     <SandpackStack className={className}>
+      <h1>{time}</h1>
       <div
         className={cn(
           'p-0 sm:p-2 md:p-4 lg:p-8 bg-card dark:bg-wash-dark h-full relative md:rounded-b-lg lg:rounded-b-none',
@@ -189,7 +200,7 @@ export function Preview({
             <iframe
               ref={iframeRef}
               className={cn(
-                'w-full max-w-full rounded-t-none sm:rounded-lg transition-opacity duration-150',
+                'w-full max-w-full rounded-t-none sm:rounded-lg transition-opacity',
                 // We can't *actually* hide content because that would
                 // break calculating the computed height in the iframe
                 // (which we're using for autosizing). This is noticeable
@@ -198,7 +209,9 @@ export function Preview({
                 error && 'absolute',
 
                 // Transition between start/refresh and done state
-                bundlerIsReady ? 'opacity-100' : 'opacity-0 pointer-events-none'
+                bundlerIsReady
+                  ? 'opacity-100 duration-150'
+                  : 'opacity-0 pointer-events-none duration-75'
               )}
               title="Sandbox Preview"
               style={{
@@ -226,8 +239,7 @@ export function Preview({
           forceLoading={showLoading}
         />
       </div>
-      {/* TODO: temp */}
-      {/* <SandpackConsole visible={!error} /> */}
+      <SandpackConsole visible={!error} />
     </SandpackStack>
   );
 }
diff --git a/beta/src/components/MDX/Sandpack/SandpackRoot.tsx b/beta/src/components/MDX/Sandpack/SandpackRoot.tsx
index 0abab3b840a..61be960e4ee 100644
--- a/beta/src/components/MDX/Sandpack/SandpackRoot.tsx
+++ b/beta/src/components/MDX/Sandpack/SandpackRoot.tsx
@@ -89,7 +89,7 @@ function SandpackRoot(props: SandpackProps) {
           initModeObserverOptions: {rootMargin: '1400px 0px'},
           bundlerURL:
             'https://6e2b0f76.sandpack-bundler.pages.dev/?babel=minimal',
-          logLevel: SandpackLogLevel.None, // TODO: temp
+          logLevel: SandpackLogLevel.None,
         }}>
         <CustomPreset
           showDevTools={showDevTools}
diff --git a/beta/yarn.lock b/beta/yarn.lock
index 7ad6a5c74d9..dcdc144566c 100644
--- a/beta/yarn.lock
+++ b/beta/yarn.lock
@@ -6499,6 +6499,11 @@ use-sync-external-store@1.2.0:
   resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
   integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
 
+use-timer@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/use-timer/-/use-timer-2.0.1.tgz#eef400a83e3fa4af9896fdd6d07d34f676e9373c"
+  integrity sha512-ESFkDYZluJZ+G/CaoOBFxg0TjuG7kgNFNhIFZhqv14ho2WIZwuxkRnEURhyLm9I4vNz+ea9ZowNaOkExDAM+6Q==
+
 util-deprecate@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"

From b5f28a773d203a65715950e2f1a1f17388a40733 Mon Sep 17 00:00:00 2001
From: Danilo Woznica <danilowoz@gmail.com>
Date: Sat, 15 Oct 2022 20:35:57 +0000
Subject: [PATCH 07/19] Update 6 files

---
 beta/package.json                             |  3 +-
 .../components/MDX/Sandpack/CustomPreset.tsx  | 11 +-----
 .../components/MDX/Sandpack/NavigationBar.tsx | 13 ++-----
 beta/src/components/MDX/Sandpack/Preview.tsx  | 11 ------
 beta/src/content/test.md                      | 34 -------------------
 beta/yarn.lock                                |  5 ---
 6 files changed, 4 insertions(+), 73 deletions(-)
 delete mode 100644 beta/src/content/test.md

diff --git a/beta/package.json b/beta/package.json
index a2f32342a7f..995ad67bb89 100644
--- a/beta/package.json
+++ b/beta/package.json
@@ -39,8 +39,7 @@
     "react-collapsed": "npm:@gaearon/react-collapsed@3.1.0-forked.1",
     "react-dom": "0.0.0-experimental-cb5084d1c-20220924",
     "remark-frontmatter": "^4.0.1",
-    "remark-gfm": "^3.0.1",
-    "use-timer": "^2.0.1"
+    "remark-gfm": "^3.0.1"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9",
diff --git a/beta/src/components/MDX/Sandpack/CustomPreset.tsx b/beta/src/components/MDX/Sandpack/CustomPreset.tsx
index fa207730f13..7ef53657979 100644
--- a/beta/src/components/MDX/Sandpack/CustomPreset.tsx
+++ b/beta/src/components/MDX/Sandpack/CustomPreset.tsx
@@ -11,7 +11,6 @@ import {
   SandpackLayout,
 } from '@codesandbox/sandpack-react';
 import cn from 'classnames';
-import {useTimer} from 'use-timer';
 
 import {IconChevron} from 'components/Icon/IconChevron';
 import {NavigationBar} from './NavigationBar';
@@ -70,7 +69,6 @@ const SandboxShell = memo(function SandboxShell({
   lintExtensions: Array<any>;
   isExpandable: boolean;
 }) {
-  const {start, pause, time, reset} = useTimer({interval: 0});
   const containerRef = useRef<HTMLDivElement>(null);
   const [isExpanded, setIsExpanded] = useState(false);
   return (
@@ -78,11 +76,7 @@ const SandboxShell = memo(function SandboxShell({
       <div
         className="shadow-lg dark:shadow-lg-dark rounded-lg"
         ref={containerRef}>
-        <NavigationBar
-          reset={reset}
-          start={start}
-          providedFiles={providedFiles}
-        />
+        <NavigationBar providedFiles={providedFiles} />
         <SandpackLayout
           className={cn(
             showDevTools && devToolsLoaded && 'sp-layout-devtools',
@@ -91,9 +85,6 @@ const SandboxShell = memo(function SandboxShell({
           )}>
           <Editor lintExtensions={lintExtensions} />
           <Preview
-            start={start}
-            pause={pause}
-            time={time}
             className="order-last xl:order-2"
             isExpanded={isExpanded}
             lintErrors={lintErrors}
diff --git a/beta/src/components/MDX/Sandpack/NavigationBar.tsx b/beta/src/components/MDX/Sandpack/NavigationBar.tsx
index 4d794354676..8c884a5d8a7 100644
--- a/beta/src/components/MDX/Sandpack/NavigationBar.tsx
+++ b/beta/src/components/MDX/Sandpack/NavigationBar.tsx
@@ -39,15 +39,7 @@ const getFileName = (filePath: string): string => {
   return filePath.slice(lastIndexOfSlash + 1);
 };
 
-export function NavigationBar({
-  providedFiles,
-  reset,
-  start,
-}: {
-  providedFiles: Array<string>;
-  reset: any;
-  start: any;
-}) {
+export function NavigationBar({providedFiles}: {providedFiles: Array<string>}) {
   const {sandpack} = useSandpack();
   const containerRef = useRef<HTMLDivElement | null>(null);
   const tabsRef = useRef<HTMLDivElement | null>(null);
@@ -114,8 +106,7 @@ export function NavigationBar({
     ) {
       sandpack.resetAllFiles();
     }
-    reset();
-    start();
+
     refresh();
   };
 
diff --git a/beta/src/components/MDX/Sandpack/Preview.tsx b/beta/src/components/MDX/Sandpack/Preview.tsx
index 079e62bbda4..cf6182826a6 100644
--- a/beta/src/components/MDX/Sandpack/Preview.tsx
+++ b/beta/src/components/MDX/Sandpack/Preview.tsx
@@ -16,10 +16,6 @@ type CustomPreviewProps = {
   className?: string;
   isExpanded: boolean;
   lintErrors: LintDiagnostic;
-
-  start: any;
-  pause: any;
-  time: number;
 };
 
 function useDebounced(value: any): any {
@@ -38,9 +34,6 @@ export function Preview({
   isExpanded,
   className,
   lintErrors,
-  start,
-  pause,
-  time,
 }: CustomPreviewProps) {
   const {sandpack, listen} = useSandpack();
   const [bundlerIsReady, setBundlerIsReady] = useState(false);
@@ -129,15 +122,12 @@ export function Preview({
           }, 1000);
 
           if (message.firstLoad) {
-            start();
             setBundlerIsReady(false);
           }
         } else if (message.type === 'done') {
           setBundlerIsReady(true);
           setShowLoading(false);
           clearTimeout(timeout);
-
-          pause();
         }
       }, clientId);
 
@@ -182,7 +172,6 @@ export function Preview({
 
   return (
     <SandpackStack className={className}>
-      <h1>{time}</h1>
       <div
         className={cn(
           'p-0 sm:p-2 md:p-4 lg:p-8 bg-card dark:bg-wash-dark h-full relative md:rounded-b-lg lg:rounded-b-none',
diff --git a/beta/src/content/test.md b/beta/src/content/test.md
deleted file mode 100644
index 2d9f0e9470d..00000000000
--- a/beta/src/content/test.md
+++ /dev/null
@@ -1,34 +0,0 @@
----
-title: Quick Start
----
-
-<Intro>
-
-Welcome to the React documentation! This page will give you an introduction to the 80% of React concepts that you will use on a daily basis.
-
-</Intro>
-
-
-
-<Sandpack>
-
-```js
-function MyButton() {
-  return (
-    <button>
-      I'm a button
-    </button>
-  );
-}
-
-export default function MyApp() {
-  return (
-    <div>
-      <h1>Welcome to my app</h1>
-      <MyButton />
-    </div>
-  );
-}
-```
-
-</Sandpack>
\ No newline at end of file
diff --git a/beta/yarn.lock b/beta/yarn.lock
index dcdc144566c..7ad6a5c74d9 100644
--- a/beta/yarn.lock
+++ b/beta/yarn.lock
@@ -6499,11 +6499,6 @@ use-sync-external-store@1.2.0:
   resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
   integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
 
-use-timer@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/use-timer/-/use-timer-2.0.1.tgz#eef400a83e3fa4af9896fdd6d07d34f676e9373c"
-  integrity sha512-ESFkDYZluJZ+G/CaoOBFxg0TjuG7kgNFNhIFZhqv14ho2WIZwuxkRnEURhyLm9I4vNz+ea9ZowNaOkExDAM+6Q==
-
 util-deprecate@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"

From bcad25b19ce5ba9b9b304d2945c435760e11ee2f Mon Sep 17 00:00:00 2001
From: Danilo Woznica <danilowoz@gmail.com>
Date: Sat, 15 Oct 2022 20:37:00 +0000
Subject: [PATCH 08/19] Update LoadingOverlay.tsx

---
 beta/src/components/MDX/Sandpack/LoadingOverlay.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/beta/src/components/MDX/Sandpack/LoadingOverlay.tsx b/beta/src/components/MDX/Sandpack/LoadingOverlay.tsx
index cf83495af33..a471e5bc3f0 100644
--- a/beta/src/components/MDX/Sandpack/LoadingOverlay.tsx
+++ b/beta/src/components/MDX/Sandpack/LoadingOverlay.tsx
@@ -109,7 +109,6 @@ const useLoadingOverlayState = (
     return (): void => {
       unsubscribe();
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [clientId, sandpack.status === 'idle']);
 
   /**

From 5020a4dc17aa37379d21817ed4a2d7ffab89bdab Mon Sep 17 00:00:00 2001
From: Danilo Woznica <danilowoz@gmail.com>
Date: Sat, 15 Oct 2022 21:30:41 +0000
Subject: [PATCH 09/19] Update Preview.tsx

---
 beta/src/components/MDX/Sandpack/Preview.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/beta/src/components/MDX/Sandpack/Preview.tsx b/beta/src/components/MDX/Sandpack/Preview.tsx
index cf6182826a6..229c722fd59 100644
--- a/beta/src/components/MDX/Sandpack/Preview.tsx
+++ b/beta/src/components/MDX/Sandpack/Preview.tsx
@@ -141,8 +141,6 @@ export function Preview({
     [status === 'idle']
   );
 
-  // const hideContent = !bundlerIsReady || error;
-
   // WARNING:
   // The layout and styling here is convoluted and really easy to break.
   // If you make changes to it, you need to test different cases:

From 8dea21f0eb1f5274802423f6cc33bcc78f8afded Mon Sep 17 00:00:00 2001
From: Danilo Woznica <danilowoz@gmail.com>
Date: Sun, 16 Oct 2022 12:16:01 +0000
Subject: [PATCH 10/19] Update LoadingOverlay.tsx

---
 beta/src/components/MDX/Sandpack/LoadingOverlay.tsx | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/beta/src/components/MDX/Sandpack/LoadingOverlay.tsx b/beta/src/components/MDX/Sandpack/LoadingOverlay.tsx
index a471e5bc3f0..205eb08280b 100644
--- a/beta/src/components/MDX/Sandpack/LoadingOverlay.tsx
+++ b/beta/src/components/MDX/Sandpack/LoadingOverlay.tsx
@@ -95,9 +95,8 @@ const useLoadingOverlayState = (
   /**
    * Sandpack listener
    */
+  const sandpackIdle = sandpack.status === 'idle';
   useEffect(() => {
-    sandpack.loadingScreenRegisteredRef.current = true;
-
     const unsubscribe = listen((message) => {
       if (message.type === 'done') {
         setState((prev) => {
@@ -106,10 +105,10 @@ const useLoadingOverlayState = (
       }
     }, clientId);
 
-    return (): void => {
+    return () => {
       unsubscribe();
     };
-  }, [clientId, sandpack.status === 'idle']);
+  }, [listen, clientId, sandpackIdle]);
 
   /**
    * Fading transient state
@@ -126,7 +125,7 @@ const useLoadingOverlayState = (
       );
     }
 
-    return (): void => {
+    return () => {
       clearTimeout(fadeTimeout);
     };
   }, [state, dependenciesLoading]);

From 878c21067ad4e9be2ff37755593140295c8d7e35 Mon Sep 17 00:00:00 2001
From: Danilo Woznica <danilowoz@gmail.com>
Date: Sun, 16 Oct 2022 14:23:55 +0000
Subject: [PATCH 11/19] Update 4 files

---
 .../components/MDX/Sandpack/ErrorMessage.tsx  |  2 +-
 beta/src/components/MDX/Sandpack/Preview.tsx  | 62 ++++++++-----------
 2 files changed, 27 insertions(+), 37 deletions(-)

diff --git a/beta/src/components/MDX/Sandpack/ErrorMessage.tsx b/beta/src/components/MDX/Sandpack/ErrorMessage.tsx
index d2a3b67c6f0..8af4158fe49 100644
--- a/beta/src/components/MDX/Sandpack/ErrorMessage.tsx
+++ b/beta/src/components/MDX/Sandpack/ErrorMessage.tsx
@@ -14,7 +14,7 @@ export function ErrorMessage({error}: {error: ErrorType}) {
   const {message, title} = error;
 
   return (
-    <div className="p-6">
+    <div className="p-6 bg-white rounded-t-none sm:rounded-lg ">
       <h2 className="text-red-40 text-xl mb-4">{title || 'Error'}</h2>
       <pre className="text-secondary whitespace-pre-wrap break-words leading-tight">
         {message}
diff --git a/beta/src/components/MDX/Sandpack/Preview.tsx b/beta/src/components/MDX/Sandpack/Preview.tsx
index 229c722fd59..dd996e3373e 100644
--- a/beta/src/components/MDX/Sandpack/Preview.tsx
+++ b/beta/src/components/MDX/Sandpack/Preview.tsx
@@ -157,7 +157,7 @@ export function Preview({
   // The best way to test it is to actually go through some challenges.
 
   const iframeWrapperPosition = (): CSSProperties => {
-    if (!bundlerIsReady || error) {
+    if (!bundlerIsReady) {
       return {position: 'relative'};
     }
 
@@ -182,42 +182,32 @@ export function Preview({
           className={cn(
             'rounded-t-none sm:rounded-lg bg-white md:shadow-md w-full max-w-full',
             error && 'border-2 border-red-40'
-          )}>
-          <div style={iframeWrapperPosition()}>
-            <iframe
-              ref={iframeRef}
-              className={cn(
-                'w-full max-w-full rounded-t-none sm:rounded-lg transition-opacity',
-                // We can't *actually* hide content because that would
-                // break calculating the computed height in the iframe
-                // (which we're using for autosizing). This is noticeable
-                // if you make a compiler error and then fix it with code
-                // that expands the content. You want to measure that.
-                error && 'absolute',
-
-                // Transition between start/refresh and done state
-                bundlerIsReady
-                  ? 'opacity-100 duration-150'
-                  : 'opacity-0 pointer-events-none duration-75'
-              )}
-              title="Sandbox Preview"
-              style={{
-                height: iframeComputedHeight || '100%',
-                zIndex: isExpanded ? 'initial' : -1,
-              }}
-            />
-          </div>
-
-          {error && (
-            <div
-              className={cn(
-                // This isn't absolutely positioned so that
-                // the errors can also expand the parent height.
-                isExpanded ? 'sticky top-8' : null
-              )}>
-              <ErrorMessage error={error} />
-            </div>
           )}
+          style={iframeWrapperPosition()}>
+          <iframe
+            ref={iframeRef}
+            className={cn(
+              'w-full max-w-full rounded-t-none sm:rounded-lg transition-opacity',
+              // We can't *actually* hide content because that would
+              // break calculating the computed height in the iframe
+              // (which we're using for autosizing). This is noticeable
+              // if you make a compiler error and then fix it with code
+              // that expands the content. You want to measure that.
+              error && 'absolute',
+
+              // Transition between start/refresh and done state
+              !bundlerIsReady || error
+                ? 'opacity-0 pointer-events-none duration-75'
+                : 'opacity-100 duration-150'
+            )}
+            title="Sandbox Preview"
+            style={{
+              height: iframeComputedHeight || '100%',
+              zIndex: isExpanded ? 'initial' : -1,
+            }}
+          />
+
+          {error && <ErrorMessage error={error} />}
         </div>
 
         <LoadingOverlay

From 5a7731f74ee954fba6f489a5ee804e46e82a43be Mon Sep 17 00:00:00 2001
From: Danilo Woznica <danilowoz@gmail.com>
Date: Sun, 16 Oct 2022 21:39:30 +0100
Subject: [PATCH 12/19] Update
 beta/src/components/MDX/Sandpack/LoadingOverlay.tsx

Co-authored-by: Shanmughapriyan S <priyanshan03@gmail.com>
---
 beta/src/components/MDX/Sandpack/LoadingOverlay.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/components/MDX/Sandpack/LoadingOverlay.tsx b/beta/src/components/MDX/Sandpack/LoadingOverlay.tsx
index 205eb08280b..0f8985dacc9 100644
--- a/beta/src/components/MDX/Sandpack/LoadingOverlay.tsx
+++ b/beta/src/components/MDX/Sandpack/LoadingOverlay.tsx
@@ -114,7 +114,7 @@ const useLoadingOverlayState = (
    * Fading transient state
    */
   useEffect(() => {
-    let fadeTimeout: NodeJS.Timer;
+    let fadeTimeout: ReturnType<typeof setTimeout>;
 
     if (state === 'PRE_FADING' && !dependenciesLoading) {
       setState('FADING');

From fc65c3a0153070dce5c45478b54f025809c63e8a Mon Sep 17 00:00:00 2001
From: Danilo Woznica <danilowoz@gmail.com>
Date: Sun, 16 Oct 2022 21:51:56 +0000
Subject: [PATCH 13/19] Update sandpack.css

---
 beta/src/styles/sandpack.css | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/beta/src/styles/sandpack.css b/beta/src/styles/sandpack.css
index 807d20988c4..002df9f8641 100644
--- a/beta/src/styles/sandpack.css
+++ b/beta/src/styles/sandpack.css
@@ -249,6 +249,12 @@ html.dark .sp-wrapper {
   @apply border-red-40;
 }
 
+.sandpack .sp-cm {
+  margin: 0px;
+  outline: none;
+  height: 100%;
+}
+
 .sp-code-editor .sp-cm .cm-scroller {
   overflow: auto;
   padding: 18px 0;

From 08cb840dbfe8000abed6272ec4341ee53f705893 Mon Sep 17 00:00:00 2001
From: Danilo Woznica <danilowoz@gmail.com>
Date: Mon, 17 Oct 2022 19:44:30 +0000
Subject: [PATCH 14/19] Update Preview.tsx and SandpackRoot.tsx

---
 beta/src/components/MDX/Sandpack/Preview.tsx      | 4 ++--
 beta/src/components/MDX/Sandpack/SandpackRoot.tsx | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/beta/src/components/MDX/Sandpack/Preview.tsx b/beta/src/components/MDX/Sandpack/Preview.tsx
index dd996e3373e..b172f99cd27 100644
--- a/beta/src/components/MDX/Sandpack/Preview.tsx
+++ b/beta/src/components/MDX/Sandpack/Preview.tsx
@@ -180,7 +180,7 @@ export function Preview({
         )}>
         <div
           className={cn(
-            'rounded-t-none sm:rounded-lg bg-white md:shadow-md w-full max-w-full',
+            'rounded-t-none sm:rounded-lg bg-white md:shadow-md w-full max-w-full p-0',
             error && 'border-2 border-red-40'
           )}
           style={iframeWrapperPosition()}>
@@ -202,7 +202,7 @@ export function Preview({
             )}
             title="Sandbox Preview"
             style={{
-              height: iframeComputedHeight || '100%',
+              height: iframeComputedHeight || '100px',
               zIndex: isExpanded ? 'initial' : -1,
             }}
           />
diff --git a/beta/src/components/MDX/Sandpack/SandpackRoot.tsx b/beta/src/components/MDX/Sandpack/SandpackRoot.tsx
index 61be960e4ee..098abaf5cc9 100644
--- a/beta/src/components/MDX/Sandpack/SandpackRoot.tsx
+++ b/beta/src/components/MDX/Sandpack/SandpackRoot.tsx
@@ -88,7 +88,7 @@ function SandpackRoot(props: SandpackProps) {
           initMode: 'user-visible',
           initModeObserverOptions: {rootMargin: '1400px 0px'},
           bundlerURL:
-            'https://6e2b0f76.sandpack-bundler.pages.dev/?babel=minimal',
+            'https://1bb21742.sandpack-bundler.pages.dev/?babel=minimal',
           logLevel: SandpackLogLevel.None,
         }}>
         <CustomPreset

From 92688e8cf4a5b9b44237931f5d18709e79c40e5b Mon Sep 17 00:00:00 2001
From: Danilo Woznica <danilowoz@gmail.com>
Date: Mon, 17 Oct 2022 20:18:40 +0000
Subject: [PATCH 15/19] Update 3 files

---
 beta/src/components/MDX/Sandpack/LoadingOverlay.tsx | 2 +-
 beta/src/components/MDX/Sandpack/Preview.tsx        | 7 ++++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/beta/src/components/MDX/Sandpack/LoadingOverlay.tsx b/beta/src/components/MDX/Sandpack/LoadingOverlay.tsx
index 0f8985dacc9..7c261866dce 100644
--- a/beta/src/components/MDX/Sandpack/LoadingOverlay.tsx
+++ b/beta/src/components/MDX/Sandpack/LoadingOverlay.tsx
@@ -86,7 +86,7 @@ const useLoadingOverlayState = (
   forceLoading: boolean
 ): LoadingOverlayState => {
   const {sandpack, listen} = useSandpack();
-  const [state, setState] = useState<LoadingOverlayState>('LOADING');
+  const [state, setState] = useState<LoadingOverlayState>('HIDDEN');
 
   if (state !== 'LOADING' && forceLoading) {
     setState('LOADING');
diff --git a/beta/src/components/MDX/Sandpack/Preview.tsx b/beta/src/components/MDX/Sandpack/Preview.tsx
index b172f99cd27..9d74c968a28 100644
--- a/beta/src/components/MDX/Sandpack/Preview.tsx
+++ b/beta/src/components/MDX/Sandpack/Preview.tsx
@@ -202,7 +202,12 @@ export function Preview({
             )}
             title="Sandbox Preview"
             style={{
-              height: iframeComputedHeight || '100px',
+              /**
+               * This initial height value is kind of arbitrary,
+               * but it's based on the average height of the sandboxes,
+               * to make the load state smoother
+               */
+              height: iframeComputedHeight || '180px',
               zIndex: isExpanded ? 'initial' : -1,
             }}
           />

From 5f431d1b5b27ca3be5ed85546957b647ba62081f Mon Sep 17 00:00:00 2001
From: Danilo Woznica <danilowoz@gmail.com>
Date: Tue, 18 Oct 2022 22:34:21 +0000
Subject: [PATCH 16/19] Update ErrorMessage.tsx and Preview.tsx

---
 .../components/MDX/Sandpack/ErrorMessage.tsx  |  4 +-
 beta/src/components/MDX/Sandpack/Preview.tsx  | 46 +++++++++----------
 2 files changed, 23 insertions(+), 27 deletions(-)

diff --git a/beta/src/components/MDX/Sandpack/ErrorMessage.tsx b/beta/src/components/MDX/Sandpack/ErrorMessage.tsx
index 8af4158fe49..7c67ee4617e 100644
--- a/beta/src/components/MDX/Sandpack/ErrorMessage.tsx
+++ b/beta/src/components/MDX/Sandpack/ErrorMessage.tsx
@@ -10,11 +10,11 @@ interface ErrorType {
   path?: string;
 }
 
-export function ErrorMessage({error}: {error: ErrorType}) {
+export function ErrorMessage({error, ...props}: {error: ErrorType}) {
   const {message, title} = error;
 
   return (
-    <div className="p-6 bg-white rounded-t-none sm:rounded-lg ">
+    <div className="bg-white border-2 border-red-40 rounded-lg p-6" {...props}>
       <h2 className="text-red-40 text-xl mb-4">{title || 'Error'}</h2>
       <pre className="text-secondary whitespace-pre-wrap break-words leading-tight">
         {message}
diff --git a/beta/src/components/MDX/Sandpack/Preview.tsx b/beta/src/components/MDX/Sandpack/Preview.tsx
index 9d74c968a28..aa53b4fe8f9 100644
--- a/beta/src/components/MDX/Sandpack/Preview.tsx
+++ b/beta/src/components/MDX/Sandpack/Preview.tsx
@@ -121,9 +121,7 @@ export function Preview({
             setShowLoading(true);
           }, 1000);
 
-          if (message.firstLoad) {
-            setBundlerIsReady(false);
-          }
+          setBundlerIsReady(false);
         } else if (message.type === 'done') {
           setBundlerIsReady(true);
           setShowLoading(false);
@@ -156,8 +154,10 @@ export function Preview({
   // - It should work on mobile.
   // The best way to test it is to actually go through some challenges.
 
+  const hideContent = !iframeComputedHeight || !bundlerIsReady || error;
+
   const iframeWrapperPosition = (): CSSProperties => {
-    if (!bundlerIsReady) {
+    if (hideContent) {
       return {position: 'relative'};
     }
 
@@ -178,43 +178,39 @@ export function Preview({
           // because it breaks position: sticky (and isn't needed anyway).
           !isExpanded && (error || bundlerIsReady) ? 'overflow-auto' : null
         )}>
-        <div
-          className={cn(
-            'rounded-t-none sm:rounded-lg bg-white md:shadow-md w-full max-w-full p-0',
-            error && 'border-2 border-red-40'
-          )}
-          style={iframeWrapperPosition()}>
+        <div style={iframeWrapperPosition()}>
           <iframe
             ref={iframeRef}
             className={cn(
-              'w-full max-w-full rounded-t-none sm:rounded-lg transition-opacity',
+              'rounded-t-none sm:rounded-lg bg-white md:shadow-md w-full max-w-full p-0 transition-opacity duration-150',
               // We can't *actually* hide content because that would
               // break calculating the computed height in the iframe
               // (which we're using for autosizing). This is noticeable
               // if you make a compiler error and then fix it with code
               // that expands the content. You want to measure that.
-              error && 'absolute',
-
-              // Transition between start/refresh and done state
-              !bundlerIsReady || error
-                ? 'opacity-0 pointer-events-none duration-75'
-                : 'opacity-100 duration-150'
+              hideContent
+                ? 'absolute opacity-0 pointer-events-none'
+                : 'opacity-100 '
             )}
             title="Sandbox Preview"
             style={{
-              /**
-               * This initial height value is kind of arbitrary,
-               * but it's based on the average height of the sandboxes,
-               * to make the load state smoother
-               */
-              height: iframeComputedHeight || '180px',
+              height: iframeComputedHeight || '15px',
               zIndex: isExpanded ? 'initial' : -1,
             }}
           />
-
-          {error && <ErrorMessage error={error} />}
         </div>
 
+        {error && (
+          <div
+            className={cn(
+              // This isn't absolutely positioned so that
+              // the errors can also expand the parent height.
+              isExpanded ? 'sticky top-8' : ''
+            )}>
+            <ErrorMessage error={error} />
+          </div>
+        )}
+
         <LoadingOverlay
           clientId={clientId}
           dependenciesLoading={!bundlerIsReady && iframeComputedHeight === null}

From f2b84c6252d2813fac03bef2b65cafa654dc1570 Mon Sep 17 00:00:00 2001
From: Danilo Woznica <danilowoz@gmail.com>
Date: Tue, 18 Oct 2022 22:38:01 +0000
Subject: [PATCH 17/19] Update Preview.tsx

---
 beta/src/components/MDX/Sandpack/Preview.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/beta/src/components/MDX/Sandpack/Preview.tsx b/beta/src/components/MDX/Sandpack/Preview.tsx
index aa53b4fe8f9..64d7bae0c8e 100644
--- a/beta/src/components/MDX/Sandpack/Preview.tsx
+++ b/beta/src/components/MDX/Sandpack/Preview.tsx
@@ -182,15 +182,15 @@ export function Preview({
           <iframe
             ref={iframeRef}
             className={cn(
-              'rounded-t-none sm:rounded-lg bg-white md:shadow-md w-full max-w-full p-0 transition-opacity duration-150',
+              'rounded-t-none bg-white md:shadow-md sm:rounded-lg w-full max-w-full transition-opacity',
               // We can't *actually* hide content because that would
               // break calculating the computed height in the iframe
               // (which we're using for autosizing). This is noticeable
               // if you make a compiler error and then fix it with code
               // that expands the content. You want to measure that.
               hideContent
-                ? 'absolute opacity-0 pointer-events-none'
-                : 'opacity-100 '
+                ? 'absolute opacity-0 pointer-events-none duration-75'
+                : 'opacity-100 duration-150'
             )}
             title="Sandbox Preview"
             style={{
@@ -205,7 +205,7 @@ export function Preview({
             className={cn(
               // This isn't absolutely positioned so that
               // the errors can also expand the parent height.
-              isExpanded ? 'sticky top-8' : ''
+              isExpanded ? 'sticky top-8' : null
             )}>
             <ErrorMessage error={error} />
           </div>

From 7c85423b757585bd1e1bfefe57829a7d3cdd673f Mon Sep 17 00:00:00 2001
From: Danilo Woznica <danilowoz@gmail.com>
Date: Wed, 19 Oct 2022 19:45:16 +0000
Subject: [PATCH 18/19] Update SandpackRoot.tsx

---
 beta/src/components/MDX/Sandpack/SandpackRoot.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/components/MDX/Sandpack/SandpackRoot.tsx b/beta/src/components/MDX/Sandpack/SandpackRoot.tsx
index 098abaf5cc9..c0755c06518 100644
--- a/beta/src/components/MDX/Sandpack/SandpackRoot.tsx
+++ b/beta/src/components/MDX/Sandpack/SandpackRoot.tsx
@@ -88,7 +88,7 @@ function SandpackRoot(props: SandpackProps) {
           initMode: 'user-visible',
           initModeObserverOptions: {rootMargin: '1400px 0px'},
           bundlerURL:
-            'https://1bb21742.sandpack-bundler.pages.dev/?babel=minimal',
+            'https://71d9edc6.sandpack-bundler.pages.dev/?babel=minimal',
           logLevel: SandpackLogLevel.None,
         }}>
         <CustomPreset

From c6ffbac13a486f686987e70aef7757ec77164dd1 Mon Sep 17 00:00:00 2001
From: Danilo Woznica <danilowoz@gmail.com>
Date: Fri, 21 Oct 2022 14:22:31 +0000
Subject: [PATCH 19/19] Update Preview.tsx

---
 beta/src/components/MDX/Sandpack/Preview.tsx | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/beta/src/components/MDX/Sandpack/Preview.tsx b/beta/src/components/MDX/Sandpack/Preview.tsx
index 64d7bae0c8e..cec510b8177 100644
--- a/beta/src/components/MDX/Sandpack/Preview.tsx
+++ b/beta/src/components/MDX/Sandpack/Preview.tsx
@@ -95,6 +95,8 @@ export function Preview({
   errorScreenRegisteredRef.current = true;
   loadingScreenRegisteredRef.current = true;
 
+  const sandpackIdle = sandpack.status === 'idle';
+
   useEffect(function createBundler() {
     const iframeElement = iframeRef.current!;
     registerBundler(iframeElement, clientId);
@@ -112,6 +114,10 @@ export function Preview({
         if (message.type === 'resize') {
           setComputedAutoHeight(message.height);
         } else if (message.type === 'start') {
+          if (message.firstLoad) {
+            setBundlerIsReady(false);
+          }
+
           /**
            * The spinner component transition might be longer than
            * the bundler loading, so we only show the spinner if
@@ -119,9 +125,7 @@ export function Preview({
            */
           timeout = setTimeout(() => {
             setShowLoading(true);
-          }, 1000);
-
-          setBundlerIsReady(false);
+          }, 500);
         } else if (message.type === 'done') {
           setBundlerIsReady(true);
           setShowLoading(false);
@@ -136,7 +140,7 @@ export function Preview({
         unsubscribe();
       };
     },
-    [status === 'idle']
+    [sandpackIdle]
   );
 
   // WARNING:
@@ -154,7 +158,7 @@ export function Preview({
   // - It should work on mobile.
   // The best way to test it is to actually go through some challenges.
 
-  const hideContent = !iframeComputedHeight || !bundlerIsReady || error;
+  const hideContent = error || !iframeComputedHeight || !bundlerIsReady;
 
   const iframeWrapperPosition = (): CSSProperties => {
     if (hideContent) {
@@ -203,9 +207,10 @@ export function Preview({
         {error && (
           <div
             className={cn(
+              'z-50',
               // This isn't absolutely positioned so that
               // the errors can also expand the parent height.
-              isExpanded ? 'sticky top-8' : null
+              isExpanded ? 'sticky top-8 ' : null
             )}>
             <ErrorMessage error={error} />
           </div>