From a595074494e382c98499ad7ddaacc5fcc3ce87a2 Mon Sep 17 00:00:00 2001
From: Julian Ammouche Ottosen <42567826+julian-ao@users.noreply.github.com>
Date: Wed, 24 Jul 2024 23:17:55 +0200
Subject: [PATCH] Added loading to period cards (#157)

* added loading to period cards

* Added skeleton loader to PeriodCard

---------

Co-authored-by: fredrir <fhansteen@gmail.com>
---
 components/PeriodCard.tsx | 13 +++++++++++++
 pages/apply.tsx           |  2 +-
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/components/PeriodCard.tsx b/components/PeriodCard.tsx
index b679235e..909470d9 100644
--- a/components/PeriodCard.tsx
+++ b/components/PeriodCard.tsx
@@ -14,6 +14,7 @@ const PeriodCard = ({ period }: Props) => {
   const { data: session } = useSession();
   const router = useRouter();
   const [hasApplied, setHasApplied] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
 
   useEffect(() => {
     const checkApplicationStatus = async () => {
@@ -24,6 +25,7 @@ const PeriodCard = ({ period }: Props) => {
         if (response.ok) {
           const data = await response.json();
           setHasApplied(data.exists);
+          setIsLoading(false);
         }
       }
     };
@@ -33,6 +35,17 @@ const PeriodCard = ({ period }: Props) => {
     }
   }, [period._id, session?.user?.owId]);
 
+  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">
       <div className="flex flex-col justify-between h-full p-4">
diff --git a/pages/apply.tsx b/pages/apply.tsx
index dc6f3f14..4fce96e6 100644
--- a/pages/apply.tsx
+++ b/pages/apply.tsx
@@ -74,7 +74,7 @@ const Apply = () => {
             <h3 className="text-4xl font-bold tracking-tight text-center dark:text-white">
               Nåværende opptaksperioder
             </h3>
-            <div className="flex flex-wrap justify-center max-w-full gap-5">
+            <div className="flex flex-col items-center max-w-full gap-5">
               {currentPeriods.map((period: periodType, index: number) => (
                 <PeriodCard key={index} period={period} />
               ))}