fix: skeleton loading with container queries

varianter · Nov 30, 2024 · 6eef9e6 · 6eef9e6
1 parent 226ba70
commit 6eef9e6
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 40 deletions.
diff --git a/src/components/employeeCard/EmployeeCard.tsx b/src/components/employeeCard/EmployeeCard.tsx
@@ -77,14 +77,28 @@ export default function EmployeeCard({
   );
 }
 
-export function EmployeeCardSkeleton() {
+export function EmployeeCardSkeleton({
+  background = "light",
+}: {
+  background?: "light" | "dark";
+}) {
+  const backgroundClass =
+    background === "dark" ? styles["employeeImage--dark"] : "";
   return (
-    <div className={`${styles.employeeWrapper} ${styles.skeletonCard}`}>
-      <div className={styles.employeeImage} />
-      <div className={`${styles.skeletonText} ${styles.skeletonName}`} />
-      <div className={`${styles.skeletonText} ${styles.skeletonTitle}`} />
-      <div className={`${styles.skeletonText} ${styles.skeletonContact}`} />
-      <div className={`${styles.skeletonText} ${styles.skeletonContact}`} />
+    <div className={styles.employeeWrapper}>
+      <div
+        className={`${styles.employeeWrapper__inner} ${styles.skeletonCard}`}
+      >
+        <div className={`${styles.employeeImage} ${backgroundClass}`} />
+        <div className={styles.employeeInfoWrapper}>
+          <div className={`${styles.skeletonText} ${styles.skeletonName}`} />
+          <div className={`${styles.skeletonText} ${styles.skeletonTitle}`} />
+          <div
+            className={`${styles.skeletonText} ${styles.skeletonAutoMargin} ${styles.skeletonContact}`}
+          />
+          <div className={`${styles.skeletonText} ${styles.skeletonContact}`} />
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/src/components/employeeCard/employeeCard.module.css b/src/components/employeeCard/employeeCard.module.css
@@ -4,18 +4,6 @@
   gap: 1rem;
 }
 
-.employeeImage {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  background-color: var(--background-bg-dark);
-  border-radius: 12px;
-  height: 125px;
-  width: 50%;
-  padding: 1rem;
-  position: relative;
-}
-
 .employeeInfoWrapper {
   display: flex;
   flex-direction: column;
@@ -51,25 +39,6 @@
   gap: 1rem;
   row-gap: var(--small, 6px);
 }
-@container employee (min-width: 380px) {
-  .employeeWrapper__inner {
-    flex-direction: row;
-  }
-  .employeeEmail {
-    margin-top: auto;
-  }
-  .employeeEmail,
-  .employeePhone,
-  .employeeRoleDot {
-    font-size: 1rem;
-  }
-  .employeePhone {
-    margin-top: 0.5rem;
-  }
-  .employeeInfoWrapper {
-    padding: 0.5rem 0;
-  }
-}
 
 .employeeInfoWrapper {
   display: flex;
@@ -90,6 +59,9 @@
   background-color: var(--background-bg-dark);
   border-radius: var(--medium, 12px);
 }
+.employeeImage--dark {
+  background-color: var(--background-bg-light-primary);
+}
 
 .employeeInfo {
   color: var(--stroke-tertiary, #5e5e5e);
@@ -124,7 +96,7 @@
   color: var(--text-tertiary, #5e5e5e);
 }
 
-/* Update the skeleton styles */
+/* Skeleton styles */
 .skeletonCard {
   animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
@@ -157,3 +129,27 @@
     opacity: 0.5;
   }
 }
+
+@container employee (min-width: 380px) {
+  .employeeWrapper__inner {
+    flex-direction: row;
+  }
+  .employeeEmail {
+    margin-top: auto;
+  }
+  .employeeEmail,
+  .employeePhone,
+  .employeeRoleDot {
+    font-size: 1rem;
+  }
+  .employeePhone {
+    margin-top: 0.5rem;
+  }
+  .employeeInfoWrapper {
+    padding: 0.5rem 0;
+  }
+
+  .skeletonAutoMargin {
+    margin-top: auto;
+  }
+}
diff --git a/src/components/sections/contact-box/ContactBox.tsx b/src/components/sections/contact-box/ContactBox.tsx
@@ -50,7 +50,9 @@ export default async function ContactBox({
         </div>
 
         <div>
-          <Suspense fallback={<EmployeeCardSkeleton />}>
+          <Suspense
+            fallback={<EmployeeCardSkeleton background={section.designMode} />}
+          >
             <ContactSelector
               employeesPageSlug={employeesPageSlug}
               contactPoints={contactPoints}