Images shake when loading

[onmybob]

I have a website https://vercel.bobjoy.com with PhotoAlbum,I have a confusion. When I open the webpage for the first time, the order of loading images is random. I want to implement sequential loading, so that the user experience may be better, and then when I slide the mouse to the bottom of the page, more data will be loaded. At that time, I added the data to the original data (setPages([...pages, ...data.data]);
), it seems that the order of the pictures is out of order. How should I solve this problem? Thank you. my source code:https://github.com/onmybob/myblog

[igordanchenko]

The main issue that I see in your code is that you are not properly sizing your <div> wrappers, which results in layout shift every time an image finishes loading and you end up with dozens of layout shifts before the page finishes loading. I highly recommend you use the following official example as a starting point of your implementation - https://react-photo-album.com/documentation#RenderPhoto_RenderPhotoUsageExample

Also, since you are using Next.js, you can also improve the UX by utilizing Next.js next/image image component (https://react-photo-album.com/examples/nextjs) and implementing placeholder: "blur".

I'm pretty sure your concern will be addressed once you implement the above two recommendations.

Now, when it comes to the infinite scroll question, the "columns" layout is not really suitable for infinite scroll implementation. You can easily implement infinite scroll with either "masonry" layout by just adding extra photos to the photos array, or with "rows" layout by stacking <PhotoAlbum layout="rows" ... /> components one on top of another.

Here are the examples:

• infinite scroll with layout="rows" - https://codesandbox.io/p/sandbox/react-photo-album-infinite-scroll-rows-6hgxjj
• infinite scroll with layout="masonry" - https://codesandbox.io/p/sandbox/react-photo-album-infinite-scroll-masonry-5nln4r

[onmybob]

Thank you very much for the help you provided, your patience made me feel warm, as well as the code demo, which is very useful for me, I have modified a new version according to the demo you provided and running on https://vercel.bobjoy.com, but there are two new problems.
1、After I set the layout to masonry, the bottom of the image when loading is always not aligned, especially after loading the whole image, the bottom is not aligned, is there any good solution for this?
2, The images I loaded seem to be duplicates, meaning that they are loaded twice for some reason, and both times the images are put into photos and displayed, this is bad.

Also, regarding the code snippet in the demo

  const fetchPhotos = React.useCallback((page: number) => {
    let fetchCancelled = false;

    fetch(`https://picsum.photos/v2/list?page=${(page % 20) + 1}&limit=50`)
      .then((response) => response.json())
      .then((data: PicSumPhoto[]) => {
        if (!fetchCancelled) {
          setPhotos((prev) => [... .prev, shuffle(convert(data))]);
        }
      });

    return () => {
      fetchCancelled = true;
    }; }
  }, []);

I would like to know what the fetchCancelled variable does, as well as

    return () => {
      fetchCancelled = true; }; }
    }; }

What does this return do, forgive my lack of knowledge.

Thank you very much. My new source code: https://github.com/onmybob/myblog

[igordanchenko]

1、After I set the layout to masonry, the bottom of the image when loading is always not aligned, especially after loading the whole image, the bottom is not aligned, is there any good solution for this?

That's how masonry layout works (see visual example here) and there isn't much you can do about it if you chose to use masonry layout. It's not necessarily a bad thing, and many photo websites use this approach (unsplash.com would be one notable example)

2, The images I loaded seem to be duplicates, meaning that they are loaded twice for some reason, and both times the images are put into photos and displayed, this is bad.

You are using different page sizes in different parts of your codebase - limit=10 in fetchData, but page % 20 in fetchPhotos. Anyway, you didn't have to copy that fetchPhotos function from my previous example. My example is based on Vite.js so initial data fetching is implemented client-side. But since you are using Next.js, you should stick to the data fetching approach you already have in place. Here is a working example - https://codesandbox.io/p/sandbox/react-photo-album-141-1-c7q39v?file=%2Fapp%2F_components%2FWeb%2FGallery.tsx

[onmybob]

After reading your code, it really dawns on me. A few concise lines of code can solve the problem that I have been confused about for many days. It is really a great help to me. Thank you very much.

I think if I keep the bottom image clean, I have to use layout=rows. My code has been updated to display images in this way, https://vercel.bobjoy.com/, but there is an unsolved problem. , although I have tried various methods and consulted the documentation, there is still no solution. That is, after the first page is loaded by default, I try to load the picture of the second page when scrolling to the next page. At this time, I scroll the mouse back. When you get to the first page, you find that the layout of the pictures has changed. For example, at the beginning, there were 3 pictures in the first row and 2 pictures in the second row. When the second page is loaded, the layout may have changed. There are three photos in the second row and other similar problems. How to solve this problem?

[igordanchenko]

You can find the solution to this problem in my very first response on this thread, and there is even a working example. You just need to render each "page" in its own <PhotoAlbum layout="rows" ... /> component.