From 89a0c870e6759d7b07f97e079c03a07efd023dc7 Mon Sep 17 00:00:00 2001
From: Aamir Azad <aamirmazad@gmail.com>
Date: Sat, 29 Jun 2024 11:24:08 +0530
Subject: [PATCH 1/2] feat: skeleton loaders instead of spinner

---
 src/app/paperless/document/[id]/page.tsx |  6 +++-
 src/components/document-viewer.tsx       | 35 +++++++++++++++++-------
 2 files changed, 30 insertions(+), 11 deletions(-)

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..3fb19c6 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 justify-center w-full">
+      <div className="flex h-full md:w-1/2 min-w-0 justify-center">
+        <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-300"></div>
+            {/* Button Skeleton */}
+            <div className="flex flex-shrink-0 flex-col gap-8">
+              <div className="h-10 w-24 rounded-md bg-gray-300"></div>
+              <div className="h-10 w-24 rounded-md bg-gray-300"></div>
+              <div className="h-10 w-24 rounded-md bg-gray-300"></div>
+              <div className="h-10 w-24 rounded-md bg-gray-300"></div>
+              <div className="h-10 w-24 rounded-md bg-gray-300"></div>
+              <div className="h-10 w-24 rounded-md bg-gray-300"></div>
+              <div className="h-10 w-24 rounded-md bg-gray-300"></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) {
@@ -81,7 +96,7 @@ export default function DocumentViewer(props: { id: number }) {
   }
 
   return (
-    <div className="flex h-full w-full min-w-0 justify-center">
+    <div className="flex min-w-0 justify-center">
       <div className="flex h-4/5 flex-col rounded-xl bg-slate-600/50 md:w-1/2">
         <div className="m-4 flex flex-grow flex-col justify-center gap-8 md:m-8 md:flex-row md:gap-16">
           <div className="h-full flex-shrink flex-grow">

From 0923645d23bff64768c6bb32462c8109308fc638 Mon Sep 17 00:00:00 2001
From: Aamir Azad <aamirmazad@gmail.com>
Date: Sat, 29 Jun 2024 19:01:20 +0530
Subject: [PATCH 2/2] Fix coloring and formating of document viewer

---
 package.json                       |  2 +-
 src/components/document-viewer.tsx | 22 +++++++++++-----------
 tailwind.config.ts                 |  1 -
 3 files changed, 12 insertions(+), 13 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/components/document-viewer.tsx b/src/components/document-viewer.tsx
index 3fb19c6..ae9a853 100644
--- a/src/components/document-viewer.tsx
+++ b/src/components/document-viewer.tsx
@@ -42,21 +42,21 @@ export default function DocumentViewer(props: { id: number }) {
   const [loading, setLoading] = useState(true);
 
   const SkeletonLoader = () => (
-    <div className="flex h-4/5 justify-center w-full">
-      <div className="flex h-full md:w-1/2 min-w-0 justify-center">
+    <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-300"></div>
+            <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-300"></div>
-              <div className="h-10 w-24 rounded-md bg-gray-300"></div>
-              <div className="h-10 w-24 rounded-md bg-gray-300"></div>
-              <div className="h-10 w-24 rounded-md bg-gray-300"></div>
-              <div className="h-10 w-24 rounded-md bg-gray-300"></div>
-              <div className="h-10 w-24 rounded-md bg-gray-300"></div>
-              <div className="h-10 w-24 rounded-md bg-gray-300"></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 className="h-10 w-24 rounded-md bg-gray-400"></div>
             </div>
           </div>
         </div>
@@ -96,7 +96,7 @@ export default function DocumentViewer(props: { id: number }) {
   }
 
   return (
-    <div className="flex min-w-0 justify-center">
+    <div className="flex h-full w-full min-w-0 justify-center">
       <div className="flex h-4/5 flex-col rounded-xl bg-slate-600/50 md:w-1/2">
         <div className="m-4 flex flex-grow flex-col justify-center gap-8 md:m-8 md:flex-row md:gap-16">
           <div className="h-full flex-shrink flex-grow">
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"],