Limit the images that are displayed on the page and having fade in transition

[Phoi-Hoa-Nguyen]

Hey :),

I could create a good fine Gallery-Showcase with your nice "react-photo-album". But I encounter a Performance Issue for my usecase, if I display for example 1000 or more images with the "react-photo-album" (using atm a single Arraylist), which having a Filter etc. (also tried to solve it with UseMemo).
So is it possible to optimize the Performance with a limiting of the displayed images on the page (e.g. only 50 or 100 images to see) and if we scrolled down we can click on a Button or plus and it shows more or the rest of the images? Or would it at least solve the performance issue?
Furthermore how can I also add a simple fad in Transition animation for each images?
I would be happy if you could help me out with a possible way or example!

Thanks in advance and I hope I could describe my problem well!

[igordanchenko]

It's tough to guess what kind of performance issues you face. react-photo-album is a highly performant library and can easily render a photo gallery with 1,000 images. In order not to load all images at once, you can implement an "infinite scroll" feature. You can find an example in #90. However, if you are rendering each image as a React component with its own layout effects, I can see this becoming a performance bottleneck at some point (even with infinite scroll). In that case, I'd consider implementing some sort of pagination ("Previous" / "Next" buttons that swap the photos array when clicked). It all depends on what kind of user experience you want to build.

As to the fade-in effect, there are multiple ways to implement it, and I'm sure you can find all kinds of solutions or even ready-to-use React libraries for that. This question is really outside of the react-photo-album maintenance scope, and I'd prefer not to zero in on any particular approach.

I hope this helps.