Wraps p5.js code in ClientOnly

Author: cmpadden

pages/playground/palettes/mountains.vue

@@ -2,7 +2,14 @@
   <div class="select-none bg-gradient-to-b from-green-800 to-gray-800">
     <div class="m-6 grid h-2/3 place-items-center">
       <div class="font-mono text-white">
-        <div id="canvas" class="mb-2 h-96 border-2 border-white" />
+        <ClientOnly>
+          <div id="canvas" class="mb-2 h-96 border-2 border-white" />
+          <template #fallback>
+            <div class="mb-2 flex h-96 items-center justify-center border-2 border-white bg-gray-800">
+              <div class="text-white">Loading mountain visualization...</div>
+            </div>
+          </template>
+        </ClientOnly>
         <div class="my-2 w-48 text-center md:w-full">
           Click or tap anywhere to redraw the waves!
         </div>

pages/playground/palettes/variance.vue

@@ -3,7 +3,14 @@
     <div class="grid h-screen place-items-center">
       <div class="font-mono text-white">
         <div class="mb-2 border-2 border-white">
-          <div id="canvas" />
+          <ClientOnly>
+            <div id="canvas" />
+            <template #fallback>
+              <div class="flex h-96 items-center justify-center bg-gray-800">
+                <div class="text-white">Loading color palette...</div>
+              </div>
+            </template>
+          </ClientOnly>
         </div>
       </div>
     </div>

pages/playground/plotter/index.vue

@@ -3,7 +3,14 @@
     <div class="m-8 grid place-items-center">
       <div class="font-mono text-white">
         <div id="canvas-container" class="mb-2 h-96 border-2 border-white">
-          <div id="canvas" />
+          <ClientOnly>
+            <div id="canvas" />
+            <template #fallback>
+              <div class="flex h-96 items-center justify-center bg-gray-800">
+                <div class="text-white">Loading sequence plotter...</div>
+              </div>
+            </template>
+          </ClientOnly>
         </div>
         <div class="my-2 md:w-full">
           <textarea

pages/playground/stl-model-render.vue

@@ -17,7 +17,14 @@ definePageMeta({ layout: "none" });
       renderer.
     </div>
     <div class="h-96 border-2 border-white">
-      <ModelPreview path="/models/mac_mini_macbook_stand.stl" />
+      <ClientOnly>
+        <ModelPreview path="/models/mac_mini_macbook_stand.stl" />
+        <template #fallback>
+          <div class="flex h-full items-center justify-center bg-gray-800">
+            <div class="text-white">Loading 3D model...</div>
+          </div>
+        </template>
+      </ClientOnly>
     </div>
   </div>
 </template>

pages/playground/tiling/index.vue

@@ -3,7 +3,14 @@
     <div class="grid h-screen place-items-center">
       <div class="font-mono text-white">
         <div class="mb-2 border-2 border-white">
-          <div id="canvas" />
+          <ClientOnly>
+            <div id="canvas" />
+            <template #fallback>
+              <div class="flex h-96 items-center justify-center bg-gray-800">
+                <div class="text-white">Loading tiling visualization...</div>
+              </div>
+            </template>
+          </ClientOnly>
         </div>
         <div class="my-2 w-48 text-center md:w-full">
           m-ary tree based tiling

pages/playground/waves/index.vue

@@ -29,33 +29,54 @@
           </div>
         </div>
         <div class="mb-2 border-2 border-white">
-          <PlaygroundWave
-            id="canvas1"
-            type="sin"
-            :diameter="wave.diameter"
-            :amplitude="wave.amplitude"
-            :lambda="wave.lambda"
-          />
+          <ClientOnly>
+            <PlaygroundWave
+              id="canvas1"
+              type="sin"
+              :diameter="wave.diameter"
+              :amplitude="wave.amplitude"
+              :lambda="wave.lambda"
+            />
+            <template #fallback>
+              <div class="flex h-64 items-center justify-center bg-gray-800">
+                <div class="text-white">Loading wave visualization...</div>
+              </div>
+            </template>
+          </ClientOnly>
         </div>
         <div>y(x) = A cos((2π / λ) x)</div>
         <div class="mb-2 border-2 border-white">
-          <PlaygroundWave
-            id="canvas2"
-            type="cos"
-            :diameter="wave.diameter"
-            :amplitude="wave.amplitude"
-            :lambda="wave.lambda"
-          />
+          <ClientOnly>
+            <PlaygroundWave
+              id="canvas2"
+              type="cos"
+              :diameter="wave.diameter"
+              :amplitude="wave.amplitude"
+              :lambda="wave.lambda"
+            />
+            <template #fallback>
+              <div class="flex h-64 items-center justify-center bg-gray-800">
+                <div class="text-white">Loading wave visualization...</div>
+              </div>
+            </template>
+          </ClientOnly>
         </div>
         <div>y(x) = A tan((2π / λ) x)</div>
         <div class="border-2 border-white">
-          <PlaygroundWave
-            id="canvas3"
-            type="tan"
-            :diameter="wave.diameter"
-            :amplitude="wave.amplitude"
-            :lambda="wave.lambda"
-          />
+          <ClientOnly>
+            <PlaygroundWave
+              id="canvas3"
+              type="tan"
+              :diameter="wave.diameter"
+              :amplitude="wave.amplitude"
+              :lambda="wave.lambda"
+            />
+            <template #fallback>
+              <div class="flex h-64 items-center justify-center bg-gray-800">
+                <div class="text-white">Loading wave visualization...</div>
+              </div>
+            </template>
+          </ClientOnly>
         </div>
         <div class="my-2 w-48 md:w-full">
           Click or tap anywhere to clear the canvas!