显示旋转器时，我的网站正在加载吗?

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>
);
}