From e36dc4c0cd55641251e57026b4c1ee8dbf46203e Mon Sep 17 00:00:00 2001
From: Mats <64415243+mnyflot@users.noreply.github.com>
Date: Thu, 4 Apr 2024 10:28:43 +0200
Subject: [PATCH] 199 skeleton loading for projects page (#200)

* feat(frontend): :sparkles: make loading skeleton for projetcs overview page

* feat(frontend): :sparkles: add skeleton title

* refactor(frontend): :rotating_light: prettier
---
 frontend/src/app/projects/loading.tsx | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)
 create mode 100644 frontend/src/app/projects/loading.tsx

diff --git a/frontend/src/app/projects/loading.tsx b/frontend/src/app/projects/loading.tsx
new file mode 100644
index 0000000..727ecc0
--- /dev/null
+++ b/frontend/src/app/projects/loading.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+
+// Assuming the correct import path for the Skeleton component
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function Loading() {
+    // Create an array with the specified number of satellites
+    const skeletons = Array.from({ length: 21 }, (_, index) => (
+        <Skeleton key={index} className="flex h-96 w-80 flex-col" />
+    ));
+
+    return (
+        <div className="flex w-full origin-center flex-col justify-center">
+            <Skeleton className="my-10 h-24 w-1/3 self-center" />
+            <div className="mx-10 mt-4 flex flex-wrap justify-center gap-4">
+                {skeletons}
+            </div>
+        </div>
+    );
+}