chore: add loading overlay

Author: SamVerschueren

package.json

@@ -30,7 +30,7 @@
     "@docsearch/react": "^3.8.3",
     "@headlessui/react": "^1.7.0",
     "@radix-ui/react-context-menu": "^2.1.5",
-    "@webcontainer/react": "^0.0.7",
+    "@webcontainer/react": "^0.0.8",
     "body-scroll-lock": "^3.1.3",
     "classnames": "^2.2.6",
     "debounce": "^1.2.1",

src/components/MDX/Sandpack/LoadingOverlay.tsx

@@ -12,22 +12,138 @@ import {useEffect} from 'react';
 
 const FADE_ANIMATION_DURATION = 200;
 
+type BootPhase = 'booting' | 'installing' | 'starting';
+
+const BOOT_PHASES: BootPhase[] = ['booting', 'installing', 'starting'];
+
+function isBootPhase(status: string): status is BootPhase {
+  return BOOT_PHASES.includes(status as BootPhase);
+}
+
+const BOOT_STEPS: {phase: BootPhase; label: string}[] = [
+  {phase: 'booting', label: 'Booting sandbox'},
+  {phase: 'installing', label: 'Installing dependencies'},
+  {phase: 'starting', label: 'Starting dev server'},
+];
+
+type StepState = 'pending' | 'active' | 'done';
+
+function getStepState(
+  stepPhase: BootPhase,
+  currentPhase: BootPhase
+): StepState {
+  const stepIndex = BOOT_PHASES.indexOf(stepPhase);
+  const currentIndex = BOOT_PHASES.indexOf(currentPhase);
+  if (currentIndex > stepIndex) return 'done';
+  if (currentIndex === stepIndex) return 'active';
+  return 'pending';
+}
+
+function CheckIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+      <circle cx="8" cy="8" r="7" stroke="currentColor" strokeWidth="1.5" />
+      <path
+        d="M5 8.5l2 2 4-4.5"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function SpinnerIcon() {
+  return (
+    <svg
+      className="sp-boot-spinner"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none">
+      <circle
+        cx="8"
+        cy="8"
+        r="6.5"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        opacity="0.2"
+      />
+      <path
+        d="M8 1.5A6.5 6.5 0 0 1 14.5 8"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+function CircleIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+      <circle
+        cx="8"
+        cy="8"
+        r="6.5"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        opacity="0.25"
+      />
+    </svg>
+  );
+}
+
+function BootProgressChecklist({
+  phase,
+  opacity = 1,
+}: {
+  phase: BootPhase | 'complete';
+  opacity?: number;
+}) {
+  return (
+    <div
+      className="sp-overlay sp-loading"
+      style={{
+        opacity,
+        transition: `opacity ${FADE_ANIMATION_DURATION}ms ease-out`,
+      }}>
+      <div className="sp-boot-checklist">
+        {BOOT_STEPS.map(({phase: stepPhase, label}) => {
+          const state =
+            phase === 'complete' ? 'done' : getStepState(stepPhase, phase);
+          return (
+            <div
+              key={stepPhase}
+              className={`sp-boot-step sp-boot-step-${state}`}>
+              <span className="sp-boot-step-icon">
+                {state === 'done' && <CheckIcon />}
+                {state === 'active' && <SpinnerIcon />}
+                {state === 'pending' && <CircleIcon />}
+              </span>
+              <span className="sp-boot-step-label">{label}</span>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
 export const LoadingOverlay = ({
   dependenciesLoading,
   forceLoading,
 }: {
   dependenciesLoading: boolean;
   forceLoading: boolean;
 } & React.HTMLAttributes<HTMLDivElement>): React.ReactNode | null => {
+  const {sandpack} = useSandpack();
   const loadingOverlayState = useLoadingOverlayState(
     dependenciesLoading,
     forceLoading
   );
 
-  if (loadingOverlayState === 'HIDDEN') {
-    return null;
-  }
-
   if (loadingOverlayState === 'TIMEOUT') {
     return (
       <div className="sp-overlay sp-error">
@@ -46,29 +162,19 @@ export const LoadingOverlay = ({
     );
   }
 
+  if (isBootPhase(sandpack.status)) {
+    return <BootProgressChecklist phase={sandpack.status} />;
+  }
+
+  if (loadingOverlayState === 'HIDDEN') {
+    return null;
+  }
+
   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 StackBlitz">
-        <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>
+    <BootProgressChecklist phase="complete" opacity={stillLoading ? 1 : 0} />
   );
 };
 

src/components/MDX/Sandpack/SandpackRSCRoot.tsx

@@ -97,8 +97,7 @@ function SandpackRSCRoot(props: SandpackProps) {
         theme={CustomTheme}
         options={{
           autorun,
-          initMode: 'user-visible',
-          initModeObserverOptions: {rootMargin: '1400px 0px'},
+          initMode: 'immediate',
         }}>
         <CustomPreset providedFiles={Object.keys(files)} />
       </SandpackProvider>

src/components/MDX/Sandpack/SandpackRoot.tsx

@@ -97,8 +97,7 @@ function SandpackRoot(props: SandpackProps) {
         theme={CustomTheme}
         options={{
           autorun,
-          initMode: 'user-visible',
-          initModeObserverOptions: {rootMargin: '1400px 0px'},
+          initMode: 'immediate',
         }}>
         <CustomPreset providedFiles={Object.keys(files)} />
       </SandpackProvider>

src/styles/sandpack.css

@@ -305,106 +305,6 @@ html.dark .sp-wrapper {
 /**
  * Loading & error overlay component
  */
-.sandpack .sp-cube-wrapper {
-  background-color: var(--sp-colors-surface1);
-  position: absolute;
-  right: var(--sp-space-2);
-  bottom: var(--sp-space-2);
-  z-index: var(--sp-zIndices-top);
-  width: 32px;
-  height: 32px;
-  border-radius: var(--sp-border-radius);
-}
-
-.sandpack .sp-button {
-  display: flex;
-  align-items: center;
-  margin: auto;
-  width: 100%;
-  height: 100%;
-}
-
-.sandpack .sp-button svg {
-  min-width: var(--sp-space-5);
-  width: var(--sp-space-5);
-  height: var(--sp-space-5);
-  margin: auto;
-}
-
-.sandpack .sp-cube-wrapper .sp-cube {
-  display: flex;
-}
-
-.sandpack .sp-cube-wrapper .sp-button {
-  display: none;
-}
-
-.sandpack .sp-cube-wrapper:hover .sp-button {
-  display: block;
-}
-
-.sandpack .sp-cube-wrapper:hover .sp-cube {
-  display: none;
-}
-
-.sandpack .sp-cube {
-  transform: translate(-4px, 9px) scale(0.13, 0.13);
-}
-
-.sandpack .sp-cube * {
-  position: absolute;
-  width: 96px;
-  height: 96px;
-}
-
-@keyframes cubeRotate {
-  0% {
-    transform: rotateX(-25.5deg) rotateY(45deg);
-  }
-
-  100% {
-    transform: rotateX(-25.5deg) rotateY(405deg);
-  }
-}
-
-.sandpack .sp-sides {
-  animation: cubeRotate 1s linear infinite;
-  animation-fill-mode: forwards;
-  transform-style: preserve-3d;
-  transform: rotateX(-25.5deg) rotateY(45deg);
-}
-
-.sandpack .sp-sides * {
-  border: 10px solid var(--sp-colors-clickable);
-  border-radius: 8px;
-  background: var(--sp-colors-surface1);
-}
-
-.sandpack .sp-sides .top {
-  transform: rotateX(90deg) translateZ(44px);
-  transform-origin: 50% 50%;
-}
-.sandpack .sp-sides .bottom {
-  transform: rotateX(-90deg) translateZ(44px);
-  transform-origin: 50% 50%;
-}
-.sandpack .sp-sides .front {
-  transform: rotateY(0deg) translateZ(44px);
-  transform-origin: 50% 50%;
-}
-.sandpack .sp-sides .back {
-  transform: rotateY(-180deg) translateZ(44px);
-  transform-origin: 50% 50%;
-}
-.sandpack .sp-sides .left {
-  transform: rotateY(-90deg) translateZ(44px);
-  transform-origin: 50% 50%;
-}
-.sandpack .sp-sides .right {
-  transform: rotateY(90deg) translateZ(44px);
-  transform-origin: 50% 50%;
-}
-
 .sandpack .sp-overlay {
   @apply bg-card;
   position: absolute;
@@ -612,3 +512,64 @@ html.dark .sp-devtools > div {
 .sp-loading .sp-icon-standalone span {
   display: none;
 }
+
+/**
+ * Boot progress checklist
+ */
+.sp-boot-checklist {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  height: 100%;
+  margin: 0 auto;
+  width: fit-content;
+  gap: 10px;
+}
+
+.sp-boot-step {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-family: var(--sp-font-body);
+  font-size: 13px;
+  line-height: 1;
+  transition: color 300ms ease, opacity 300ms ease;
+}
+
+.sp-boot-step-pending {
+  color: var(--sp-colors-clickable);
+  opacity: 0.4;
+}
+
+.sp-boot-step-active {
+  color: var(--sp-colors-accent);
+  opacity: 1;
+}
+
+.sp-boot-step-done {
+  color: var(--sp-colors-clickable);
+  opacity: 0.65;
+}
+
+.sp-boot-step-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+
+@keyframes bootSpinnerRotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.sp-boot-spinner {
+  animation: bootSpinnerRotate 0.8s linear infinite;
+}

yarn.lock

@@ -1995,10 +1995,10 @@
   resolved "https://registry.yarnpkg.com/@webcontainer/api/-/api-1.6.1.tgz#8f4034b858279595b3b6aa2652b38af713924dfc"
   integrity sha512-2RS2KiIw32BY1Icf6M1DvqSmcon9XICZCDgS29QJb2NmF12ZY2V5Ia+949hMKB3Wno+P/Y8W+sPP59PZeXSELg==
 
-"@webcontainer/react@^0.0.7":
-  version "0.0.7"
-  resolved "https://registry.yarnpkg.com/@webcontainer/react/-/react-0.0.7.tgz#faea3e7deb973b1e1c6ff0147962b3308fc19cd1"
-  integrity sha512-uS29mkMTofrbIZFRnlvM2OW/P5RSRUI2xo3+wiECCFMX4UrefeQUTeEBcGL4xVvhxRnrmmU0TXtFQ1lbeIqekw==
+"@webcontainer/react@^0.0.8":
+  version "0.0.8"
+  resolved "https://registry.yarnpkg.com/@webcontainer/react/-/react-0.0.8.tgz#45fcc8e80931e5cca4862cbbae9aef776e07d250"
+  integrity sha512-23ZSkK9ikgi6SveDa/TEbnRsTljC/Gqh75oCmWGUr0HSVFneie3mpqb3XQNsQFpJWzM+jH2s8FaJapoGN1QySQ==
   dependencies:
     "@codemirror/commands" "^6.10.3"
     "@codemirror/lang-css" "^6.3.1"