add: skeleton member card

src/components/registry/MemberCardSkeleton.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+
+const MemberCardSkeleton = () => (
+  <div className="member-card">
+    <aside className="relative rounded-l-xl md:rounded-xl">
+      <div className="h-64 w-full rounded-xl animate-pulse bg-lightish dark:bg-darkish shadow lg:h-48 lg:w-72"></div>
+    </aside>
+
+    <section className="relative flex w-auto grow flex-col justify-between space-y-6 rounded-r-xl px-1 py-1 text-base font-normal lg:h-auto lg:max-h-full lg:w-3/4 lg:py-0 lg:pl-4 lg:pr-0">
+      <div className="flex h-48 flex-col justify-between">
+        <span className="bg-lightish dark:bg-darkish w-36 h-6 rounded animate-pulse" />
+        <span className="bg-lightish dark:bg-darkish w-24 h-4 rounded animate-pulse" />
+        <span className="bg-lightish dark:bg-darkish w-12 h-4 rounded animate-pulse" />
+        <span className="bg-lightish dark:bg-darkish w-48 h-16 rounded animate-pulse" />
+
+        <div className="flex items-center gap-2">
+          <button className="action bg-lightish dark:bg-darkish h-8 w-24 animate-pulse"></button>
+          <button className="action bg-lightish dark:bg-darkish h-8 w-24 animate-pulse"></button>
+          <button className="action bg-lightish dark:bg-darkish h-8 w-24 animate-pulse"></button>
+        </div>
+      </div>
+    </section>
+  </div>
+)
+
+export default MemberCardSkeleton

src/components/registry/index.ts

@@ -1,5 +1,6 @@
 import MemberCard from './MemberCard'
 import ClaimIdentity from './ClaimIdentity'
 import DataDisclaimer from './DataDisclaimer'
+import MemberCardSkeleton from './MemberCardSkeleton'
 
-export { MemberCard, ClaimIdentity, DataDisclaimer }
+export { MemberCard, ClaimIdentity, DataDisclaimer, MemberCardSkeleton }

src/pages/registry.tsx

@@ -3,7 +3,7 @@ import Layout from '../layout'
 import Seo from '../components/Seo'
 import RegistryAPI from '../api/registry'
 import { RegistryEntry } from '../@types'
-import { MemberCard, DataDisclaimer } from '../components/registry'
+import { MemberCard, DataDisclaimer, MemberCardSkeleton } from '../components/registry'
 import '../styles/pages/registry.css'
 
 const RegistryPage = () => {
@@ -31,12 +31,14 @@ const RegistryPage = () => {
         </header>
 
         <div className="member-list">
-          {members.map((member: RegistryEntry, memberIdx: number) => (
+          {members.length !== 0 ? members.map((member: RegistryEntry, memberIdx: number) => (
             <MemberCard
               key={`member-${memberIdx}`}
               member={member}
               updateMembers={updateMembers}
             />
+          )) : Array(4).fill(0).map((_, idx) => (
+            <MemberCardSkeleton />
           ))}
         </div>
       </main>

tailwind.config.js

@@ -13,9 +13,11 @@ module.exports = {
         dark: '#242731',
         darker: '#1e2028',
         darkest: '#1a1c23',
+        darkish: '#333640',
         light: '#f2f4f7',
         lighter: '#f7f7f7',
         lightest: '#fcfcfc',
+        lightish: '#ebedf0',
         navydark: '#1a202c',
       },
       maxWidth: {