While thumbnails are lazy-loaded, rendering thousands of DOM nodes in the PageGrid causes layout, scrolling, and drag-and-drop actions to lag on low-end machines. We need grid virtualization to support large books or documents.
Technical Proposal:
- Integrate
@tanstack/react-virtual or a custom CSS Grid virtualizer.
- Modify
PageGrid.tsx to render only the page cards that intersect with the active scroll viewport plus a small buffer.
- Virtualize the drag-and-drop coordinate calculations to ensure smooth item drag animations even with large document sets.
This repo is using Opire - what does it mean? 👇
💵 Everyone can add rewards for this issue commenting /reward 100 (replace 100 with the amount).
🕵️♂️ If someone starts working on this issue to earn the rewards, they can comment /try to let everyone know!
🙌 And when they open the PR, they can comment /claim #8 either in the PR description or in a PR's comment.
🪙 Also, everyone can tip any user commenting /tip 20 @YurMil (replace 20 with the amount, and @YurMil with the user to tip).
📖 If you want to learn more, check out our documentation.
While thumbnails are lazy-loaded, rendering thousands of DOM nodes in the
PageGridcauses layout, scrolling, and drag-and-drop actions to lag on low-end machines. We need grid virtualization to support large books or documents.Technical Proposal:
@tanstack/react-virtualor a custom CSS Grid virtualizer.PageGrid.tsxto render only the page cards that intersect with the active scroll viewport plus a small buffer.This repo is using Opire - what does it mean? 👇
💵 Everyone can add rewards for this issue commenting
/reward 100(replace100with the amount).🕵️♂️ If someone starts working on this issue to earn the rewards, they can comment
/tryto let everyone know!🙌 And when they open the PR, they can comment
/claim #8either in the PR description or in a PR's comment.🪙 Also, everyone can tip any user commenting
/tip 20 @YurMil(replace20with the amount, and@YurMilwith the user to tip).📖 If you want to learn more, check out our documentation.