Add better fallback

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>
   );