如何修复 React 项目中的 Spinner 行为以等待 img 渲染

如何解决如何修复 React 项目中的 Spinner 行为以等待 img 渲染

我在此链接上部署了一个 React 项目：https://musing-hermann-5129b4.netlify.app/models

最近我在渲染开始时添加了一个spinner，但是我没有找到等待主页面渲染的方法，所以我需要改变spinner行为，这样它可以在所有主页面都停止时停止完成渲染，特别是图像，由于 fetch api 需要时间加载：

这是app.js的代码

import React,{ useState,useEffect} from 'react';
import ModelFooter from "./components/Models/ModelFooter";
import FileModel from "./components/FileModel/FileModel";
import Navbar from "./components/Nav/Navbar";
import Models from "./components/Models/Models";
import { browserRouter as Router,Switch,Route,Link,Redirect } from 'react-router-dom';
import logo from "./assets/img/logo.png";
import ModelsProvider from "./context/ModelsContext";
import Spinner from "./components/Spinner";


function App() {

  const [ loading,setLoading ] = useState(false);

  useEffect(() => {
    setLoading(true);
    setTimeout(() => {
      setLoading(false);
    },4000);
  },[])

  return (
    <ModelsProvider>
        { loading ?
           <Spinner loading={loading} />
        :
        <main> 
        <Router>
            <div className="content-container">   
              <nav className="navbar">
                  <img src={logo} className="logo" alt="Ego logo" />
                  <div className="menu-container">
                      <Link to={'/models'} className="menu-items">Modelos</Link>
                      <Link to={`/models/:id`} className="menu-items">Ficha del Modelo</Link>
                  </div>
                  <div className="bottom-line"></div>             
              </nav>
              <Switch>
                <Route exact path="/"><Redirect to="/models"/></Route>
                <Route exact path='/models' component={Models} />
                <Route exact path='/models/:id' component={FileModel} />
              </Switch>
            
              <Navbar />
            </div>
          <ModelFooter />
        </Router>
      </main>
        }
    </ModelsProvider>
  );
}

export default App;

这里是 App.js 获取 api 数据的 ModelsContext.jsx：

import React,{ createContext,useState,useEffect } from 'react';

export const ModelsContext = createContext();

const ModelsProvider = (props) => {

        //State de modelos
        const [ modelo,guardarModelo ] = useState([]);
        const [ modelos,guardarModelos ] = useState([]);
        const [ allModelos,guardarallModelo ] = useState([]);

        const { id } = modelo;


         //Cargar un modelo
         useEffect(() => {
             const consultaraPI = async () => {         
                try {
                    const api = await fetch("https://challenge.agenciaego.tech/models");
                    const modelos = await api.json();
    
                    const api2 = await fetch(`https://challenge.agenciaego.tech/models/${id ? id : ""}`);
                    const modelo = await api2.json();
           
                    guardarallModelo(modelos);
                    guardarModelos(modelos);
                    guardarModelo(modelo);

                } catch (error) {
                   console.log(error); 
                }
             }
             consultaraPI()
         },[id]);

    return (
        <ModelsContext.Provider
            value={{
                allModelos,modelo,modelos,guardarModelo,guardarModelos
            }}
        >
            {props.children}
        </ModelsContext.Provider>
    )
}

export default ModelsProvider;

我希望我的解释已经清楚，在此先感谢！