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

Padding and loading spinner improvements for the website
This commit is contained in:
Ozzie Gooen 2022-07-23 11:37:41 -07:00 committed by GitHub
commit 6341dedaf2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 50 additions and 5 deletions

View File

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

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

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={292} />}>
{() => {
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

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

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