feat: skeleton loaders instead of spinner

aamirazad · Jun 29, 2024 · 7d1d1fa · 7d1d1fa
1 parent b152608
commit 7d1d1fa
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 11 deletions.
diff --git 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
@@ -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,23 +88,15 @@ 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) {
     return <h1>Failed to get document</h1>;
   }
 
   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">