Merge pull request #871 from quantified-uncertainty/playground-padding

Padding and loading spinner improvements for the website

packages/components/src/components/SquigglePlayground.tsx

@@ -533,7 +533,7 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
     <SquiggleContainer>
       <StyledTab.Group>
         <div className="pb-4">
-          <div className="flex justify-between items-center mt-2">
+          <div className="flex justify-between items-center">
             <StyledTab.List>
               <StyledTab
                 name={vars.showEditor ? "Code" : "Display"}

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,17 @@
+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 */ true);
+  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={292} />}>
       {() => {
         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;

packages/website/src/pages/playground.js

@@ -57,6 +57,7 @@ export default function PlaygroundPage() {
       <div
         style={{
           maxWidth: 2000,
+          padding: 8,
         }}
       >
         <SquigglePlayground {...playgroundProps} />

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==