feat: show a fun fact while pdf is loading

src/components/document-viewer.tsx

@@ -4,6 +4,7 @@ import { useState, useEffect, useRef } from "react";
 import { Button } from "./ui/button";
 import { useRouter } from "next/navigation";
 import { getUserData } from "@/app/actions";
+import type { AdviceAPIType } from "@/types";
 
 export async function getPaperlessDocument(
   documentId: number,
@@ -40,16 +41,43 @@ export default function DocumentViewer(props: { id: number }) {
   const [pdfUrl, setPdfUrl] = useState<string | null>(null);
   const [loading, setLoading] = useState(true);
   const fetchDataCalledRef = useRef(false);
+  const [advice, setAdvice] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchAdvice = async () => {
+      try {
+        const response = await fetch("https://api.adviceslip.com/advice");
+        if (!response.ok) {
+          throw new Error("Network response was not ok");
+        }
+        const data = (await response.json()) as AdviceAPIType;
+        setAdvice(data.slip.advice);
+      } catch (error) {
+        console.error("Failed to fetch advice:", error);
+      }
+    };
+
+    void fetchAdvice();
+  }, []);
 
   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">
+          <div className="m-4 flex h-full flex-grow 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>
+            <div className="relative flex h-full flex-shrink flex-grow items-center justify-center rounded-lg">
+              {/* Pulsing Background */}
+              <div className="absolute inset-0 animate-pulse rounded-lg bg-gray-400"></div>
+              {/* Text Overlay */}
+              <div className="z-10 flex items-center justify-center">
+                <div className="text-center text-black">
+                  {advice ? advice : "Loading advice..."}
+                </div>
+              </div>
+            </div>
             {/* Button Skeleton */}
-            <div className="flex flex-shrink-0 flex-col gap-8">
+            <div className="flex flex-shrink-0 animate-pulse 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>

src/types/index.ts

@@ -67,3 +67,10 @@ export type PaperlessDocumentsType = {
     };
   }[];
 };
+
+export type AdviceAPIType = {
+  slip: {
+    slip_id: number;
+    advice: string;
+  };
+};