Add Placeholder elements

src/css/custom.css

@@ -34,3 +34,19 @@ html[data-theme="dark"] .header-github-link:before {
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
     no-repeat;
 }
+@keyframes pulse {
+  0% {
+    transform: scale(0.98);
+    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
+  }
+
+  70% {
+    transform: scale(1);
+    box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
+  }
+
+  100% {
+    transform: scale(0.98);
+    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
+  }
+}

src/pages/showcase/_components/Card.tsx

@@ -31,3 +31,67 @@ export const Card = React.memo(({ network }: CardProps) => (
     </div>
   </div>
 ));
+
+export const PlaceholderCard = (): JSX.Element => (
+  <div
+    className="card"
+    style={{
+      animation: "pulse 2s infinite",
+      transform: "scale(1)",
+    }}
+  >
+    <div className="card__image">
+      <div
+        style={{
+          height: "150px",
+        }}
+      />
+    </div>
+    <div className="card__body">
+      <div
+        style={{
+          width: "30%",
+          height: "2rem",
+          borderRadius: "0.4rem",
+          backgroundColor: "gray",
+          marginBottom: "1rem",
+        }}
+      />
+      <div
+        style={{
+          width: "100%",
+          height: "1rem",
+          borderRadius: "0.4rem",
+          backgroundColor: "gray",
+          marginBottom: "0.5rem",
+        }}
+      />
+      <div
+        style={{
+          width: "100%",
+          height: "1rem",
+          borderRadius: "0.4rem",
+          backgroundColor: "gray",
+        }}
+      />
+    </div>
+    <div className="card__footer">
+      <a
+        className="button disabled button--primary button--block"
+        style={{ marginBottom: "0.5rem" }}
+      >
+        &nbsp;
+      </a>
+      <div>
+        <div
+          style={{
+            width: "4rem",
+            height: "1.5rem",
+            borderRadius: "0.4rem",
+            backgroundColor: "gray",
+          }}
+        />
+      </div>
+    </div>
+  </div>
+);

src/pages/showcase/_components/Filters.tsx

@@ -8,7 +8,7 @@ import { fetcher } from '@site/src/utils/swr';
 
 import { ShowcaseTag } from '../../../utils/apiTypes';
 // import { TagList, Tags } from '../../../utils/showcase';
-import { TagSelect } from './TagSelect';
+import { PlaceholderTagSelect, TagSelect } from './TagSelect';
 
 export const Filters = (): JSX.Element => {
   const { siteConfig } = useDocusaurusContext();
@@ -83,7 +83,7 @@ export const Filters = (): JSX.Element => {
           })}
         </ul>
       ) : (
-        <p>Loading...</p>
+        <PlaceholderTagSelect />
       )}
     </section>
   );

src/pages/showcase/_components/Network.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import JSONPretty from 'react-json-pretty';
 import useSWR from 'swr';
 
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
@@ -111,7 +112,12 @@ export const Network = ({ id }: NetworkProps): JSX.Element => {
     </div>
   ) : (
     <div>
-      <h1>Network not found</h1>
+      {error && (
+        <div>
+          <JSONPretty data={error} />
+        </div>
+      )}
+      {!data && <div>Loading...</div>}
     </div>
   );
 };

src/pages/showcase/_components/NetworkSection.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { Showcase } from '../../../utils/apiTypes';
-import { Card } from './Card';
+import { Card, PlaceholderCard } from './Card';
 
 interface NetworkSectionProps {
   title: string;
@@ -57,7 +57,9 @@ export const NetworkSection = ({
             {networks.length === 0 && <h2>No result</h2>}
           </>
         ) : (
-          <div>Loading...</div>
+          <div>
+            <PlaceholderCard />
+          </div>
         )}
       </ul>
     </div>

src/pages/showcase/_components/Networks.tsx

@@ -25,14 +25,14 @@ export const Networks = (): JSX.Element => {
 
   return (
     <section className="margin-top--lg margin-bottom--xl">
-      {data && !error ? (
+      {!error ? (
         selectedTags.length === 0 ? (
           <>
             <NetworkSection
               title="Our favorites"
               icon={<FiHeart />}
               iconColor="rgb(190 24 93)"
-              networks={data.filter((network) =>
+              networks={data?.filter((network) =>
                 network.tags.find((tag) => tag.label === "Favourite")
               )}
             />
@@ -45,12 +45,10 @@ export const Networks = (): JSX.Element => {
             networks={filteredNetworks}
           />
         )
-      ) : error ? (
+      ) : (
         <div>
           <JSONPretty data={error} />
         </div>
-      ) : (
-        <div>Loading...</div>
       )}
     </section>
   );

src/pages/showcase/_components/TagSelect.tsx

@@ -58,3 +58,54 @@ export const TagSelect = React.forwardRef<HTMLLabelElement, Props>(
     );
   }
 );
+
+export const PlaceholderTagSelect = (): JSX.Element => (
+  <div
+    style={{
+      boxSizing: "border-box",
+      position: "relative",
+      display: "inline-flex",
+      alignItems: "center",
+      height: "2rem",
+      marginTop: "0.5rem",
+      marginRight: "0.5rem",
+      fontSize: "0.875rem",
+      lineHeight: "1.25rem",
+      verticalAlign: "middle",
+      userSelect: "none",
+    }}
+  >
+    <div
+      style={{
+        width: "7rem",
+        height: "1.8rem",
+        borderRadius: "0.4rem",
+        backgroundColor: "gray",
+        animation: "pulse 2s infinite",
+        transform: "scale(1)",
+      }}
+    />
+    <div
+      style={{
+        width: "7rem",
+        height: "1.8rem",
+        borderRadius: "0.4rem",
+        backgroundColor: "gray",
+        animation: "pulse 2s infinite",
+        transform: "scale(1)",
+        marginLeft: 8,
+      }}
+    />
+    <div
+      style={{
+        width: "7rem",
+        height: "1.8rem",
+        borderRadius: "0.4rem",
+        backgroundColor: "gray",
+        animation: "pulse 2s infinite",
+        transform: "scale(1)",
+        marginLeft: 8,
+      }}
+    />
+  </div>
+);