Is there a way to do what I want without using state?

Question

As you can see, I have a book cover image, a div for a book overlay (that shows when you hover the image), and a fallback div for when there is no corresponding image from the database.

So, I wanted to add an extra div , being imageLoadingOverlay one. I have it styled as a moving gradiant and it should show when the image is loading after being fetched

My problem is, I want to show the imageLoadingOverlay div, then after the image is done loading , either show the image (book cover) or the fallback no book found div

I know that I can use a client component and the onLoad() method from next/image

But I was wondering, is there a way I can do what I want without extracting the image and making it a seperate client component?

async function BookCard({ book }: Props) {
  const imageName = isDetailedBook(book) ? book.cover_id : book?.cover_i;
  const bookImageURL = https://covers.openlibrary.org/b/id/${imageName}-L.jpg";

  return (
    <div className={styles.bookCard}>
      <div className={styles.imageContainer}>
        <div className={styles.imageLoadingOverlay}></div>
        <Image
          src={bookImageURL}
          alt={book.title}
          className={styles.bookCover}
          sizes="285px"
          fill
          priority
        />
      </div>

      <div className={styles.noBookCoverOverlay}>No Book Cover Found</div>
      <div className={styles.bookOverlay}>
        <h3>{book.title}</h3>
        <h4>
          Written by:{" "}
          {isDetailedBook(book)
            ? processBookAuthors(book.authors)
            : processBookAuthors(book.author_name)}
        </h4>
      </div>
    </div>
  );
}

export default BookCard;

No Book Cover Found

{book.title}

Written by:{" "} {isDetailedBook(book) ? processBookAuthors(book.authors) : processBookAuthors(book.author_name)}

); } export default BookCard;

Is there a way to do what I want without using state?

0 Replies