Added loading to period cards (#157)

* added loading to period cards * Added skeleton loader to PeriodCard --------- Co-authored-by: fredrir <[email protected]>
appKom · Jul 24, 2024 · a595074 · a595074
1 parent d057086
commit a595074
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 1 deletion.
diff --git 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
@@ -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} />
               ))}