I have made a simple gallery component, pretty much just gets an array of images and by keeping track of index. My issue is, when I click the arrow keys to move along the index, the index does increase, but until the next image loads, it still displays the current loading image. Which is the main issue. This is bad for users as it may seem like they aren't clicking on the next image and may spam it when the index is actually switching. How can I make the image actually switch whether the next image is loaded or not, and instead show something like a spinner. I'm assuming this has to do with the onLoad={}.

"use client";

import { FC, useState } from "react";
import Image from "next/image";

import { Image as ImageType } from "@/types";
import { ChevronLeft, ChevronRight, Dot } from "lucide-react";

interface GalleryProps {
  images: ImageType[];
}

const Gallery: FC<GalleryProps> = ({ images }) => {
  const [currentIndex, setCurrentIndex] = useState(0);

  const prevSlide = () => {
    const isFirstSlide = currentIndex === 0;
    const newIndex = isFirstSlide ? images.length - 1 : currentIndex - 1;
    setCurrentIndex(newIndex);
  };
  const nextSlide = () => {
    const isLastSlide = currentIndex === images.length - 1;
    const newIndex = isLastSlide ? 0 : currentIndex + 1;
    setCurrentIndex(newIndex);
  };

  const goToSlide = (slideIndex: number) => {
    setCurrentIndex(slideIndex);
  };

  return (
    <div className="max-w-2xl w-full mx-auto relative group">
      <div className="aspect-square relative h-full w-full rounded-lg overflow-hidden">
        <Image
          fill
          src={images[currentIndex].url}
          alt="Image"
          className="object-cover object-center"
        />
      </div>
      {ARROW FUNCTIONS...}
    </div>
  );
};

export default Gallery;