在显示旋转器时，我的网站是否加载？

Question

这是App.js

import Newhome from './COMPONENTS/Newhome';
import HashLoader from "react-spinners/HashLoader";
import { useState ,  useEffect } from 'react';
import "./App.css";
function App() {
  const [loading, setloading] = useState(false);
  useEffect(() => {
    setloading(true);
    setTimeout(() => {
      setloading(false);
    }, 1785);
  }, [])
  return (
    <>
      {
        <>
          {
          loading ?
            <div className="App">
              <HashLoader className='loader' color={'#FF5757'} loading={loading}
                size={120} />
            </div>
            : (<Newhome />)
          }
        </>
      }
    </>
  );
}

export default App;

我不确定网站是否正在加载，而我是显示旋转器。我认为旋转器只显示了几秒钟，并在网站显示后，没有加载。

这里发生了什么事？

这是我的网站网站

Answer 1

使用效果运行后的渲染。本质上是你试图在网站加载之前展示旋转器，这并不是最好的方法。您可以尝试代码拆分，例如

import React, { Suspense } from 'react';

import HashLoader from "react-spinners/HashLoader";
const Newhome  = React.lazy(() => import('./COMPONENTS/Newhome'));

function App() {
  return (
    <div>
      <Suspense fallback={<HashLoader/>}>
        <Newhome />
      </Suspense>
    </div>
  );
}