<Image
                            src={gallery.image}
                            alt={`Image ${gallery.id + 1}`}
                            width={500}
                            height={500}
                            objectFit="cover"
                            priority
                            onLoadingComplete={({ naturalWidth, naturalHeight }) =>
                                handleImageLoad(gallery.image, naturalWidth, naturalHeight)
                            }
                            className="h-[418px] w-full object-cover hover:cursor-pointer"
                        />

const handleImageLoad = (src: string, width: number, height: number) => {
setImageDimensions((prev) => ({
…prev,
[src]: { width, height }
}))
}
const handleImageLoad = (src: string, width: number, height: number) => {
setImageDimensions((prev) => ({
…prev,
[src]: { width, height }
}))
}

I have searched for different resources available online but couldn’t find it, Hope there’s someone who can help me in this. I am building a photo grid where I want the image to be loaded before the loading is completed. I mean the remote width and height which I should get by destructuring the source. I have found it in javascript where do solve it using setTimeout and stuffs but couldn’t find in NEXT JS.