Skip to content

feat: pdf viewer swap & flicker problem fix#489

Open
Gslmao wants to merge 8 commits intoCodeChefVIT:stagingfrom
Gslmao-s-Org:Gslmao/pdfViewerNew
Open

feat: pdf viewer swap & flicker problem fix#489
Gslmao wants to merge 8 commits intoCodeChefVIT:stagingfrom
Gslmao-s-Org:Gslmao/pdfViewerNew

Conversation

@Gslmao
Copy link
Copy Markdown
Contributor

@Gslmao Gslmao commented Apr 11, 2026

📌 Purpose

Migrates the PDF viewer from react-pdf to embedpdf with the Pdfium WASM engine for improved rendering performance and a more modular plugin architecture.

Corresponding issue: closes #472


🖼️ Showcase

Desktop View
image

Desktop view fullscreen
image

Mobile View
image

Mobile View Fullscreen
image


🔧 Changes

  • Engine: Swapped react-pdf for embedpdf with viewport, scroll, zoom, render, document manager, and export plugins.
  • Scroll & Zoom: Removed manual pageRefs scroll tracking, offsetTop math, and the wheel event handler.
  • Toolbar: Extracted into a standalone memoised Controls component. Added a useBreakpoint hook to handle responsive layout, consolidating the three previously duplicated toolbar variants (mobile, desktop, fullscreen) into one component with a resolved layout per breakpoint.
  • Performance: toggleFullscreen, handleDownload, and the plugins array are all stabilised with useCallback/useMemo to prevent unnecessary re-renders of the memoised Controls.

➕ Additional Notes

  • The flickering of the pages when zooming and in and out was fixed

@YOGESH-08
Copy link
Copy Markdown
Collaborator

remove the oldPdf Viewer if it is not used anymore

@YOGESH-08
Copy link
Copy Markdown
Collaborator

Great ! flickering issue is solved.

If wheel handler is removed, then try adding embedpdf's built in support for that.
Zoom in/out on mouse wheel is required for better UX.

Comment on lines +34 to +38
function useBreakpoint() {
const [width, setWidth] = useState(() => window.innerWidth);

useEffect(() => {
setWidth(window.innerWidth);
Copy link
Copy Markdown
Collaborator

@YOGESH-08 YOGESH-08 Apr 12, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

initialize it with a constant and then update it using useEffect

@YOGESH-08
Copy link
Copy Markdown
Collaborator

update ur PR title

@YOGESH-08
Copy link
Copy Markdown
Collaborator

why report button is enlarged a bit ?

@Gslmao Gslmao changed the title Gslmao/pdf viewer new feat: Swapping the current PDF Viewer with EmebedPDF and fixing flicker problem during zoom Apr 12, 2026
@Gslmao Gslmao changed the title feat: Swapping the current PDF Viewer with EmebedPDF and fixing flicker problem during zoom feat: pdf viewer swap & flicker problem fix Apr 12, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Consider replacing current PDF viewer with https://www.embedpdf.com/

2 participants