fallback spinner for the website
This commit is contained in:
parent
b9dc7c7033
commit
0ad09c96aa
|
@ -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",
|
||||
|
|
15
packages/website/src/components/FallbackSpinner.jsx
Normal file
15
packages/website/src/components/FallbackSpinner.jsx
Normal file
|
@ -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>;
|
||||
};
|
24
packages/website/src/components/FallbackSpinner.module.css
Normal file
24
packages/website/src/components/FallbackSpinner.module.css
Normal file
|
@ -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);
|
||||
}
|
||||
}
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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==
|
||||
|
|
Loading…
Reference in New Issue
Block a user