Firmware loading placeholder

This commit is contained in:
Sacha Weatherstone 2021-12-28 20:46:50 +11:00
parent 16c073e3ee
commit 546780bfeb
4 changed files with 144 additions and 46 deletions

View file

@ -22,7 +22,7 @@
"react-dom": "^17.0.2",
"react-icons": "^4.3.1",
"react-json-pretty": "^2.2.0",
"swr": "^1.1.1",
"swr": "^1.1.2",
"url-search-params-polyfill": "^8.1.1"
},
"browserslist": {
@ -40,7 +40,7 @@
"devDependencies": {
"@docusaurus/module-type-aliases": "^2.0.0-beta.14",
"@tsconfig/docusaurus": "^1.0.4",
"@types/node": "^17.0.2",
"@types/node": "^17.0.5",
"@types/w3c-web-serial": "^1.0.2",
"typescript": "^4.5.4"
}

View file

@ -56,3 +56,94 @@ export const FirmwareCard = ({
</div>
);
};
export const PlaceholderFirmwareCard = (): JSX.Element => {
return (
<div
className="card"
style={{
width: "100%",
animation: "pulse 2s infinite",
transform: "scale(1)",
display: "flex",
gap: "1rem",
padding: "1rem",
}}
>
<div
style={{
display: "flex",
justifyContent: "space-between",
marginBottom: "1rem",
}}
>
<div
style={{
borderRadius: "0.4rem",
backgroundColor: "gray",
height: "2rem",
width: "8rem",
}}
/>
<div
style={{
borderRadius: "0.4rem",
backgroundColor: "gray",
marginTop: "1rem",
height: "1rem",
width: "8rem",
}}
/>
</div>
<div
className="card__body"
style={{
borderRadius: "0.4rem",
backgroundColor: "gray",
height: "3rem",
}}
/>
<a className="button disabled button--primary button--block">&nbsp;</a>
<div
style={{
borderRadius: "0.4rem",
backgroundColor: "gray",
width: "8rem",
height: "2rem",
}}
/>
<div
style={{
borderRadius: "0.4rem",
backgroundColor: "gray",
width: "11rem",
height: "1rem",
}}
/>
<div
style={{
borderRadius: "0.4rem",
backgroundColor: "gray",
width: "9rem",
height: "1rem",
}}
/>
<div
style={{
borderRadius: "0.4rem",
backgroundColor: "gray",
width: "13rem",
height: "1rem",
}}
/>
<div
style={{
borderRadius: "0.4rem",
backgroundColor: "gray",
width: "11rem",
height: "1rem",
}}
/>
</div>
);
};

View file

@ -7,7 +7,10 @@ import Layout from '@theme/Layout';
import { Release } from '../../utils/github';
import { fetcher } from '../../utils/swr';
import { FirmwareCard } from './_components/FirmwareCard';
import {
FirmwareCard,
PlaceholderFirmwareCard,
} from './_components/FirmwareCard';
const Firmware = (): JSX.Element => {
const { data, error } = useSWR<Release[]>(
@ -34,41 +37,45 @@ const Firmware = (): JSX.Element => {
paddingLeft: "0",
}}
>
{/* */}
<FirmwareCard
variant="Beta"
description="Tested feature set. For those who want stability."
release={beta}
/>
<FirmwareCard
variant="Alpha"
description="Upcomming changes for testing. For those who want new features."
release={alpha}
/>
{/* */}
{/* */}
<div className="card">
<div className="card__header">
<h3>Bleeding</h3>
</div>
<div className="card__body">
<p>
Latest successful CI build. For those who want to break
things.
</p>
</div>
<div className="card__footer" style={{ marginTop: "1rem" }}>
<a
href="https://nightly.link/meshtastic/meshtastic-device/workflows/main/master/built.zip"
className="button button--secondary button--block"
>
Download
</a>
</div>
</div>
{/* */}
{data && !error ? (
<>
<FirmwareCard
variant="Beta"
description="Tested feature set. For those who want stability."
release={beta}
/>
<FirmwareCard
variant="Alpha"
description="Upcomming changes for testing. For those who want new features."
release={alpha}
/>
<div className="card">
<div className="card__header">
<h3>Bleeding</h3>
</div>
<div className="card__body">
<p>
Latest successful CI build. For those who want to break
things.
</p>
</div>
<div className="card__footer" style={{ marginTop: "1rem" }}>
<a
href="https://nightly.link/meshtastic/meshtastic-device/workflows/main/master/built.zip"
className="button button--secondary button--block"
>
Download
</a>
</div>
</div>
</>
) : (
<>
<PlaceholderFirmwareCard />
<PlaceholderFirmwareCard />
<PlaceholderFirmwareCard />
</>
)}
</ul>
</div>
</main>

View file

@ -2581,10 +2581,10 @@
resolved "https://registry.yarnpkg.com/@types/node/-/node-15.14.9.tgz#bc43c990c3c9be7281868bbc7b8fdd6e2b57adfa"
integrity sha512-qjd88DrCxupx/kJD5yQgZdcYKZKSIGBVDIBE1/LTGcNm3d2Np/jxojkdePDdfnBHJc5W7vSMpbJ1aB7p/Py69A==
"@types/node@^17.0.2":
version "17.0.2"
resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.2.tgz#a4c07d47ff737e8ee7e586fe636ff0e1ddff070a"
integrity sha512-JepeIUPFDARgIs0zD/SKPgFsJEAF0X5/qO80llx59gOxFTboS9Amv3S+QfB7lqBId5sFXJ99BN0J6zFRvL9dDA==
"@types/node@^17.0.5":
version "17.0.5"
resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.5.tgz#57ca67ec4e57ad9e4ef5a6bab48a15387a1c83e0"
integrity sha512-w3mrvNXLeDYV1GKTZorGJQivK6XLCoGwpnyJFbJVK/aTBQUxOCaa/GlFAAN3OTDFcb7h5tiFG+YXCO2By+riZw==
"@types/parse-json@^4.0.0":
version "4.0.0"
@ -8125,10 +8125,10 @@ svgo@^2.5.0, svgo@^2.7.0:
picocolors "^1.0.0"
stable "^0.1.8"
swr@^1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/swr/-/swr-1.1.1.tgz#f13346cc830d7950183af57b341bfabb4cc90d43"
integrity sha512-ZpUHyU3N3snj2QGFeE2Fd3BXl1CVS6YQIQGb1ttPAkTmvwZqDyV3GRMNPsaeAYCBM74tfn4XbKx28FVQR0mS7Q==
swr@^1.1.2:
version "1.1.2"
resolved "https://registry.yarnpkg.com/swr/-/swr-1.1.2.tgz#9f3de2541931fccf03c48f322f1fc935a7551612"
integrity sha512-UsM0eo5T+kRPyWFZtWRx2XR5qzohs/LS4lDC0GCyLpCYFmsfTk28UCVDbOE9+KtoXY4FnwHYiF+ZYEU3hnJ1lQ==
tapable@^1.0.0:
version "1.1.3"