From 89ec0324b806e2cd9eabcd8a625473edc5c1f679 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20Alexander=20Str=C3=B8mseng?=
 <magnus.stromseng@gmail.com>
Date: Tue, 30 Apr 2024 17:05:53 +0200
Subject: [PATCH] 391 fix skeleton loading (#396)

* delete all loading except root

* add a loading animation

* remove wrong comment

* remove dev await timeout
---
 .../src/app/blog/[articleSlug]/loading.tsx    | 15 ------
 frontend/src/app/blog/loading.tsx             | 26 ---------
 frontend/src/app/loading.module.css           | 12 +++++
 frontend/src/app/loading.tsx                  | 54 +++++++------------
 .../app/projects/[projectSlug]/loading.tsx    | 13 -----
 .../satellites/[satelliteSlug]/loading.tsx    | 13 -----
 frontend/src/app/satellites/loading.tsx       | 23 --------
 7 files changed, 31 insertions(+), 125 deletions(-)
 delete mode 100644 frontend/src/app/blog/[articleSlug]/loading.tsx
 delete mode 100644 frontend/src/app/blog/loading.tsx
 create mode 100644 frontend/src/app/loading.module.css
 delete mode 100644 frontend/src/app/projects/[projectSlug]/loading.tsx
 delete mode 100644 frontend/src/app/satellites/[satelliteSlug]/loading.tsx
 delete mode 100644 frontend/src/app/satellites/loading.tsx

diff --git a/frontend/src/app/blog/[articleSlug]/loading.tsx b/frontend/src/app/blog/[articleSlug]/loading.tsx
deleted file mode 100644
index 0ccf7c1..0000000
--- a/frontend/src/app/blog/[articleSlug]/loading.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Skeleton } from "@shadcn/skeleton";
-import React from "react";
-
-export default function Loading() {
-    return (
-        <div className="m-5 flex h-full w-full items-center justify-center">
-            <div className="flex w-4/5 flex-col items-center justify-center gap-4 bg-background p-5">
-                <Skeleton className="h-16 w-full" />
-                <Skeleton className="h-8 w-full" />
-                <Skeleton className="h-96 w-full" />
-                <Skeleton className="h-96 w-1/2" />
-            </div>
-        </div>
-    );
-}
diff --git a/frontend/src/app/blog/loading.tsx b/frontend/src/app/blog/loading.tsx
deleted file mode 100644
index 0ecdef9..0000000
--- a/frontend/src/app/blog/loading.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { Skeleton } from "@shadcn/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">
-                <Skeleton className="my-10 h-96 w-3/4 self-center" />
-                <div className="flex h-10 w-1/3 flex-row items-center justify-center gap-4 self-center">
-                    <Skeleton className="h-full w-1/3 min-w-20 " />
-                    <Skeleton className="h-full w-1/3 min-w-20 " />
-                    <Skeleton className="h-full w-1/3 min-w-20 " />
-                </div>
-                <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 " />
-                </div>
-            </div>
-        </div>
-    );
-}
diff --git a/frontend/src/app/loading.module.css b/frontend/src/app/loading.module.css
new file mode 100644
index 0000000..fbf6535
--- /dev/null
+++ b/frontend/src/app/loading.module.css
@@ -0,0 +1,12 @@
+#small {
+    transform-origin: 50px 50px;
+    animation: moveAround 4s infinite linear;
+}
+@keyframes moveAround {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
diff --git a/frontend/src/app/loading.tsx b/frontend/src/app/loading.tsx
index ee0128c..6c732ad 100644
--- a/frontend/src/app/loading.tsx
+++ b/frontend/src/app/loading.tsx
@@ -1,42 +1,26 @@
-import {
-    Skeleton,
-    SkeletonHero,
-    SkeletonSection,
-    EmptySection,
-} from "@shadcn/skeleton";
 import React from "react";
+import styles from "./loading.module.css";
 
 export default function Loading() {
     return (
-        <div>
-            {/* Full width div, split into two equal portions */}
-            <div className="flex w-full flex-col-reverse gap-2 p-4 md:h-[calc(100vh-73px)] md:flex-row">
-                {/* Square */}
-                <div className="flex h-full w-full flex-col gap-2">
-                    <Skeleton className="h-24 w-full" />
-                    <div className="flex flex-row gap-2">
-                        <Skeleton className="h-24 w-full" />
-                        <Skeleton className="h-24 w-full" />
-                    </div>
-                    <div className="flex flex-row gap-2">
-                        <Skeleton className="h-24 w-full" />
-                        <Skeleton className="h-24 w-full" />
-                    </div>
-                    <div className="flex flex-row gap-2">
-                        <Skeleton className="h-24 w-full" />
-                        <Skeleton className="h-24 w-full" />
-                    </div>
-                    <Skeleton className="h-48 w-full" />
-                    <Skeleton className="h-48 w-full" />
-                </div>
-                <div className="h-full w-full">
-                    {/* Circle */}
-                    <Skeleton className="aspect-square w-full rounded-full" />
-                </div>
-            </div>
-            <SkeletonHero />
-            <SkeletonSection />
-            <EmptySection />
+        <div className="flex grow items-center justify-center">
+            <svg
+                className="h-1/4 w-1/4"
+                viewBox="0 0 100 100"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+            >
+                <g id="circles">
+                    <circle id="big" cx="50" cy="50" r="30" fill="#010101" />
+                    <circle
+                        id={styles.small}
+                        cx="90"
+                        cy="50"
+                        r="5"
+                        fill="#010101"
+                    />
+                </g>
+            </svg>
         </div>
     );
 }
diff --git a/frontend/src/app/projects/[projectSlug]/loading.tsx b/frontend/src/app/projects/[projectSlug]/loading.tsx
deleted file mode 100644
index 88f1dfd..0000000
--- a/frontend/src/app/projects/[projectSlug]/loading.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from "react";
-
-// Assuming the correct import path for the Skeleton component
-import { Skeleton } from "@shadcn/skeleton";
-
-export default function Loading() {
-    return (
-        <div className="flex w-full origin-center flex-col justify-center gap-4">
-            <Skeleton className="h-24 w-1/3 self-center" />
-            <Skeleton className="h-96 w-2/3 self-center" />
-        </div>
-    );
-}
diff --git a/frontend/src/app/satellites/[satelliteSlug]/loading.tsx b/frontend/src/app/satellites/[satelliteSlug]/loading.tsx
deleted file mode 100644
index a9a09ca..0000000
--- a/frontend/src/app/satellites/[satelliteSlug]/loading.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from "react";
-
-import { Skeleton } from "@shadcn/skeleton";
-
-export default function Loading() {
-    return (
-        <div className="flex w-full origin-center flex-col justify-center gap-4">
-            <Skeleton className="align-left h-16 w-1/4" />
-            <Skeleton className="h-80 w-full self-center" />
-            <Skeleton className="h-96 w-full self-center" />
-        </div>
-    );
-}
diff --git a/frontend/src/app/satellites/loading.tsx b/frontend/src/app/satellites/loading.tsx
deleted file mode 100644
index 3ed65d0..0000000
--- a/frontend/src/app/satellites/loading.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Skeleton } from "@shadcn/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>
-    );
-}