Add better fallback

javascript/just.config.cjs

@@ -110,7 +110,7 @@ function babelTransformTask(opts) {
       env: {
         // Trigger distribution-specific Babel transforms
         NODE_ENV: 'dist',
-      }
+      },
     });
   };
 }

javascript/src/index.ts

@@ -9,7 +9,7 @@
 
 // @ts-ignore untyped from Emscripten
 import loadYoga from '../binaries/web.js';
-import wrapAssembly from './wrapAssembly.js';
+import wrapAssembly from './wrapAssembly.ts';
 
 export type {
   Config,

javascript/tsconfig.json

@@ -17,6 +17,7 @@
     }
   },
   "include": [
-    "src/**/*"
+    "src/**/*",
+    "tests/**/*"
   ]
 }

website-next/src/pages/index.module.css

@@ -28,3 +28,29 @@
   align-items: center;
   justify-content: center;
 }
+
+.playgroundFallback {
+  height: 500px;
+  width: 100%;
+  background: linear-gradient(-90deg, rgba(0, 0, 0, 0.02) 1px, transparent 1px),
+    linear-gradient(rgba(0, 0, 0, 0.02) 1px, transparent 1px),
+    linear-gradient(-90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px),
+    linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px),
+    linear-gradient(
+      transparent 4px,
+      #f5f5f5 4px,
+      #f5f5f5 97px,
+      transparent 97px
+    ),
+    linear-gradient(-90deg, #e5e5e5 1px, transparent 1px),
+    linear-gradient(
+      -90deg,
+      transparent 4px,
+      #f5f5f5 4px,
+      #f5f5f5 97px,
+      transparent 97px
+    ),
+    linear-gradient(#e5e5e5 1px, transparent 1px), #f5f5f5;
+  background-size: 10px 10px, 10px 10px, 100px 100px, 100px 100px, 100px 100px,
+    100px 100px, 100px 100px, 100px 100px;
+}

website-next/src/pages/index.tsx

@@ -36,6 +36,18 @@ function HomepageHeader() {
 
 const LazyPlayground = React.lazy(() => import('../components/Playground'));
 
+function ClientPlayground() {
+  const fallback = <div className={styles.playgroundFallback} />;
+  return <BrowserOnly fallback={fallback}>
+  {() => (
+    <Suspense fallback={fallback}>
+      <LazyPlayground />
+    </Suspense>
+  )}
+</BrowserOnly>;
+}
+
+
 export default function Home(): JSX.Element {
   const {siteConfig} = useDocusaurusContext();
   return (
@@ -45,13 +57,7 @@ export default function Home(): JSX.Element {
       <HomepageHeader />
       <main>
         <HomepageFeatures />
-        <BrowserOnly fallback={null}>
-          {() => (
-            <Suspense fallback={null}>
-              <LazyPlayground />
-            </Suspense>
-          )}
-        </BrowserOnly>
+        <ClientPlayground />
       </main>
     </Layout>
   );