Added skeleton loader to PeriodCard

appKom · Jul 21, 2024 · 04dfb48 · 04dfb48
1 parent f8ec442
commit 04dfb48
Showing 1 changed file with 10 additions and 1 deletion.
diff --git a/components/PeriodCard.tsx b/components/PeriodCard.tsx
@@ -39,7 +39,16 @@ const PeriodCard = ({ period }: Props) => {
     router.push(`/application/${period._id}`);
   };
 
-  if (isLoading) return <p>Vent litt...</p>;
+  if (isLoading) {
+    return (
+      <div className="w-full max-w-md p-4 border border-gray-200 rounded shadow animate-pulse md:p-6 dark:border-gray-700 ">
+        <div className="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-48 mb-4"></div>
+        <div className="h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5"></div>
+        <div className="h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5"></div>
+        <div className="h-2 bg-gray-200 rounded-full dark:bg-gray-700"></div>
+      </div>
+    );
+  }
 
   return (
     <div className="relative w-full max-w-md mx-auto break-words border rounded-lg shadow dark:bg-gray-800 dark:border-gray-700 dark:text-white">