From b14acab08fe3df5c2a6a22ffd910d2da51a5e29b Mon Sep 17 00:00:00 2001
From: ZareMate <0.zaremate@gmail.com>
Date: Mon, 19 May 2025 08:41:09 +0200
Subject: [PATCH] feat: add loading skeleton components for improved user
 experience during data fetching

---
 src/app/LoadingSkeleton.tsx       | 21 +++++++++++++
 src/app/loading.tsx               |  6 ++++
 src/app/page.tsx                  |  5 ++-
 src/app/share/LoadingSkeleton.tsx | 51 +++++++++++++++++++++++++++++++
 src/app/share/loading.tsx         |  6 ++++
 src/server/api/routers/file.ts    |  0
 6 files changed, 88 insertions(+), 1 deletion(-)
 create mode 100644 src/app/LoadingSkeleton.tsx
 create mode 100644 src/app/loading.tsx
 create mode 100644 src/app/share/LoadingSkeleton.tsx
 create mode 100644 src/app/share/loading.tsx
 create mode 100644 src/server/api/routers/file.ts

diff --git a/src/app/LoadingSkeleton.tsx b/src/app/LoadingSkeleton.tsx
new file mode 100644
index 0000000..fdfd7ce
--- /dev/null
+++ b/src/app/LoadingSkeleton.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+
+const LoadingSkeleton = () => (
+  <div className="container flex flex-col items-center justify-center gap-12 px-4 py-16 animate-pulse">
+    {/* Title Skeleton */}
+    <div className="h-16 w-80 rounded bg-white/20 mb-4" />
+    {/* FileGrid Skeleton */}
+    <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 w-full max-w-4xl">
+      {[...Array(6)].map((_, i) => (
+        <div key={i} className="h-32 rounded bg-white/10" />
+      ))}
+    </div>
+    {/* UploadForm Skeleton */}
+    <div className="mt-8 w-full max-w-md flex flex-col gap-4">
+      <div className="h-10 rounded bg-white/20" />
+      <div className="h-10 rounded bg-white/10" />
+    </div>
+  </div>
+);
+
+export default LoadingSkeleton;
\ No newline at end of file
diff --git a/src/app/loading.tsx b/src/app/loading.tsx
new file mode 100644
index 0000000..ce3020f
--- /dev/null
+++ b/src/app/loading.tsx
@@ -0,0 +1,6 @@
+import LoadingSkeleton from './LoadingSkeleton';
+
+export default function Loading() {
+  // You can add any UI inside Loading, including a Skeleton.
+  return <LoadingSkeleton />
+}
\ No newline at end of file
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 534bb04..e76b85e 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -4,6 +4,7 @@ import { HydrateClient } from "~/trpc/server";
 import FileGrid from "~/app/_components/FileGrid";
 import UploadForm from "~/app/_components/UploadForm";
 import { Toaster } from "react-hot-toast";
+import { Suspense } from "react";
 
 export default async function Home() {
   const session = await auth();
@@ -53,7 +54,9 @@ export default async function Home() {
           {/* Conditionally render FileGrid and UploadForm if the user is logged in */}
           {session?.user ? (
             <>
-              <FileGrid session={session} />
+              <Suspense fallback={<p className="text-center text-2xl text-white">Loading...</p>}>
+                <FileGrid session={session} />
+              </Suspense>
               <UploadForm />
             </>
           ) : (
diff --git a/src/app/share/LoadingSkeleton.tsx b/src/app/share/LoadingSkeleton.tsx
new file mode 100644
index 0000000..dfddfdc
--- /dev/null
+++ b/src/app/share/LoadingSkeleton.tsx
@@ -0,0 +1,51 @@
+import React, { Suspense } from "react";
+import { HomeButton } from "~/app/_components/HomeButton"; // Import the client component
+import { Toaster } from "react-hot-toast";
+import {
+  FileActionsContainer,
+} from "~/app/_components/ActionButtons"; // Import the client component
+
+const LoadingSkeleton: React.FC = () => (
+    <main className="flex min-h-screen flex-col items-center justify-center bg-gradient-to-b from-[#2e026d] to-[#15162c] text-white">
+      <div className="absolute top-4 left-4">
+         <HomeButton />
+      </div>
+      <Toaster position="top-right" reverseOrder={false} />
+      <div className="container flex flex-col items-center gap-12 px-4 py-16">
+        <h1 className="text-5xl font-extrabold tracking-tight sm:text-[5rem]">
+          <span className="text-[hsl(280,100%,70%)]">File</span> Details
+        </h1>
+        <div className="mt-6">
+          {" Loading..."}
+        </div>
+        <div className="w-full max-w-md rounded-lg bg-white/10 p-6 text-white shadow-md">
+          <p>
+            <strong>Name:</strong>{" Loading..."}
+          </p>
+          <p>
+            <strong>Size:</strong>{" Loading..."}
+          </p>
+          <p>
+            <strong>Owner:</strong>{" Loading..."}
+          </p>
+          <p>
+            <strong>Upload Date:</strong>{" Loading..."}
+          </p>
+          <div>
+            <strong>Description:</strong>{" Loading..."}
+          </div>
+          <div className="mt-4 flex justify-center">
+            <FileActionsContainer
+              fileId={""}
+              fileName={""}
+              fileUrl={""}
+              isOwner={false}
+              isPublic={false}
+            />
+          </div>
+        </div>
+      </div>
+    </main>
+);
+
+export default LoadingSkeleton;
\ No newline at end of file
diff --git a/src/app/share/loading.tsx b/src/app/share/loading.tsx
new file mode 100644
index 0000000..ce3020f
--- /dev/null
+++ b/src/app/share/loading.tsx
@@ -0,0 +1,6 @@
+import LoadingSkeleton from './LoadingSkeleton';
+
+export default function Loading() {
+  // You can add any UI inside Loading, including a Skeleton.
+  return <LoadingSkeleton />
+}
\ No newline at end of file
diff --git a/src/server/api/routers/file.ts b/src/server/api/routers/file.ts
new file mode 100644
index 0000000..e69de29