fallback spinner for the website

This commit is contained in:
Vyacheslav Matyukhin 2022-07-23 21:44:08 +04:00
parent b9dc7c7033
commit 0ad09c96aa
No known key found for this signature in database
GPG Key ID: 3D2A774C5489F96C
6 changed files with 46 additions and 4 deletions

View File

@ -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",

View 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>;
};

View 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);
}
}

View File

@ -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;

View File

@ -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;

View File

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