From 5aa1ec4ffda11533d1b4383c34eb3c4833302c53 Mon Sep 17 00:00:00 2001
From: Aamir Azad <82281117+aamirazad@users.noreply.github.com>
Date: Sat, 6 Jul 2024 13:12:47 -0400
Subject: [PATCH] feat: skeleton loaders instead of spinner (#49)

---
 package.json                             |  2 +-
 src/app/paperless/document/[id]/page.tsx |  6 ++++-
 src/components/document-viewer.tsx       | 33 +++++++++++++++++-------
 tailwind.config.ts                       |  1 -
 4 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/package.json b/package.json
index 12bd6ae..b698f44 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,7 @@
     "db:migrate": "drizzle-kit migrate",
     "db:push": "drizzle-kit push",
     "db:studio": "drizzle-kit studio",
-    "dev": "next dev",
+    "dev": "next dev --turbo",
     "lint": "next lint",
     "start": "next start"
   },
diff --git a/src/app/paperless/document/[id]/page.tsx b/src/app/paperless/document/[id]/page.tsx
index 89eec4f..71f8717 100644
--- a/src/app/paperless/document/[id]/page.tsx
+++ b/src/app/paperless/document/[id]/page.tsx
@@ -5,5 +5,9 @@ export default function ModalDocumentPage({
 }: {
   params: { id: number };
 }) {
-  return <DocumentViewer id={params.id} />;
+  return (
+    <main className="h-full w-full">
+      <DocumentViewer id={params.id} />
+    </main>
+  );
 }
diff --git a/src/components/document-viewer.tsx b/src/components/document-viewer.tsx
index c84d51e..ae9a853 100644
--- a/src/components/document-viewer.tsx
+++ b/src/components/document-viewer.tsx
@@ -41,6 +41,29 @@ export default function DocumentViewer(props: { id: number }) {
   const [pdfUrl, setPdfUrl] = useState<string | null>(null);
   const [loading, setLoading] = useState(true);
 
+  const SkeletonLoader = () => (
+    <div className="flex h-4/5 w-full justify-center">
+      <div className="flex h-full min-w-0 justify-center md:w-1/2">
+        <div className="flex h-full w-full flex-col rounded-xl bg-slate-600/50">
+          <div className="m-4 flex flex-grow animate-pulse flex-col justify-center gap-8 md:m-8 md:flex-row md:gap-16">
+            {/* PDF Skeleton */}
+            <div className="h-full flex-shrink flex-grow rounded-lg bg-gray-400"></div>
+            {/* Button Skeleton */}
+            <div className="flex flex-shrink-0 flex-col gap-8">
+              <div className="h-10 w-24 rounded-md bg-gray-400"></div>
+              <div className="h-10 w-24 rounded-md bg-gray-400"></div>
+              <div className="h-10 w-24 rounded-md bg-gray-400"></div>
+              <div className="h-10 w-24 rounded-md bg-gray-400"></div>
+              <div className="h-10 w-24 rounded-md bg-gray-400"></div>
+              <div className="h-10 w-24 rounded-md bg-gray-400"></div>
+              <div className="h-10 w-24 rounded-md bg-gray-400"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+
   useEffect(() => {
     const fetchData = async () => {
       setLoading(true);
@@ -65,15 +88,7 @@ export default function DocumentViewer(props: { id: number }) {
   }, [props.id]); // Dependency array to refetch if id changes
 
   if (loading) {
-    return (
-      <div className="flex justify-center">
-        <div className="mx-auto max-w-sm rounded-lg bg-black p-4 shadow-md">
-          <LoadingSpinner className="w-min rounded-full text-xl font-bold">
-            Loading...
-          </LoadingSpinner>
-        </div>
-      </div>
-    );
+    return <SkeletonLoader />;
   }
 
   if (!pdfUrl) {
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 4ff1b0a..b0a0df9 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,5 +1,4 @@
 import type { Config } from "tailwindcss";
-const { fontFamily } = require("tailwindcss/defaultTheme");
 
 const config = {
   darkMode: ["class"],