how to run mui Skeleton one by one For multiple Images in Gallery

Question

im trying to add skeleton in my react project i render a gallery images from backend those images are different size (1mb,0.5mb) so the skeleton closed earler in my website thats a problem

and other size photos still not come to front but skeletton stoped to loading skeleton loading

i tried to load gallery images those ah bigger size so i add skeleton but there is some images is low size so skelton stoped after loading small size images

Answer 1

You can create an image component and then use a skeleton inside it. In this case, if the image is not loaded, the component shows a skeleton. Otherwise, it shows the image. Then you have to map through your images and render the image component.

imageIds.map(id => {
  return (
    <ImageContainer imageId={id} />
  )
})

I assumed you have an API call to get images and a list of image IDs. you can call the API inside the component and check if it is loading, use the skeleton. Otherwise, show the image. You can implement the logic however you want.