How to get component loaded state in Next.js?

Question

I am working on a simple Pokedex that shows all pokemon, I am displaying all the cards by using a map function on an array of pokemon objects like this:

{pokemons.results.map((el, i) => {
              return (
                <div key={i} className="lg:w-1/4 md:w-1/2 p-4 w-full">
                  <Link href={"/"}>
                    <a className="block relative rounded-lg overflow-hidden hover:cursor-pointer hover:shadow-xl hover:shadow-poke-blue/50 p-4  bg-poke-blue group">
                      <img
                        alt="ecommerce"
                        className="object-cover object-center w-full block"
                        src={`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/${el.url
                          .replace("https://pokeapi.co/api/v2/pokemon/", "")
                          .replace("/", "")}.png`}
                        height="400px"
                        onError={addDefaultSrc}
                      />

                      <div className="mt-4">
                        <h2 className="group-hover:underline text-white text-center title-font text-lg font-medium uppercase">
                          {el.name}
                        </h2>
                      </div>
                    </a>
                  </Link>
                </div>
              );
            })}

there is an image tag in the div of the card which displays the image of the pokemon like this:

I also added the functionality to search pokemon based on the name. The problem is as soon as the state changes the images don't change immediately which makes sense since the images don't get downloaded instantly. For a few minutes, it shows the image of the previously loaded pokemon image at the same place.

So I need help to show a loader for the time till all the images have loaded. I will use a loader that I already have I need to know how to get the event of all images loaded.

Thanks for reading!

Answer 1

There is an onLoad event on the img tag you should be able to just add a loaded property on each item in the local copy of the data, then just updated the loaded property onLoad and then make a derived loaded variable

const loaded = images().every(img => img.loaded)

Also @Chris G's message about the keys is entirely correct and should be followed, I was just answering the question