From 6696b83fae922f624733abc10ca5e2b6ec6bbdc1 Mon Sep 17 00:00:00 2001
From: Rithish <bajjuririthish521@gmail.com>
Date: Tue, 21 Apr 2026 15:03:51 +0000
Subject: [PATCH 1/2] fix: correct PDF viewer page count issue (1 of 0 bug)

---
 src/components/Card.tsx      | 276 +++++++++++++++++------------------
 src/components/pdfViewer.tsx |  25 +++-
 2 files changed, 155 insertions(+), 146 deletions(-)

diff --git a/src/components/Card.tsx b/src/components/Card.tsx
index f6ee83f..c9f1e07 100644
--- a/src/components/Card.tsx
+++ b/src/components/Card.tsx
@@ -6,141 +6,141 @@ import Image from "next/image";
 import { Eye, Download, Check } from "lucide-react";
 import {
   extractBracketContent,
-  extractWithoutBracketContent,
-} from "@/lib/utils/string";
-import {
-  getSecureUrl,
-  generateFileName,
-  downloadFile,
-} from "@/lib/utils/download";
-import { Capsule } from "@/components/ui/capsule";
-import Link from "next/link";
-import { cn } from "@/lib/utils";
-
-interface CardProps {
-  paper: IPaper;
-  onSelect: (paper: IPaper, isSelected: boolean) => void;
-  isSelected: boolean;
-}
-
-const Card = ({ paper, onSelect, isSelected }: CardProps) => {
-  const [previewOpen, setPreviewOpen] = React.useState(false);
-
-  const handleDownload = async (paper: IPaper) => {
-    await downloadFile(getSecureUrl(paper.file_url), generateFileName(paper));
-  };
-
-  const handleCheckboxChange = () => {
-    onSelect(paper, !isSelected);
-  };
-
-  const paperLink = `/paper/${paper._id}`;
-
-  return (
-    <>
-      <div
-        className={cn(
-          "overflow-hidden rounded-sm border-2 border-[#734DFF] bg-[#FFFFFF] font-play transition-all duration-150 hover:bg-[#EFEAFF] dark:border-[#36266D] dark:bg-[#171720] hover:dark:bg-[#262635]",
-          isSelected && "bg-white",
-        )}
-      >
-         
-          <Image
-            src={paper.thumbnail_url}
-            alt={paper.subject}
-            width={320}
-            height={180}
-            className="w-full object-cover p-4 pb-3 md:h-[250px]"
-          />
-
-          <div className="justify-center">
-            <div className="flex flex-row items-center justify-between px-4 pb-2">
-              <div className="text-md font-play font-medium">
-                {extractBracketContent(paper.subject)}
-              </div>
-            </div>
-
-            <div className="h-[1px] w-full bg-[#734DFF] dark:bg-[#36266D]" />
-
-            <div className="space-y-2 p-4">
-              <div className="font-play text-lg font-semibold">
-                {extractWithoutBracketContent(paper.subject)}
-              </div>
-              <div className="flex flex-wrap gap-2">
-                <Capsule>{paper.exam}</Capsule>
-                <Capsule>{paper.slot}</Capsule>
-                <Capsule>{paper.year}</Capsule>
-                <Capsule>{paper.semester}</Capsule>
-              </div>
-            </div>
-          </div>
-        
-
-        <div className="flex justify-end gap-2 px-4 pb-2">
-          <Eye
-            size={22}
-            className="cursor-pointer"
-            onClick={(e) => {
-              e.preventDefault();
-              e.stopPropagation();
-              setPreviewOpen(true);
-            }}
-          />
-
-          <Download
-            size={20}
-            onClick={(e) => {
-              e.stopPropagation();
-              void handleDownload(paper);
-            }}
-            className="cursor-pointer"
-          />
-        </div>
-
-        <div className="flex items-center justify-between gap-2 px-4 pb-4 font-play">
-          <div className="flex items-center gap-2">
-            <input
-              checked={isSelected}
-              onChange={handleCheckboxChange}
-              className="h-5 w-5 accent-[#7480FF]"
-              type="checkbox"
-            />
-            <p>Select</p>
-          </div>
-
-          {paper.answer_key_included && (
-            <div className="flex items-center gap-2 font-normal text-[#7480FF]">
-              <Check color="#7480FF" />
-              Answer Key
-            </div>
-          )}
-        </div>
-      </div>
-
-      {previewOpen && (
-        <div
-          className="fixed inset-0 z-50 flex items-center justify-center bg-black/80"
-          onClick={() => setPreviewOpen(false)}
-        >
-          <div
-            className="relative w-[95%] max-w-5xl h-[90vh] rounded-lg bg-white p-2 dark:bg-[#171720]"
-            onClick={(e) => e.stopPropagation()}
-          >
-            <button
-              className="absolute right-3 top-3 z-10 text-xl"
-              onClick={() => setPreviewOpen(false)}
-            >
-              ✕
-            </button>
-            <iframe
-              src={`${getSecureUrl(paper.file_url)}#toolbar=0`}
-              className="w-full h-full rounded-md"
-            />
-          </div>
-        </div>
-      )}
-    </>
-  );
-};
-
-export default Card;
\ No newline at end of file
+    extractWithoutBracketContent,
+    } from "@/lib/utils/string";
+    import {
+      getSecureUrl,
+        generateFileName,
+          downloadFile,
+          } from "@/lib/utils/download";
+          import { Capsule } from "@/components/ui/capsule";
+          import Link from "next/link";
+          import { cn } from "@/lib/utils";
+          
+          interface CardProps {
+            paper: IPaper;
+              onSelect: (paper: IPaper, isSelected: boolean) => void;
+                isSelected: boolean;
+                }
+                
+                const Card = ({ paper, onSelect, isSelected }: CardProps) => {
+                  const [previewOpen, setPreviewOpen] = React.useState(false);
+                  
+                    const handleDownload = async (paper: IPaper) => {
+                        await downloadFile(getSecureUrl(paper.file_url), generateFileName(paper));
+                          };
+                          
+                            const handleCheckboxChange = () => {
+                                onSelect(paper, !isSelected);
+                                  };
+                                  
+                                    const paperLink = `/paper/${paper._id}`;
+                                    
+                                      return (
+                                          <>
+                                                <div
+                                                        className={cn(
+                                                                  "overflow-hidden rounded-sm border-2 border-[#734DFF] bg-[#FFFFFF] font-play transition-all duration-150 hover:bg-[#EFEAFF] dark:border-[#36266D] dark:bg-[#171720] hover:dark:bg-[#262635]",
+                                                                            isSelected && "bg-white",
+                                                                                    )}
+                                                                                          >
+                                                                                                   
+                                                                                                             <Image
+                                                                                                                         src={paper.thumbnail_url}
+                                                                                                                                     alt={paper.subject}
+                                                                                                                                                 width={320}
+                                                                                                                                                             height={180}
+                                                                                                                                                                         className="w-full object-cover p-4 pb-3 md:h-[250px]"
+                                                                                                                                                                                   />
+                                                                                                                                                                                   
+                                                                                                                                                                                             <div className="justify-center">
+                                                                                                                                                                                                         <div className="flex flex-row items-center justify-between px-4 pb-2">
+                                                                                                                                                                                                                       <div className="text-md font-play font-medium">
+                                                                                                                                                                                                                                       {extractBracketContent(paper.subject)}
+                                                                                                                                                                                                                                                     </div>
+                                                                                                                                                                                                                                                                 </div>
+                                                                                                                                                                                                                                                                 
+                                                                                                                                                                                                                                                                             <div className="h-[1px] w-full bg-[#734DFF] dark:bg-[#36266D]" />
+                                                                                                                                                                                                                                                                             
+                                                                                                                                                                                                                                                                                         <div className="space-y-2 p-4">
+                                                                                                                                                                                                                                                                                                       <div className="font-play text-lg font-semibold">
+                                                                                                                                                                                                                                                                                                                       {extractWithoutBracketContent(paper.subject)}
+                                                                                                                                                                                                                                                                                                                                     </div>
+                                                                                                                                                                                                                                                                                                                                                   <div className="flex flex-wrap gap-2">
+                                                                                                                                                                                                                                                                                                                                                                   <Capsule>{paper.exam}</Capsule>
+                                                                                                                                                                                                                                                                                                                                                                                   <Capsule>{paper.slot}</Capsule>
+                                                                                                                                                                                                                                                                                                                                                                                                   <Capsule>{paper.year}</Capsule>
+                                                                                                                                                                                                                                                                                                                                                                                                                   <Capsule>{paper.semester}</Capsule>
+                                                                                                                                                                                                                                                                                                                                                                                                                                 </div>
+                                                                                                                                                                                                                                                                                                                                                                                                                                             </div>
+                                                                                                                                                                                                                                                                                                                                                                                                                                                       </div>
+                                                                                                                                                                                                                                                                                                                                                                                                                                                               
+                                                                                                                                                                                                                                                                                                                                                                                                                                                               
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                       <div className="flex justify-end gap-2 px-4 pb-2">
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 <Eye
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             size={22}
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         className="cursor-pointer"
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     onClick={(e) => {
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   e.preventDefault();
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 e.stopPropagation();
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               setPreviewOpen(true);
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           }}
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     />
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               <Download
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           size={20}
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       onClick={(e) => {
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     e.stopPropagation();
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   void handleDownload(paper);
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               }}
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           className="cursor-pointer"
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     />
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             </div>
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     <div className="flex items-center justify-between gap-2 px-4 pb-4 font-play">
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               <div className="flex items-center gap-2">
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           <input
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         checked={isSelected}
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       onChange={handleCheckboxChange}
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     className="h-5 w-5 accent-[#7480FF]"
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   type="checkbox"
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               />
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           <p>Select</p>
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     </div>
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               {paper.answer_key_included && (
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           <div className="flex items-center gap-2 font-normal text-[#7480FF]">
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         <Check color="#7480FF" />
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       Answer Key
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   </div>
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             )}
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     </div>
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           </div>
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 {previewOpen && (
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         <div
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   className="fixed inset-0 z-50 flex items-center justify-center bg-black/80"
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             onClick={() => setPreviewOpen(false)}
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     >
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               <div
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           className="relative w-[95%] max-w-5xl h-[90vh] rounded-lg bg-white p-2 dark:bg-[#171720]"
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       onClick={(e) => e.stopPropagation()}
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 >
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             <button
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           className="absolute right-3 top-3 z-10 text-xl"
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         onClick={() => setPreviewOpen(false)}
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     >
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   ✕
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               </button>
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           <iframe
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         src={`${getSecureUrl(paper.file_url)}#toolbar=0`}
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       className="w-full h-full rounded-md"
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   />
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             </div>
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     </div>
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           )}
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               </>
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 );
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 };
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 export default Card;"
\ No newline at end of file
diff --git a/src/components/pdfViewer.tsx b/src/components/pdfViewer.tsx
index 5758e55..13d2488 100644
--- a/src/components/pdfViewer.tsx
+++ b/src/components/pdfViewer.tsx
@@ -32,7 +32,9 @@ export default function PdfViewer({ url, name }: PdfViewerProps) {
     setNumPages(numPages);
     setPageNumber(1);
     pageRefs.current = Array(numPages).fill(null) as (HTMLDivElement | null)[];
-  }
+
+  setTimeout(() => setIsReady(true), 0);
+}
 
   const scrollToPage = useCallback((page: number) => {
     if (pageRefs.current[page - 1] && containerRef.current) {
@@ -47,7 +49,8 @@ export default function PdfViewer({ url, name }: PdfViewerProps) {
   }, []);
 
   const handleScroll = useCallback(() => {
-    if (!containerRef.current || !pageRefs.current) return;
+    if (!containerRef.current || !pageRefs.current || !numPages) return;
+    if (pageRefs.current.length !== numPages) return;
     const container = containerRef.current;
     const scrollTop = container.scrollTop + container.offsetTop;
 
@@ -64,15 +67,20 @@ export default function PdfViewer({ url, name }: PdfViewerProps) {
     }
   }, []);
 
+  const [isReady, setIsReady] = useState(false);
+
   useEffect(() => {
+    if (!isReady) return;
     const container = containerRef.current;
     if (container) {
       container.addEventListener("scroll", handleScroll);
       return () => container.removeEventListener("scroll", handleScroll);
-    }
-  }, [handleScroll]);
+  }
+}, [handleScroll, isReady]);
 
   const goToPreviousPage = () => {
+    if (!numPages) return;
+
     setPageNumber((prev) => {
       const newPage = Math.max(1, prev - 1);
       scrollToPage(newPage);
@@ -81,8 +89,9 @@ export default function PdfViewer({ url, name }: PdfViewerProps) {
   };
 
   const goToNextPage = () => {
+    if (!numPages) return;
     setPageNumber((prev) => {
-      const newPage = Math.min(numPages ?? 1, prev + 1);
+      const newPage = Math.min(numPages, prev + 1);
       scrollToPage(newPage);
       return newPage;
     });
@@ -208,7 +217,7 @@ export default function PdfViewer({ url, name }: PdfViewerProps) {
               className="h-9 w-14 rounded border bg-[#e7e9ff] p-1 text-center text-sm [appearance:textfield] dark:bg-[#1f1f2a] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
             />
 
-            <span className="text-sm font-medium">of {numPages ?? 1}</span>
+            <span className="text-sm font-medium">of {numPages ?? "..."}</span>
           </div>
 
           <div className="flex items-center gap-2">
@@ -302,7 +311,7 @@ export default function PdfViewer({ url, name }: PdfViewerProps) {
                 onFocus={() => setInputValue("")}
                 className="h-10 w-16 rounded border p-1 text-center [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
               />
-              <span>of {numPages ?? 1}</span>
+              <span>of {numPages ?? "..."}</span>
             </div>
 
             <div className="flex items-center gap-2">
@@ -387,7 +396,7 @@ export default function PdfViewer({ url, name }: PdfViewerProps) {
                 onFocus={() => setInputValue("")}
                 className="h-10 w-16 rounded border p-1 text-center [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
               />
-              <span className="mt-1 text-sm">of {numPages ?? 1}</span>
+              <span className="mt-1 text-sm">of {numPages ?? "..."}</span>
             </div>
           </div>
           <ReportButton />

From 3d6b3bdf4ece24705cdef3db16b770952781fe03 Mon Sep 17 00:00:00 2001
From: Rithish <bajjuririthish521@gmail.com>
Date: Tue, 21 Apr 2026 15:37:32 +0000
Subject: [PATCH 2/2] fix: correct PDF viewer page count and input handling

---
 src/components/newPdfViewer.tsx | 26 ++++++++++++++++++--------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/components/newPdfViewer.tsx b/src/components/newPdfViewer.tsx
index a2c47ab..54ad62f 100644
--- a/src/components/newPdfViewer.tsx
+++ b/src/components/newPdfViewer.tsx
@@ -61,13 +61,16 @@ const Controls = memo(function Controls({documentId, toggleFullscreen, isFullscr
 
   const { provides: zoomProv, state: zoomState } = useZoom(documentId);
   const { provides: scrollProv, state: scrollState } = useScroll(documentId);
-  const [pageNo, setPageNo] = useState("1");
+  const [pageNo, setPageNo] = useState("");
 
   useEffect(() => {
     if (!scrollProv) return;
-    const unsub = scrollProv.onPageChange(() =>
-      setPageNo(String(scrollProv.getCurrentPage()))
-    );
+    const unsub = scrollProv.onPageChange(() => {
+      const current = scrollProv.getCurrentPage();
+      setPageNo(String(current));
+    });
+    const current = scrollProv.getCurrentPage();
+    setPageNo(String(current));
     return () => unsub();
   }, [scrollProv]);
 
@@ -75,7 +78,7 @@ const Controls = memo(function Controls({documentId, toggleFullscreen, isFullscr
     (e: React.KeyboardEvent<HTMLInputElement>) => {
       if (e.key !== "Enter") return;
       const page = parseInt(pageNo, 10);
-      if (!isNaN(page) && page >= 1 && page <= (scrollState?.totalPages ?? 1)) {
+      if (!isNaN(page) && scrollState?.totalPages && page >= 1 && page <= scrollState.totalPages) {
         scrollProv?.scrollToPage({ pageNumber: page, behavior: "smooth" });
       }
     },
@@ -99,13 +102,20 @@ const Controls = memo(function Controls({documentId, toggleFullscreen, isFullscr
     <div className={(!isFullscreen && !isMobile) ? "flex flex-col items-center gap-2" : "flex flex-row items-center gap-2"}>
         <input
           type="text"
-          value={pageNo}
+          value={totalPages ? pageNo : ""}
           onChange={(e) => setPageNo(e.target.value)}
           onKeyDown={pageChange}
-          onFocus={() => setPageNo("")}
+          onFocus={() => {
+            if (totalPages) setPageNo("");
+            }}
+            onBlur={() => {
+              if (!pageNo && scrollProv) {
+                setPageNo(String(scrollProv.getCurrentPage()));
+                }
+              }}
           className="h-9 w-14 rounded border bg-[#e7e9ff] p-1 text-center text-sm [appearance:textfield] dark:bg-[#1f1f2a] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
         />
-        <span className="text-xs font-medium text-white">of {totalPages ?? 1}</span>
+        <span className="text-xs font-medium text-white">of {totalPages ?? "..."}</span>
     </div>
   )