131 loading skeleton for blog posts page (#196)

* feat(frontend): ✨ attempt creating a simple skeleton loading page for blogs * feat(frontend): ✨ add loading skeleton (unfinished) to blogs page * feat(frontend): ✨ blogs loading skeleton Co-authored-by: Mads Hermansen <madshermansen@users.noreply.github.com> * feat(frontend): ✨ add loading component to use Skeleton component --------- Co-authored-by: Mads Hermansen <madshermansen@users.noreply.github.com> Co-authored-by: Mads Hermansen <119772939+madshermansen@users.noreply.github.com>
NTNU-SmallSatLab · Apr 3, 2024 · 9ea697d · 9ea697d
1 parent f8cc8e0
commit 9ea697d
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 35 deletions.
diff --git a/frontend/src/app/blog/loading.tsx b/frontend/src/app/blog/loading.tsx
@@ -0,0 +1,26 @@
+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">
+                <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.tsx b/frontend/src/app/loading.tsx
@@ -1,6 +1,10 @@
-import { Skeleton } from "@/components/ui/skeleton";
+import {
+    Skeleton,
+    SkeletonHero,
+    SkeletonSection,
+    EmptySection,
+} from "@/components/ui/skeleton";
 import React from "react";
-import { cn } from "@/lib/utils";
 
 export default function Loading() {
     return (
@@ -30,40 +34,9 @@ export default function Loading() {
                     <Skeleton className="aspect-square w-full rounded-full" />
                 </div>
             </div>
-            <SkeleteonHero />
+            <SkeletonHero />
             <SkeletonSection />
             <EmptySection />
         </div>
     );
 }
-
-function EmptySection({
-    children,
-    className,
-}: {
-    children?: React.ReactNode;
-    className?: string;
-}) {
-    return <div className={cn("h-dvh w-full", className)}> {children}</div>;
-}
-
-function SkeletonSection() {
-    return <Skeleton className="h-dvh w-full" />;
-}
-
-function SkeleteonHero() {
-    return (
-        <div className="w-full py-64">
-            <div className="px-4">
-                <div className="flex flex-col items-center justify-center space-y-4">
-                    {/* Large Hero Text */}
-                    <Skeleton className="h-48 w-2/3" />
-                    {/* Small sub text */}
-                    <Skeleton className="h-4 w-1/3" />
-                    <Skeleton className="h-4 w-1/3" />
-                    <Skeleton className="h-4 w-1/3" />
-                </div>
-            </div>
-        </div>
-    );
-}
diff --git a/frontend/src/components/ui/skeleton.tsx b/frontend/src/components/ui/skeleton.tsx
@@ -13,4 +13,35 @@ function Skeleton({
     );
 }
 
-export { Skeleton };
+function EmptySection({
+    children,
+    className,
+}: {
+    children?: React.ReactNode;
+    className?: string;
+}) {
+    return <div className={cn("h-dvh w-full", className)}> {children}</div>;
+}
+
+function SkeletonSection() {
+    return <Skeleton className="h-dvh w-full" />;
+}
+
+function SkeletonHero() {
+    return (
+        <div className="w-full py-64">
+            <div className="px-4">
+                <div className="flex flex-col items-center justify-center space-y-4">
+                    {/* Large Hero Text */}
+                    <Skeleton className="h-48 w-2/3" />
+                    {/* Small sub text */}
+                    <Skeleton className="h-4 w-1/3" />
+                    <Skeleton className="h-4 w-1/3" />
+                    <Skeleton className="h-4 w-1/3" />
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export { Skeleton, EmptySection, SkeletonSection, SkeletonHero };