search

neptunian / react-photo-gallery

React Photo Gallery
http://neptunian.github.io/react-photo-gallery/
Other
1.97k stars 310 forks source link

Large amount of Photos does not show all at once #189

Open javadude24 opened 4 years ago

javadude24 commented 4 years ago

I've noticed that if you have just a small amount (around 50) photos, about 15 loads (3 rows), then it takes a very long time to see the remaining photos rendered.

Is this a bug or some configuration that I'm missing?

case-dubs commented 4 years ago

@javadude24 I'm running into the issue.

@neptunian Is there a maximum number of images where the Gallery starts to break down? I've set up infinite scroll for our gallery that can include 1k+ images. I've found that when I scroll down (to load more images) or even scroll back up (viewing images that have already been loaded) all or part of the gallery can disappear for moments and parts of my page (such as nav and filtering options) are temporarily frozen, as if the gallery is overloading the browser.

@neptunian Have you seen this before? I'd really appreciate any suggestions that you have.

Thank you so much!

case-dubs commented 4 years ago

@neptunian Here is a video of the Gallery going blank and causing buttons on the page to become disabled https://drive.google.com/file/d/1Pxp6BmPZNQP6qkLxp0ZFJB64X550y8gX/view?usp=sharing . I'd really appreciate your help in getting to the bottom of what's going on and brainstorming on any possible solutions.

neptunian commented 4 years ago

I haven't had time to work on the project in a while, but I think there would be an issue with a lot of images. The whole graph needs to be recalculated when the list of photos changes, so some optimizations need to be implemented to prevent that.

case-dubs commented 4 years ago

@neptunian thanks so much for your reply.

Three follow up questions:

  1. Would that recalculation when the list of photos changes explain why when scrolling up to show already loaded images, the gallery would flash?
  2. Is there anything I can do to help with that optimization? If not, do you know when, if at all, you might have time to work on that?
  3. Is there any way for me to determine when the gallery is being recalculated, so that I could put up a spinner or loading indicator?

Thank you so much for your responses to these questions and all of the effort you've put into creating this great gallery!

55Cancri commented 2 years ago

@case-dubs How did you get bidirectional infinite scroll to work with this library like this?

I'm currently storing an array of images and when I get close to the bottom, I make an api call with a cursor to get the next set of images, then concat them to my existing array of images.

The issue is, when I do this, the library recalculates everything from the top and starts from the top. It doesn't just load in from the bottom. How did you get to stay scrolled at the bottom even after the next set of images comes in? Do you have code that I could look at?

case-dubs commented 2 years ago

Hi Malin,

Unfortunately, the library doesn't support appending more photos without reloading :/. I'm sorry about that. I wish I could be more helpful.

On Sun, Dec 5, 2021 at 3:39 PM Malin1 @.***> wrote:

@case-dubs https://github.com/case-dubs How did you get bidirectional infinite scroll to work with this library like this?

I'm currently storing an array of images and when I get close to the bottom, I make an api call with a cursor to get the next set of images, then concat them to my existing array of images.

The issue is, when I do this, the library recalculates everything from the top and starts from the top. It doesn't just load in from the bottom. How did you get to stay scrolled at the bottom even after the next set of images comes in? Do you have code that I could look at?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/neptunian/react-photo-gallery/issues/189#issuecomment-986324385, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABHR6CBBMSMAQK3A5UEXLGLUPPZ2HANCNFSM4SBSFJTA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

-- Casey Wilson +1.510.459.5144 www.caseywilson.me