Blank screen when lazy loading many images in NextJS tsx + Tailwindcss

I am displaying a series of images hosted in CDN on my NextJS page in the "masonry layout" structure (Just like Pinterest). As shown in .

When I try to load it on my desktop it's working fine. But only when I load it on my iPhone or lower screen sizes, the screen

or it displays "A problem repeatedly occurred"() Can you please tell me how to fix it or debug it.

The code is as below for this page. All of this happens inside a [slug] folder for multi page rendering.

'use client'
import React, { useEffect, useState } from 'react'
import Image from 'next/image'
import { useParams, useRouter } from 'next/navigation'
import { IoDownloadOutline } from "react-icons/io5";
import { useInView } from 'react-intersection-observer';
import LoadingSpinner from '../../components/LoadingSpinner'
import { RiGeminiFill } from "react-icons/ri";

interface Wallpaper {
  id: string | number
  thumbnail_url: string
  downloads: number
  categories: Array<string>
  resolution_count: number
}

function CategoryPage() {
  const [wallpapers, setWallpapers] = useState<Wallpaper[]>([])
  const [page, setPage] = useState(1)
  const [hasMore, setHasMore] = useState(true)
  const { ref, inView } = useInView()
  const params = useParams()
  const router = useRouter()
  const [initialLoading, setInitialLoading] = useState(true)

  useEffect(() => {
    const fetchWallpapers = async () => {
      try {
        const response = await fetch(`${process.env.BACKEND_PUBLIC_API_URL}/fetch_wallpapers/category/${params.category}?page=${page}`)
        const data = await response.json()
        
        if (data.length === 0) {
          setHasMore(false)
          return
        }

        setWallpapers(prev => {
          const existingIds = new Set(prev.map((w: Wallpaper) => w.id))
          const newWallpapers = data.filter((w: Wallpaper) => !existingIds.has(w.id))
          return [...prev, ...newWallpapers]
        })
      } catch (error) {
        console.error('Error fetching wallpapers:', error)
      } finally {
        setInitialLoading(false)
        setIsLoading(false)
      }
    }

    if (hasMore) {
      fetchWallpapers()
    }
  }, [params.category, page, hasMore])

  const [isLoading, setIsLoading] = useState(false)

  useEffect(() => {
    if (inView && hasMore && !isLoading) {
      setIsLoading(true)
      setPage(prev => prev + 1)
    }
  }, [inView, hasMore, isLoading])
  
  useEffect(() => {
    setWallpapers([])
    setPage(1)
    setHasMore(true)
    setIsLoading(false)
  }, [params.category])

  const handleWallpaperClick = (wallpaper: Wallpaper) => {
    router.push(`/wallzone/wallpaper_view/${wallpaper.id}?categories=${wallpaper.categories.join(',')}`)
  }

  return (
    <div className="p-4 bg-paper-white min-h-screen pt-20
    max-sm:p-1 max-sm:pt-20">
      {initialLoading ? (
        <div className="h-[calc(100vh-80px)] flex items-center">
          <LoadingSpinner />
        </div>
      ) : (
        <div className="gap-3
        max-sm:columns-2 max-sm:gap-1 
        md:columns-3 
        lg:columns-5 
        2xl:columns-6 2xl:gap-4 [column-fill:_balance]">
          {wallpapers.map((wallpaper) => (
            <div key={wallpaper.id} className="break-inside-avoid mb-4" onContextMenu={(e) => e.preventDefault()}>
              <div 
                className="relative w-full overflow-hidden rounded-lg group cursor-pointer" 
                onClick={() => handleWallpaperClick(wallpaper)}
              >
                {wallpaper.thumbnail_url && (<Image
                  src={wallpaper.thumbnail_url}
                  alt={wallpaper.id.toString()}
                  width={0}
                  height={0}
                  loading="lazy"
                  className="w-full h-auto lg:hover:scale-105 lg:transition-transform lg:duration-300"
                  sizes="(max-width: 640px) 90vw,
                         (max-width: 768px) 45vw,
                         (max-width: 1024px) 30vw,
                         22vw"
                  style={{
                    width: '100%',
                    height: 'auto',
                    minHeight: '100px',
                  }}
                  unoptimized
                />)}
                {wallpaper.resolution_count === 4 && (
                  <div className="absolute top-2 right-2">
                    <RiGeminiFill className="text-yellow-400 text-xl" />
                  </div>
                )}
                <button className="absolute flex items-center rounded-full px-2 shadow-md text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300
                max-lg:bottom-2 max-lg:right-2 
                lg:bottom-1 lg:right-1">
                  <IoDownloadOutline className="mr-1" />
                  {wallpaper.downloads}
                </button>
              </div>
            </div>
          ))}
        </div>
      )}
      {isLoading && !initialLoading && (
        <div className="py-4">
          <LoadingSpinner />
        </div>
      )}
    </div>
  )
}

export default CategoryPage

I think you need to change a bit in the Image component call.

change like this

   {wallpaper.thumbnail_url && (<Image
              src={wallpaper.thumbnail_url}
              alt={wallpaper.id.toString()}
              width={400}    // Add fixed width
              height={300}   // Add fixed height
              loading="lazy"
              className="w-full h-auto lg:hover:scale-105 lg:transition-transform lg:duration-300"
              sizes="(max-width: 640px) 45vw, 
                     (max-width: 768px) 30vw,
                     (max-width: 1024px) 20vw,
                     15vw"   // Adjusted sizes
              placeholder="blur" 
              
              quality={60}   
              priority={false}
            />)}

and you can also add the below code on your next.config.js

images: {
    deviceSizes: [640, 750, 828, 1080, 1200, 1920], // for different size of devices
    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
  },
enter code here

Hope this helps.