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