fallback spinner for the website

packages/website/package.json

@@ -14,6 +14,7 @@
   "dependencies": {
     "@docusaurus/core": "2.0.0-rc.1",
     "@docusaurus/preset-classic": "2.0.0-rc.1",
+    "@heroicons/react": "^1.0.6",
     "@quri/squiggle-components": "^0.2.20",
     "base64-js": "^1.5.1",
     "clsx": "^1.2.1",

packages/website/src/components/FallbackSpinner.jsx

@@ -0,0 +1,15 @@
+import { useEffect, useState } from "react";
+import { RefreshIcon } from "@heroicons/react/solid";
+import styles from "./FallbackSpinner.module.css";
+
+export const FallbackSpinner = ({ height }) => {
+    const [show, setShow] = useState(false);
+    useEffect(() => {
+        setTimeout(() => {
+            setShow(true);
+        }, 500);
+    }, []);
+    return <div className={styles.container} style={{height}}>{
+        show ? <RefreshIcon className={styles.icon} /> : null
+    }</div>;
+};

packages/website/src/components/FallbackSpinner.module.css

@@ -0,0 +1,24 @@
+.container {
+    /* height must be set explicitly */
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.icon {
+  width: 80px;
+  height: 80px;
+  color: #aaa;
+
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

packages/website/src/components/SquiggleEditor.jsx

@@ -1,8 +1,9 @@
 import BrowserOnly from "@docusaurus/BrowserOnly";
+import { FallbackSpinner } from "./FallbackSpinner";
 
 export function SquiggleEditor(props) {
   return (
-    <BrowserOnly fallback={<div>Loading...</div>}>
+    <BrowserOnly fallback={<FallbackSpinner height={280} />}>
       {() => {
         const LibComponent =
           require("@quri/squiggle-components").SquiggleEditor;

packages/website/src/components/SquigglePlayground.jsx

@@ -1,8 +1,9 @@
 import BrowserOnly from "@docusaurus/BrowserOnly";
+import { FallbackSpinner } from "./FallbackSpinner";
 
 export function SquigglePlayground(props) {
   return (
-    <BrowserOnly fallback={<div>Loading...</div>}>
+    <BrowserOnly fallback={<FallbackSpinner height="100vh" />}>
       {() => {
         const LibComponent =
           require("@quri/squiggle-components").SquigglePlayground;

yarn.lock

@@ -4796,7 +4796,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@^18.0.1", "@types/react@^18.0.9":
+"@types/react@*", "@types/react@^18.0.9":
   version "18.0.15"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.15.tgz#d355644c26832dc27f3e6cbf0c4f4603fc4ab7fe"
   integrity sha512-iz3BtLuIYH1uWdsv6wXYdhozhqj20oD4/Hk2DNXIn1kFsmp9x8d9QB6FnPhfkbhd2PgEONt9Q1x/ebkwjfFLow==
@@ -15225,7 +15225,7 @@ react-vega@^7.6.0:
     prop-types "^15.8.1"
     vega-embed "^6.5.1"
 
-react@^18.0.0, react@^18.1.0:
+react@^18.1.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
   integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==