From 82e34cc4aaa5469f7681ecc9b93e75679c665e3a Mon Sep 17 00:00:00 2001
From: Mats <64415243+mnyflot@users.noreply.github.com>
Date: Thu, 4 Apr 2024 10:18:30 +0200
Subject: [PATCH] feat(frontend): :sparkles: loading skeleton for satellites
 page (#198)

---
 frontend/src/app/satellites/loading.tsx | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)
 create mode 100644 frontend/src/app/satellites/loading.tsx

diff --git a/frontend/src/app/satellites/loading.tsx b/frontend/src/app/satellites/loading.tsx
new file mode 100644
index 0000000..c0fe957
--- /dev/null
+++ b/frontend/src/app/satellites/loading.tsx
@@ -0,0 +1,23 @@
+import { Skeleton } from "@/components/ui/skeleton";
+import React from "react";
+
+export default function Loading() {
+    return (
+        <div>
+            {/* Full width div, split into three equal portions */}
+            <div className="flex w-full origin-center flex-col justify-center">
+                <div className="my-10 flex w-full origin-center flex-row flex-wrap justify-center gap-4">
+                    <Skeleton className="flex h-96 w-1/4 flex-col " />
+                    <Skeleton className="flex h-96 w-1/4 flex-col " />
+                    <Skeleton className="flex h-96 w-1/4 flex-col " />
+                    <Skeleton className="flex h-96 w-1/4 flex-col " />
+                    <Skeleton className="flex h-96 w-1/4 flex-col " />
+                    <Skeleton className="flex h-96 w-1/4 flex-col " />
+                    <Skeleton className="flex h-96 w-1/4 flex-col " />
+                    <Skeleton className="flex h-96 w-1/4 flex-col " />
+                    <Skeleton className="flex h-96 w-1/4 flex-col " />
+                </div>
+            </div>
+        </div>
+    );
+}