NextJS 如何添加Spinner Loader

我们可以使用条件渲染，只在满足某些条件时显示旋转器，例如当从API获取数据时。此外，我们还可以使用CSS来设计喷丝板，使其与我们网站的整体设计相匹配。

什么是NextJS

Next.js是一个用于构建服务器渲染的React应用程序的JavaScript框架。它提供了一套功能和工具，使其能够轻松构建和部署高性能的Web应用程序，如自动代码分割、服务器端渲染和静态网站生成。

Next.js还简化了设置过程，并提供了一个开发环境，使开发人员能够专注于编写代码而不是配置应用程序。通过Next.js，开发者可以创建具有良好开发者体验和高水平性能的通用网络应用。

要开始使用，首先要创建一个新的NextJS应用程序，并在我们的开发服务器上运行，像这样 –

npx create-next-app spinner-app
cd phone-input
npm start

方法

首先，从@material-ui/core库中导入CircularProgress组件。

import { CircularProgress } from '@mui/material';

接下来，创建一个状态变量，它将决定是否应该显示旋转器。

const [isLoading, setIsLoading] = useState(false);

使用状态变量来控制旋转器的可见性。例如，你可以在你的组件的渲染方法中添加一个条件，检查isLoading状态是否为真，如果是，就显示旋转器—-。

{isLoading && <CircularProgress />}

最后，你可以使用setIsLoading函数来改变isLoading变量的状态。例如，你可以在一个组件第一次被渲染时将该状态设置为 “true”，然后在数据被取走后将其设置为 “false”。

useEffect(() => {
   setIsLoading(true);

   // Fetch data here
   setIsLoading(false);
}, []);

注意-以一种有控制的方式使用isLoading状态变量是很重要的，只有当你要获取数据时才将其设置为真，一旦收到数据，就将其设置为假。

现在我们已经讨论了这个方法，让我们来看看最后的代码。

例子

MyComponent.js

import React, { useState, useEffect } from 'react';
import { CircularProgress } from '@mui/material';
const MyComponent = () => {
   const [isLoading, setIsLoading] = useState(false);
   const [data, setData] = useState([]);
      useEffect(() => {
         setIsLoading(true);

         // Fetch data here
         fetch('https://jsonplaceholder.typicode.com/posts')
         .then(response => response.json())
         .then(data => {
            setData(data);
            setIsLoading(false);
         })
         .catch(error => console.log(error));
      }, []);
   return (
      <div>
         {isLoading ? (
            <CircularProgress />
         ) : (
            <div>
               {data.map(item => (
                  <div key={item.id}>
                     <h2>{item.title}</h2>
                     <p>{item.body}</p>
                  </div>
               ))}
            </div>
         )}
      </div>
   );
};
export default MyComponent;

index.js –

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import MyComponent from "./MyComponent";
const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
root.render(
   <StrictMode>
      <MyComponent />
   </StrictMode>
);