Firmware loading placeholder

package.json

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

src/pages/firmware/_components/FirmwareCard.tsx

@@ -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>
+  );
+};

src/pages/firmware/index.tsx

@@ -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",
             }}
           >
-            {/*  */}
+            {data && !error ? (
-            <FirmwareCard
+              <>
-              variant="Beta"
+                <FirmwareCard
-              description="Tested feature set. For those who want stability."
+                  variant="Beta"
-              release={beta}
+                  description="Tested feature set. For those who want stability."
-            />
+                  release={beta}
-            <FirmwareCard
+                />
-              variant="Alpha"
+                <FirmwareCard
-              description="Upcomming changes for testing. For those who want new features."
+                  variant="Alpha"
-              release={alpha}
+                  description="Upcomming changes for testing. For those who want new features."
-            />
+                  release={alpha}
-
+                />
-            {/*  */}
+                <div className="card">
-            {/*  */}
+                  <div className="card__header">
-            <div className="card">
+                    <h3>Bleeding</h3>
-              <div className="card__header">
+                  </div>
-                <h3>Bleeding</h3>
+                  <div className="card__body">
-              </div>
+                    <p>
-              <div className="card__body">
+                      Latest successful CI build. For those who want to break
-                <p>
+                      things.
-                  Latest successful CI build. For those who want to break
+                    </p>
-                  things.
+                  </div>
-                </p>
+                  <div className="card__footer" style={{ marginTop: "1rem" }}>
-              </div>
+                    <a
-              <div className="card__footer" style={{ marginTop: "1rem" }}>
+                      href="https://nightly.link/meshtastic/meshtastic-device/workflows/main/master/built.zip"
-                <a
+                      className="button button--secondary button--block"
-                  href="https://nightly.link/meshtastic/meshtastic-device/workflows/main/master/built.zip"
+                    >
-                  className="button button--secondary button--block"
+                      Download
-                >
+                    </a>
-                  Download
+                  </div>
-                </a>
+                </div>
-              </div>
+              </>
-            </div>
+            ) : (
-
+              <>
-            {/*  */}
+                <PlaceholderFirmwareCard />
+                <PlaceholderFirmwareCard />
+                <PlaceholderFirmwareCard />
+              </>
+            )}
           </ul>
         </div>
       </main>

yarn.lock

@@ -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":
+"@types/node@^17.0.5":
-  version "17.0.2"
+  version "17.0.5"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.2.tgz#a4c07d47ff737e8ee7e586fe636ff0e1ddff070a"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.5.tgz#57ca67ec4e57ad9e4ef5a6bab48a15387a1c83e0"
-  integrity sha512-JepeIUPFDARgIs0zD/SKPgFsJEAF0X5/qO80llx59gOxFTboS9Amv3S+QfB7lqBId5sFXJ99BN0J6zFRvL9dDA==
+  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:
+swr@^1.1.2:
-  version "1.1.1"
+  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/swr/-/swr-1.1.1.tgz#f13346cc830d7950183af57b341bfabb4cc90d43"
+  resolved "https://registry.yarnpkg.com/swr/-/swr-1.1.2.tgz#9f3de2541931fccf03c48f322f1fc935a7551612"
-  integrity sha512-ZpUHyU3N3snj2QGFeE2Fd3BXl1CVS6YQIQGb1ttPAkTmvwZqDyV3GRMNPsaeAYCBM74tfn4XbKx28FVQR0mS7Q==
+  integrity sha512-UsM0eo5T+kRPyWFZtWRx2XR5qzohs/LS4lDC0GCyLpCYFmsfTk28UCVDbOE9+KtoXY4FnwHYiF+ZYEU3hnJ1lQ==
 
 tapable@^1.0.0:
   version "1.1.3"