Estoy trabajando en un Pokedex simple que muestra todos los pokemon, estoy mostrando todas las cartas usando una función de mapa en una serie de objetos de pokemon como este:

 {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> ); })}

hay una etiqueta de imagen en el div de la tarjeta que muestra la imagen del pokemon así:

También agregué la funcionalidad para buscar Pokémon según el nombre. El problema es que tan pronto como cambia el estado, las imágenes no cambian inmediatamente, lo que tiene sentido ya que las imágenes no se descargan instantáneamente. Durante unos minutos, muestra la imagen de la imagen de pokemon cargada anteriormente en el mismo lugar.

Así que necesito ayuda para mostrar un cargador por el tiempo hasta que se hayan cargado todas las imágenes. Usaré un cargador que ya tengo. Necesito saber cómo cargar el evento de todas las imágenes.

¡Gracias por leer!