Next.js Discord

Discord Forum

Displaying the old image until the new image is uploaded

Unanswered
Knospak posted this in #help-forum
Open in Discord
KnospakOP
When I request a new page from the pagination at the bottom of my page, the articles on my page change, but the old image appears until the new image is uploaded, how can I solve this problem? i want to see blur


My homepage rendering with search query 20 cards at a time

const Page = async ({ searchParams }) => {
    ////
    <Fragment>
      <main className="grid gap-8 justify-items-center lg:px-16 lg:grid-cols-4 md:grid-cols-3 sm:grid-cols-2">
        {data.characters.results.map((character) => (
          <CharacterCardWrapper character={character}>
            <CharacterCard character={character} key={character.id} />
          </CharacterCardWrapper>
        ))}
      </main>
      <div className="flex justify-center my-8">
        <PageNumber
          totalPages={data.characters.info.pages}
          activePage={params}
        />
      </div>
    </Fragment>


Component where I created the cards

const CharacterCard = (props) => {
  const { image, name, status, id } = props.character;
  return (
    <Link href={`/${id}`} prefetch={false}>
      <div className="w-48 h-48 mb-4">
        <Image
          src={image}
          width={300}
          height={300}
          className="rounded-lg transition duration-300 ease-in-out grayscale-[30%] group-hover:grayscale-[0%] group-hover:scale-105 shadow-lg  "
          alt={name}
          placeholder="blur"
          blurDataURL="/grey2.png"
        />
      </div>
      <div>
        /////
      </div>
    </Link>
  );
};

3 Replies

KnospakOP
<CharacterCardWrapper character={character}>
//  must have key={}
Forest bachac
Could you use a loading state, then when your items are loading it is true, once they finish you set to false. You can then is you make this a client fragment, have it so a useEffect has a skeleton placeholder while Ur content loads?
KnospakOP
Not necessary, I already have a loading.js page. The placeholder and blurDataURL properties of the Image component already provide the loading animation. My problem here was just not defining a key. When I return it with map, the same component was still rendering for react. After defining the key, the problem was solved, the old picture disappeared from the screen during rendering