[Beta] Sandpack bundler improvements

beta/src/components/MDX/Sandpack/Error.tsx → 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, ...props}: {error: ErrorType}) {
   const {message, title} = error;
 
   return (
-    <div className={'bg-white border-2 border-red-40 rounded-lg p-6'}>
+    <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">
+      <pre className="text-secondary whitespace-pre-wrap break-words leading-tight">
         {message}
       </pre>
     </div>

beta/src/components/MDX/Sandpack/LoadingOverlay.tsx

@@ -0,0 +1,142 @@
+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>('HIDDEN');
+
+  if (state !== 'LOADING' && forceLoading) {
+    setState('LOADING');
+  }
+
+  /**
+   * Sandpack listener
+   */
+  const sandpackIdle = sandpack.status === 'idle';
+  useEffect(() => {
+    const unsubscribe = listen((message) => {
+      if (message.type === 'done') {
+        setState((prev) => {
+          return prev === 'LOADING' ? 'PRE_FADING' : 'HIDDEN';
+        });
+      }
+    }, clientId);
+
+    return () => {
+      unsubscribe();
+    };
+  }, [listen, clientId, sandpackIdle]);
+
+  /**
+   * Fading transient state
+   */
+  useEffect(() => {
+    let fadeTimeout: ReturnType<typeof setTimeout>;
+
+    if (state === 'PRE_FADING' && !dependenciesLoading) {
+      setState('FADING');
+    } else if (state === 'FADING') {
+      fadeTimeout = setTimeout(
+        () => setState('HIDDEN'),
+        FADE_ANIMATION_DURATION
+      );
+    }
+
+    return () => {
+      clearTimeout(fadeTimeout);
+    };
+  }, [state, dependenciesLoading]);
+
+  if (sandpack.status === 'timeout') {
+    return 'TIMEOUT';
+  }
+
+  if (sandpack.status !== 'running') {
+    return 'HIDDEN';
+  }
+
+  return state;
+};

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(() => {
@@ -94,9 +93,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();
   };