From 261c0c6f72e6234c763dcff5491797a6b70844a8 Mon Sep 17 00:00:00 2001
From: Yogesh <yogeshkumar.n1234@gmail.com>
Date: Fri, 17 Apr 2026 19:00:59 +0530
Subject: [PATCH 1/2] fix: mount viewport loader

---
 src/components/newPdfViewer.tsx | 61 +++++++++++++++++----------------
 1 file changed, 32 insertions(+), 29 deletions(-)

diff --git a/src/components/newPdfViewer.tsx b/src/components/newPdfViewer.tsx
index aee6105..93e5c85 100644
--- a/src/components/newPdfViewer.tsx
+++ b/src/components/newPdfViewer.tsx
@@ -15,7 +15,6 @@ import { downloadFile } from "../lib/utils/download";
 import { Button } from "./ui/button";
 import ShareButton from "./ShareButton";
 import ReportButton from "./ReportButton";
-import path from 'path/win32';
 
 interface ControlProps {
   documentId: string;
@@ -255,7 +254,6 @@ function WheelZoom({ documentId, viewerRef }: WheelZoomProps) {
   const rafId = useRef<number | null>(null);
   const curZoom = useRef(1);
 
-  // Stay in sync with zoom from anywhere (buttons, keyboard, etc.)
   useEffect(() => {
     if (!zoomProv) return;
     curZoom.current = zoomProv.getState().currentZoomLevel;
@@ -283,7 +281,7 @@ function WheelZoom({ documentId, viewerRef }: WheelZoomProps) {
           zoomProv.requestZoom(target)
           curZoom.current = target;
         } else {
-          zoomProv.requestZoomBy(clamped); // mouse wheel, relative is fine
+          zoomProv.requestZoomBy(clamped);
         }
 
         accumulatedDelta.current = 0;
@@ -351,9 +349,13 @@ export default function PDFViewer({ url, name }: PdfViewerProps) {
     }),
   ], [url, name]);
 
-  if (isLoading || !engine) {
-    return <div>Loading PDF Engine...</div>;
-  }
+if (isLoading || !engine) {
+  return (
+    <div style={{ height: "100dvh", width: "100%", backgroundColor: "#070114", display: "flex", alignItems: "center", justifyContent: "center" }}>
+      <span style={{ color: "#fff", fontSize: 16 }}>Loading PDF…</span>
+    </div>
+  );
+}
 
   return (
     <div
@@ -371,32 +373,34 @@ export default function PDFViewer({ url, name }: PdfViewerProps) {
                 toggleFullscreen={toggleFullscreen}
                 isFullscreen={isFullscreen}
                 onDownload={handleDownload}
-                forceMobile={true} // pass the isMobile flag to Controls`
+                forceMobile={true}
                 isMobile={isMobile}
                 isSmall={isSmall}
               />}
               <DocumentContent documentId={activeDocumentId}>
-                {({ isLoaded }) =>
-                  isLoaded && (
-                    <Viewport
-                      documentId={activeDocumentId}
-                      style={{ backgroundColor: "#070114" }}
-                    >
-                      <Scroller
-                        documentId={activeDocumentId}
-                        renderPage={({ width, height, pageIndex }) => (
-                          <div style={{ width, height }}>
-                            <RenderLayer
-                              documentId={activeDocumentId}
-                              pageIndex={pageIndex}
-                            />
-                          </div>
-                        )}
-                      />
-                    </Viewport>
-                  )
-                }
-              </DocumentContent>
+  {({ isLoaded }) => (
+    <>
+      {!isLoaded && (
+        <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", backgroundColor: "#070114", zIndex: 10 }}>
+          <span style={{ color: "#fff", fontSize: 16 }}>Loading PDF…</span>
+        </div>
+      )}
+      <Viewport
+        documentId={activeDocumentId}
+        style={{ backgroundColor: "#070114", visibility: isLoaded ? "visible" : "hidden" }}
+      >
+        <Scroller
+          documentId={activeDocumentId}
+          renderPage={({ width, height, pageIndex }) => (
+            <div style={{ width, height }}>
+              <RenderLayer documentId={activeDocumentId} pageIndex={pageIndex} />
+            </div>
+          )}
+        />
+      </Viewport>
+    </>
+  )}
+</DocumentContent>
               
               {(!isMobile || isFullscreen) && (
                 <Controls
@@ -409,7 +413,6 @@ export default function PDFViewer({ url, name }: PdfViewerProps) {
                   isSmall={isSmall}
                 />
               )}
-              
             </>
           )
         }

From 40ab9e5fa89eed7e4c4bf7f50f55873a8c530cca Mon Sep 17 00:00:00 2001
From: Yogesh <yogeshkumar.n1234@gmail.com>
Date: Fri, 17 Apr 2026 22:43:05 +0530
Subject: [PATCH 2/2] fix: loader comp, smooth transition, loading message

---
 src/components/newPdfViewer.tsx | 61 +++++++++++++++++++++++++++------
 1 file changed, 51 insertions(+), 10 deletions(-)

diff --git a/src/components/newPdfViewer.tsx b/src/components/newPdfViewer.tsx
index 93e5c85..d516449 100644
--- a/src/components/newPdfViewer.tsx
+++ b/src/components/newPdfViewer.tsx
@@ -304,6 +304,44 @@ function WheelZoom({ documentId, viewerRef }: WheelZoomProps) {
   return null;
 }
 
+function useLoadingMessage(messages: string[], interval = 2200) {
+  const [index, setIndex] = useState(0);
+  const [visible, setVisible] = useState(true);
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setVisible(false);
+      setTimeout(() => {
+        setIndex(i => (i + 1) % messages.length);
+        setVisible(true);
+      }, 400);
+    }, interval);
+    return () => clearInterval(timer);
+  }, [messages, interval]);
+
+  return { message: messages[index], visible };
+}
+
+const LOADING_MESSAGES = [
+  "Loading document",
+  "Preparing pages",
+  "Almost there",
+];
+
+export function Loader() {
+  const { message, visible } = useLoadingMessage(LOADING_MESSAGES);
+  return (
+    <div className="flex flex-col items-center justify-center gap-3 h-dvh w-full bg-[#070114]">
+      <div className="w-7 h-7 rounded-full border-2 border-white/10 border-t-white animate-spin" />
+      <span
+        className="text-white/50 text-sm tracking-wide transition-opacity duration-400"
+        style={{ opacity: visible ? 1 : 0 }}
+      >
+        {message}
+      </span>
+    </div>
+  );
+}
 export default function PDFViewer({ url, name }: PdfViewerProps) {
   const { engine, isLoading } = usePdfiumEngine();
   const {isMobile, isSmall} = useBreakpoint();
@@ -351,9 +389,7 @@ export default function PDFViewer({ url, name }: PdfViewerProps) {
 
 if (isLoading || !engine) {
   return (
-    <div style={{ height: "100dvh", width: "100%", backgroundColor: "#070114", display: "flex", alignItems: "center", justifyContent: "center" }}>
-      <span style={{ color: "#fff", fontSize: 16 }}>Loading PDF…</span>
-    </div>
+<Loader />
   );
 }
 
@@ -378,13 +414,18 @@ if (isLoading || !engine) {
                 isSmall={isSmall}
               />}
               <DocumentContent documentId={activeDocumentId}>
-  {({ isLoaded }) => (
-    <>
-      {!isLoaded && (
-        <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", backgroundColor: "#070114", zIndex: 10 }}>
-          <span style={{ color: "#fff", fontSize: 16 }}>Loading PDF…</span>
-        </div>
-      )}
+            {({ isLoaded }) => (
+              <>
+                <div
+            className="absolute inset-0 z-50 flex items-center justify-center bg-[#070114]"
+            style={{
+            opacity: isLoaded ? 0 : 1,
+            pointerEvents: isLoaded ? "none" : "auto",
+            transition: "opacity 0.3s"
+          }}
+          >
+            <Loader />
+          </div>
       <Viewport
         documentId={activeDocumentId}
         style={{ backgroundColor: "#070114", visibility: isLoaded ? "visible" : "hidden" }}