我试图显示一个加载微调器（或实际上任何HTML元素），而我的图像正在加载，事情是我使用这个ImageComponent显示一个图像在一个随机的电影生成器，我能够得到微调器的工作只是与第一个图像，但之后，当我得到一个新的电影的图像，以前的电影停留，直到新的图像加载。
下面是image组件的代码：

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

export default function ImageComponent(image: PrimaryImage) {
  const [loading, setLoading] = useState(true)

  function onImageLoad() {
    setLoading(false)
    console.log("loaded")
  }

  return (
    <div className="relative h-full m-auto">
      <div style={{ display: loading ? "block" : "none" }}>
        Loading Spinner goes here
      </div>
      <Image className="object-contain"
        src={image.url}
        alt="Image"
        fill
        onLoad={onImageLoad}
        priority
        style={{ display: loading ? "none" : "block" }}
      />
    </div>
  )
}

下面是整个页面的代码：

"use client"
import { useEffect, useRef, useState } from "react";
import { getMoviesRequest } from "./requests";
import MovieImageComponent from "./components/MovieImage";

export default function Page() {
  const moviesCache = useRef<Movie[]>([])
  const index = useRef(0)
  const [movie, setMovie] = useState<Movie>({
    titleText: { text: "" },
    primaryImage: { width: 0, height: 0, url: "/default_image.png" },
    releaseDate: { day: 0, month: 0, year: 0 }
  })

  useEffect(() => {
    refreshMoviesCache()
  }, [])

  function refreshMoviesCache() {
    // do some stuff to refresh the movies cache
  }
  function setNewMovie() {
    // do some stuff to set a new movie
  }

  return (
    <div>
      <h3>
        Movie Generator
      </h3>
      {MovieImageComponent(movie.primaryImage)}
      <div className="text-center p-3">
        <h1>{movie.titleText.text}</h1>
        <h2>{movie.releaseDate.year}</h2>
        <button onClick={setNewMovie}>
          Otra Pelicula
        </button>
      </div>
    </div>
  )
}

任何帮助将非常感谢。