♻️ Add infinite scrolling for files in UploadModal to improve UX when uploading large amount of files - #1172
Conversation
…loading large amount of files
|
As for autumn theme, i think that black/dark list div does not look very good, may need to do follow up on this. But it is also just visual problem, so no big deal there. |
|
And fixed grammar mistakes sorry about that. 50 book, is also just a magic number, i have no particular attachment to that, it may be 100 or any reasonable number imho. |
aaronleopold
left a comment
aaronleopold
left a comment
There was a problem hiding this comment.
I had one suggestion if we wanted to take this a step further, but I think this is good as-is!
As for autumn theme, i think that black/dark list div does not look very good, may need to do follow up on this. But it is also just visual problem, so no big deal there.
I agree, I have another branch where I am working on theming for web so will make a note to give it a look there.
And fixed grammar mistakes sorry about that. 50 book, is also just a magic number, i have no particular attachment to that
No worries about grammar! I don't have a preference, I think 50 is totally fine. I honestly didn't even consider that folks would be uploading that many at a time when I added support for this feature 😅
| const handleScroll = useCallback( | ||
| (e: React.UIEvent<HTMLDivElement>) => { | ||
| const target = e.currentTarget | ||
| if (target.scrollHeight - target.scrollTop <= target.clientHeight + 150) { | ||
| setVisibleCount((prev) => Math.min(prev + 50, files.length)) | ||
| } | ||
| }, | ||
| [files.length], | ||
| ) |
There was a problem hiding this comment.
[previously this modal] loaded every book into DOM (though, not necessary problematic, but not exactly a great thing either)
This is definitely an improvement, but it will still load everything into the DOM once you reach the end. If we wanted to improve this further, I'd suggest virtualizing the list so it can properly cycle things out from the DOM for us as you scroll. The web app uses both virtuoso and tanstack/virtual so there should be a couple of examples to pull from (e.g., DirectoryPickerModal).
There was a problem hiding this comment.
Ah, that is true. Well, provided the user scroll down the bottom :'D
Feels like good improvement for future, i can make follow up on this.
There was a problem hiding this comment.
Yeah I think a follow-up is totally fine. I'll merge this as-is shortly, then. Thank you!!
A smaller release, mostly so I can get `nightly` into a cleaner slate to allow for a longer testing time for a couple of larger changes, and a few vulnerability patches ## 0.1.4 (2026-05-28) ### Added - ✨ (expo): Support volume-based reader navigation ([#1161](#1161)) [[5e5a2e0](5e5a2e0)] - ✨ Support tag-based filtering on backend ([#1160](#1160)) [[6b3fefd](6b3fefd)] ### Changed - ⬆️ Fix vulnerabilities (`ws`, `qs`, `uuid`, `js-cookie`) ([#1179](#1179)) [[9a93695](9a93695)] - ♻️ Add infinite scrolling for files in UploadModal ([#1172](#1172)) [[f540698](f540698)] - 🍱 Update docs hero images [[f4c8854](f4c8854)] ### Fixed - 🐛 Fix `AccessAPIKeys` permission mismatch ([#1171](#1171)) [[666bd01](666bd01)] - 🐛 (expo): Fix Android themed icon ([#1162](#1162)) [[359ebf0](359ebf0)] - 💚 Fix CVE check workflow [[609788d](609788d)] ### Miscellaneous - 🌐 Update translations ([#1164](#1164)) [[1aba2c9](1aba2c9)] - 📝 Add `Security.md` [[3feba0a](3feba0a)] - 📝 Update documentation, readmes, and contributing guidelines [[984c953](984c953)] - 🌐 Update translations ([#1148](#1148)) [[4d6cc34](4d6cc34)] - 📝 Add docs for AUR package [[44c9791](44c9791)] - 📝 Fix overflow issues on documentation hero [[ffd2ec0](ffd2ec0)] - 🩹 Fix leftover link in SteppedFormSceneHeader [[7eaa73a](7eaa73a)]
2 participants
This PR adds infinite scroll to the upload dialog so that users may use that to upload large amount of books in one sitting.
Previously, if there were too many books loaded there was layout overflow, that:
Before
The modal expands off-screen, scrollbar is missing, the list is not scrollable at all, buttons are unreachable
After
Autumn theme:
White theme:
Dark theme:
First PR so feel free to let me know if I forgot something. Thanks!