diff --git a/packages/website/package.json b/packages/website/package.json
index 621169f9..986b44c1 100644
--- a/packages/website/package.json
+++ b/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",
diff --git a/packages/website/src/components/FallbackSpinner.jsx b/packages/website/src/components/FallbackSpinner.jsx
new file mode 100644
index 00000000..1f5f8106
--- /dev/null
+++ b/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
{
+ show ? : null
+ }
;
+};
diff --git a/packages/website/src/components/FallbackSpinner.module.css b/packages/website/src/components/FallbackSpinner.module.css
new file mode 100644
index 00000000..c228836e
--- /dev/null
+++ b/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);
+ }
+}
diff --git a/packages/website/src/components/SquiggleEditor.jsx b/packages/website/src/components/SquiggleEditor.jsx
index 1bcd9b54..43d626c9 100644
--- a/packages/website/src/components/SquiggleEditor.jsx
+++ b/packages/website/src/components/SquiggleEditor.jsx
@@ -1,8 +1,9 @@
import BrowserOnly from "@docusaurus/BrowserOnly";
+import { FallbackSpinner } from "./FallbackSpinner";
export function SquiggleEditor(props) {
return (
- Loading...}>
+ }>
{() => {
const LibComponent =
require("@quri/squiggle-components").SquiggleEditor;
diff --git a/packages/website/src/components/SquigglePlayground.jsx b/packages/website/src/components/SquigglePlayground.jsx
index 4d46e7ea..e93327a0 100644
--- a/packages/website/src/components/SquigglePlayground.jsx
+++ b/packages/website/src/components/SquigglePlayground.jsx
@@ -1,8 +1,9 @@
import BrowserOnly from "@docusaurus/BrowserOnly";
+import { FallbackSpinner } from "./FallbackSpinner";
export function SquigglePlayground(props) {
return (
- Loading...}>
+ }>
{() => {
const LibComponent =
require("@quri/squiggle-components").SquigglePlayground;
diff --git a/yarn.lock b/yarn.lock
index a61e16f2..9255e6a9 100644
--- a/yarn.lock
+++ b/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==