diff --git a/components/PeriodCard.tsx b/components/PeriodCard.tsx
index bb8a30cd..5c21f2d5 100644
--- 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">