From 814a6174e3d26003d8eac496d1393f7896c51803 Mon Sep 17 00:00:00 2001
From: Doug Andrade <dandrademv@gmail.com>
Date: Tue, 13 Jun 2023 23:28:25 -0400
Subject: [PATCH] improved loading state for /document/id

---
 .../(dashboard)/documents/[id]/loading.tsx    | 28 +++++++++++++++++++
 .../app/(dashboard)/documents/[id]/page.tsx   |  2 +-
 .../(dashboard)/pdf-viewer/pdf-viewer.tsx     |  6 ++--
 .../src/components/forms/edit-document.tsx    |  2 +-
 4 files changed, 33 insertions(+), 5 deletions(-)
 create mode 100644 apps/web/src/app/(dashboard)/documents/[id]/loading.tsx

diff --git a/apps/web/src/app/(dashboard)/documents/[id]/loading.tsx b/apps/web/src/app/(dashboard)/documents/[id]/loading.tsx
new file mode 100644
index 000000000..e68b149dc
--- /dev/null
+++ b/apps/web/src/app/(dashboard)/documents/[id]/loading.tsx
@@ -0,0 +1,28 @@
+import Link from 'next/link';
+
+import { ChevronLeft, Loader } from 'lucide-react';
+
+export default function Loading() {
+  return (
+    <div className="mx-auto -mt-4 flex w-full max-w-screen-xl flex-col px-4 md:px-8">
+      <Link href="/documents" className="flex grow-0 items-center text-[#7AC455] hover:opacity-80">
+        <ChevronLeft className="mr-2 inline-block h-5 w-5" />
+        Documents
+      </Link>
+      <h1 className="mt-4 max-w-xs grow-0 truncate text-2xl font-semibold md:text-3xl">
+        Loading Document...
+      </h1>
+      <div className="mt-8 grid min-h-[80vh] w-full grid-cols-12 gap-x-8">
+        <div className="dark:bg-background border-documenso col-span-7 rounded-xl border-2 bg-white/50 p-2 before:rounded-xl">
+          <div className="flex min-h-[80vh] flex-col items-center justify-center">
+            <Loader className="text-documenso h-12 w-12 animate-spin" />
+
+            <p className="text-muted-foreground mt-4">Loading document...</p>
+          </div>
+        </div>
+
+        <div className="bg-background border-documenso col-span-5  rounded-xl border-2 before:rounded-xl" />
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/app/(dashboard)/documents/[id]/page.tsx b/apps/web/src/app/(dashboard)/documents/[id]/page.tsx
index e84d463e4..a83e2949a 100644
--- a/apps/web/src/app/(dashboard)/documents/[id]/page.tsx
+++ b/apps/web/src/app/(dashboard)/documents/[id]/page.tsx
@@ -38,7 +38,7 @@ export default async function DocumentPage({ params }: DocumentPageProps) {
     <div className="mx-auto -mt-4 w-full max-w-screen-xl px-4 md:px-8">
       <Link href="/documents" className="flex items-center text-[#7AC455] hover:opacity-80">
         <ChevronLeft className="mr-2 inline-block h-5 w-5" />
-        Dashboard
+        Documents
       </Link>
 
       <h1
diff --git a/apps/web/src/components/(dashboard)/pdf-viewer/pdf-viewer.tsx b/apps/web/src/components/(dashboard)/pdf-viewer/pdf-viewer.tsx
index f35e5d48a..998a54f1a 100644
--- a/apps/web/src/components/(dashboard)/pdf-viewer/pdf-viewer.tsx
+++ b/apps/web/src/components/(dashboard)/pdf-viewer/pdf-viewer.tsx
@@ -120,10 +120,10 @@ export const PDFViewer = ({ className, document, onPageClick, ...props }: PDFVie
         onLoadSuccess={(d) => onDocumentLoaded(d)}
         externalLinkTarget="_blank"
         loading={
-          <div className="flex min-h-[80vh] flex-col items-center justify-center bg-white/50">
-            <Loader className="h-12 w-12 animate-spin text-slate-500" />
+          <div className="dark:bg-background flex min-h-[80vh] flex-col items-center justify-center bg-white/50">
+            <Loader className="text-documenso h-12 w-12 animate-spin" />
 
-            <p className="mt-4 text-slate-500">Loading document...</p>
+            <p className="text-muted-foreground mt-4">Loading document...</p>
           </div>
         }
       >
diff --git a/apps/web/src/components/forms/edit-document.tsx b/apps/web/src/components/forms/edit-document.tsx
index 2529f01de..25dda7695 100644
--- a/apps/web/src/components/forms/edit-document.tsx
+++ b/apps/web/src/components/forms/edit-document.tsx
@@ -22,7 +22,7 @@ const PDFViewer = dynamic(async () => import('~/components/(dashboard)/pdf-viewe
   ssr: false,
   loading: () => (
     <div className="dark:bg-background flex min-h-[80vh] flex-col items-center justify-center bg-white/50">
-      <Loader className="text-muted-foreground h-12 w-12 animate-spin" />
+      <Loader className="text-documenso h-12 w-12 animate-spin" />
 
       <p className="text-muted-foreground mt-4">Loading document...</p>
     </div>