如何在react js中添加加载旋转器，而我的组件正在加载?

Question

我用react js创建了一个web应用程序。我做的每件事都很好，网站运行得很好。虽然它运行良好，我需要修改一些东西。就像当我访问我的导航链接，它需要很少的时间来加载组件。所以我想在加载组件时显示一个旋转器。我该怎么做呢?有什么办法可以做到吗?

Answer 1

使用Muicircularprogress并创建一个名为isfetch的状态(在所有内容被获取后将关闭)

对于mui(参见:https://mui.com/material-ui/react-progress/#circular-indeterminate)

import React, { useState, useEffect } from "react";
import CircularProgress from "@mui/material/CircularProgress";
import Box from "@mui/material/Box";
export default function App() {
const [isFetching, setIsFetching] = useState(true); 
useEffect(() => {
setTimeout(function () {
console.log("Delayed for 5 second."); 
setIsFetching(false); 
}, 5000);
}, []);
if (isFetching) {
return (
<Box sx={{ display: "flex", justifyContent: "center" }}>
<CircularProgress />
</Box>
);
}
return <div>content....</div>;

的例子:

https://codesandbox.io/s/vigilant-water-e6l0bk?file=/src/App.js: 0 - 571

我使用setTimeout来代替API获取调用。5秒后，内容将加载，否则屏幕上将显示一个微调项。

Answer 2

您可以在组件中维护该状态。最初，它可以设置为true。无论何时进行API调用，您都可以根据需要根据响应更改状态。基于这个状态，你可以渲染一个旋转器或内容。