我正在開發一個電影應用程序。我在接收數據并在屏幕上查看數據方面沒有問題。但是當我想向我的項目添加加載器時。它永遠不會消失，而不是停留 1-2 秒。const Movies = () => {  const { movies, isLoading } = useGlobalContext();  if (isLoading) {    return <div className="loading"></div>;  }  return (    <section className="movies">      {movies.map((movie) => {        const {          imdbID: key,          Poster: poster,          Title: title,          Year,          year,        } = movie;        return (          <Link to={`/movies/${key}`} key={key} className="movie">            <article>              <img src={poster} alt={title} />              <div className="movie-info">                <h4 className="title">{title}</h4>                <p>{year}</p>              </div>            </article>          </Link>        );      })}    </section>  );};這是我的上下文頁面useGlobalContext，isLoading來自這里const AppContext = React.createContext();const AppProvider = ({ children }) => {  const [isLoading, setIsLoading] = useState(true);  const [isError, setError] = useState({ show: false, msg: "" });  const [movies, setMovies] = useState([]);  const [query, setQuery] = useState("spider-man");  const fetchMovies = async (url) => {    setIsLoading(true);    try {      const response = await fetch(url);      const data = await response.json();      if (data.Response === "True") {        setMovies(data.Search);        setError({ show: false, msg: "" });      } else {        setError({ show: true, msg: data.Error });      }    } catch (error) {      console.log(error);    }  };  useEffect(() => {    fetchMovies(`${API_ENDPOINT}&s=${query}`);  }, []);  return (    <AppContext.Provider      value={{ isLoading, isError, movies, query, setQuery }}    >      {children}    </AppContext.Provider>  );};export const useGlobalContext = () => {  return useContext(AppContext);};export { AppContext, AppProvider };