From b9dc7c70332e1132cc093c64195e52edbd676eeb Mon Sep 17 00:00:00 2001 From: Vyacheslav Matyukhin Date: Sat, 23 Jul 2022 21:14:12 +0400 Subject: [PATCH 1/5] improve playground padding on the website --- packages/components/src/components/SquigglePlayground.tsx | 2 +- packages/website/src/pages/playground.js | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/components/src/components/SquigglePlayground.tsx b/packages/components/src/components/SquigglePlayground.tsx index 3b901809..5ca84040 100644 --- a/packages/components/src/components/SquigglePlayground.tsx +++ b/packages/components/src/components/SquigglePlayground.tsx @@ -533,7 +533,7 @@ export const SquigglePlayground: FC = ({
-
+
From 0ad09c96aa9a38338589ec37cf4f88341ab67537 Mon Sep 17 00:00:00 2001 From: Vyacheslav Matyukhin Date: Sat, 23 Jul 2022 21:44:08 +0400 Subject: [PATCH 2/5] fallback spinner for the website --- packages/website/package.json | 1 + .../src/components/FallbackSpinner.jsx | 15 ++++++++++++ .../src/components/FallbackSpinner.module.css | 24 +++++++++++++++++++ .../website/src/components/SquiggleEditor.jsx | 3 ++- .../src/components/SquigglePlayground.jsx | 3 ++- yarn.lock | 4 ++-- 6 files changed, 46 insertions(+), 4 deletions(-) create mode 100644 packages/website/src/components/FallbackSpinner.jsx create mode 100644 packages/website/src/components/FallbackSpinner.module.css 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== From ce31dc62c2a26165cfcf8ce8e15e85f932842ee2 Mon Sep 17 00:00:00 2001 From: Vyacheslav Matyukhin Date: Sat, 23 Jul 2022 21:56:28 +0400 Subject: [PATCH 3/5] more precise FallbackSpinner height for SquiggleEditor --- packages/website/src/components/SquiggleEditor.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/website/src/components/SquiggleEditor.jsx b/packages/website/src/components/SquiggleEditor.jsx index 43d626c9..d8404b82 100644 --- a/packages/website/src/components/SquiggleEditor.jsx +++ b/packages/website/src/components/SquiggleEditor.jsx @@ -3,7 +3,7 @@ import { FallbackSpinner } from "./FallbackSpinner"; export function SquiggleEditor(props) { return ( - }> + }> {() => { const LibComponent = require("@quri/squiggle-components").SquiggleEditor; From 111b4975ee5e4e52388ab0bf3605e803c9ba7846 Mon Sep 17 00:00:00 2001 From: Vyacheslav Matyukhin Date: Sat, 23 Jul 2022 22:03:50 +0400 Subject: [PATCH 4/5] prettify --- .../src/components/FallbackSpinner.jsx | 20 ++++++++++--------- .../src/components/FallbackSpinner.module.css | 10 +++++----- 2 files changed, 16 insertions(+), 14 deletions(-) diff --git a/packages/website/src/components/FallbackSpinner.jsx b/packages/website/src/components/FallbackSpinner.jsx index 1f5f8106..c4640802 100644 --- a/packages/website/src/components/FallbackSpinner.jsx +++ b/packages/website/src/components/FallbackSpinner.jsx @@ -3,13 +3,15 @@ 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 - }
; + 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 index c228836e..e3efc0aa 100644 --- a/packages/website/src/components/FallbackSpinner.module.css +++ b/packages/website/src/components/FallbackSpinner.module.css @@ -1,9 +1,9 @@ .container { - /* height must be set explicitly */ - width: 100%; - display: flex; - align-items: center; - justify-content: center; + /* height must be set explicitly */ + width: 100%; + display: flex; + align-items: center; + justify-content: center; } .icon { From dd778dab7655f6fd8c61e3f87d30fc923bfe7721 Mon Sep 17 00:00:00 2001 From: Vyacheslav Matyukhin Date: Sat, 23 Jul 2022 22:17:04 +0400 Subject: [PATCH 5/5] show spinner immediately --- packages/website/src/components/FallbackSpinner.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/website/src/components/FallbackSpinner.jsx b/packages/website/src/components/FallbackSpinner.jsx index c4640802..9a888124 100644 --- a/packages/website/src/components/FallbackSpinner.jsx +++ b/packages/website/src/components/FallbackSpinner.jsx @@ -3,7 +3,7 @@ import { RefreshIcon } from "@heroicons/react/solid"; import styles from "./FallbackSpinner.module.css"; export const FallbackSpinner = ({ height }) => { - const [show, setShow] = useState(false); + const [show, setShow] = useState(/* false */ true); useEffect(() => { setTimeout(() => { setShow(true);