Stop refetching and seperate components

src/app/paperless/document/[id]/page.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useRouter } from "next/navigation";
+import BodyMessage from "@/components/body-message";
 
 export default function FullPageDocumentPage({
   params,
@@ -11,7 +12,7 @@ export default function FullPageDocumentPage({
   router.replace(`/paperless/details/${params.id}`);
   return (
     <main className="h-full w-full">
-      <h1>Redirecting ...</h1>
+      <BodyMessage>Redirecting ...</BodyMessage>
     </main>
   );
 }

src/app/paperless/page.tsx

@@ -97,6 +97,8 @@ function DocumentsPage() {
     },
     // This ensures the query does not run if there's no query string
     enabled: !!query,
+    staleTime: 60 * 1000, // 1 minute in milliseconds
+    refetchOnWindowFocus: false,
   });
 
   const userData = useQuery({
@@ -105,6 +107,8 @@ function DocumentsPage() {
       const data = await getUserData();
       return data;
     },
+    staleTime: 24 * 60 * 60 * 1000, // 1 day in milliseconds
+    refetchOnWindowFocus: false,
   });
 
   if (!query) {

src/components/audio-preview.tsx

@@ -30,6 +30,7 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { toast } from "sonner";
+import BodyMessage from "./body-message";
 
 const queryClient = new QueryClient();
 
@@ -123,31 +124,15 @@ function AudioInfo({ id }: AudioInfoProps) {
   }
 
   if (userDataError ?? !userData) {
-    return (
-      <div className="flex justify-center">
-        <div className="mx-auto max-w-sm rounded-lg bg-slate-700 p-4 shadow-md">
-          <h1 className="w-full text-center text-2xl font-bold">
-            Error loading user data
-          </h1>
-        </div>
-      </div>
-    );
+    return <BodyMessage>Error loading user data</BodyMessage>;
   }
 
   if (isRecordingDataLoading) {
     return <SkeletonLoader />;
   }
 
   if (recordingDataError ?? !recordingData) {
-    return (
-      <div className="flex justify-center">
-        <div className="mx-auto max-w-sm rounded-lg bg-slate-700 p-4 shadow-md">
-          <h1 className="w-full text-center text-2xl font-bold">
-            Error loading recording data
-          </h1>
-        </div>
-      </div>
-    );
+    return <BodyMessage>Error loading recording data</BodyMessage>;
   }
 
   const decodedName = decodeURIComponent(recordingData.fileName);

src/components/body-message.tsx

@@ -0,0 +1,13 @@
+export default function BodyMessage({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="flex justify-center">
+      <div className="mx-auto max-w-sm rounded-lg bg-slate-700 p-4 shadow-md">
+        <h1 className="w-full text-center text-2xl font-bold">{children}</h1>
+      </div>
+    </div>
+  );
+}

src/components/document-details.tsx

@@ -115,6 +115,8 @@ function DocumentDetailsInner(props: { id: number }) {
   const { data: userData, isLoading: isUserDataLoading } = useQuery({
     queryKey: ["userData"],
     queryFn: fetchUserData,
+    staleTime: 24 * 60 * 60 * 1000, // 1 day in milliseconds
+    refetchOnWindowFocus: false,
   });
 
   const { data: pdfUrl, isLoading: isPdfUrlLoading } = useQuery({
@@ -123,6 +125,7 @@ function DocumentDetailsInner(props: { id: number }) {
       return await getPaperlessDocument(props.id, userData!);
     },
     enabled: !!userData,
+    refetchOnWindowFocus: false,
   });
 
   const { data: documentData, isLoading: isdocumentDataLoading } = useQuery({
@@ -131,6 +134,7 @@ function DocumentDetailsInner(props: { id: number }) {
       return await getPaperlessDocumentData(props.id, userData!);
     },
     enabled: !!userData,
+    refetchOnWindowFocus: false,
   });
 
   if (isUserDataLoading || isdocumentDataLoading || isPdfUrlLoading) {
@@ -146,7 +150,6 @@ function DocumentDetailsInner(props: { id: number }) {
       <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>{documentData?.title}</div>
-          <DocumentPreview id={props.id} />
           <div className="flex flex-col gap-8">
             <Button
               onClick={(e) => {

src/components/document-preview.tsx

@@ -91,6 +91,7 @@ function Preview(props: { id: number }) {
       return await getPaperlessThumbnail(props.id, userData!);
     },
     enabled: !!userData,
+    refetchOnWindowFocus: false,
   });
 
   if (isPdfUrlLoading ?? isUserDataLoading) {
@@ -100,7 +101,7 @@ function Preview(props: { id: number }) {
   if (!pdfUrl || !userData) {
     return <BodyMessage>Failed to get document</BodyMessage>;
   }
-  return <img src={pdfUrl} alt="Document Preview" />;
+  return <img src={pdfUrl} alt="Document Preview" className="size-fit" />;
 }
 
 export default function DocumentPreview(props: { id: number }) {