images overlap

[ahmaxed]

the images overlap when the page is visited for the first time. upon refresh, the images load correctly.
https://pinter.herokuapp.com/
there is how react-stack-grid is used:
https://github.com/moT01/pinterest/blob/master/client/src/components/main/MainPage.js

[wadackel]

Hi @ahmadabdolsaheb Thank you for Issues 😃

It is thought that it is caused by the indeterminate size of the image.
Would you please try monitorImagesLoaded as true?

[ahmaxed]

thanks for the fast response, @tsuyoshiwada
setting monitorImagesLoaded as true, although it resolves the overlapping eventually, causes an undesired animation. It seems like the images gets dragged to right place.
you could see it better when you load the page for the first time.
https://pinter.herokuapp.com/
if I am not mistaken, it is suggested in the documentation to use monitorImagesLoaded with the imagesLoaded package, so I am working on that. any further suggestion would be appreciate it.

[wadackel]

@ahmadabdolsaheb I'm sorry for late response...

If you know the size of the image in advance, specifying the image size is the best measure.
If that is impossible, the following workaround may be useful.

1. Load the image to be displayed using imagesLoaded
2. Load all images to be displayed
3. Display spinner while loading
4. When loading of all images is completed, render using <StackGrid />

However, this will cause the spinner to be displayed until all the images have been read, so the display will be felt late 😢

[NevenLeung]

@tsuyoshiwada Thanks for you efford on this project.

My problem

I have met some problem in the image overlapping when searching photos by a keyword or updating the pager.

The images can be displayed after a short time overlapping period, is it any other way to improved the user experience?

My usage

Here is my usage of react-stack-grid.

<StackGrid
  className={styles.photoGrid}
  columnWidth={210}
  monitorImagesLoaded={true}
>
  {PhotoItems}
</StackGrid>

My solution (not implement yet)

I have tried to add the loading spinner everytime after clicking search button and updating the pager to give react-stack-grid time to tidy the images. But it could be hard to handle the the duration time of spinner.

Would you minding adding a new props which is the callback function called by imagesloaded, like imagesloaded example.

---

Updated

I just tested the app in github page (click the second button in the header will see the setting modal), and it works very well.

Would it be my computor performance problem when in local development?