如何在 NextJS 中添加加载动画？

我们可以使用条件渲染，仅在满足某些条件（例如，从 API 获取数据时）时才显示加载动画。此外，我们可以使用 CSS 来设置加载动画的样式，使其与我们网站的整体设计相匹配。

什么是 NextJS？

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

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

首先，创建一个新的 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);

  • 使用状态变量来控制加载动画的可见性。例如，您可以在组件的 render 方法中添加一个条件，该条件检查 isLoading 状态是否为 true，如果是，则显示加载动画：

{isLoading && <CircularProgress />}

  • 最后，您可以使用 setIsLoading 函数来更改 isLoading 变量的状态。例如，您可以在组件首次渲染时将状态设置为 true，然后在获取数据后将其设置为 false。

useEffect(() => {
   setIsLoading(true);
   
   // Fetch data here
   setIsLoading(false);
}, []);

注意：务必以受控的方式使用 isLoading 状态变量，仅在即将获取数据时才将其设置为 true，然后在接收到数据后将其设置为 false。

现在我们已经讨论了方法，让我们来看一下最终代码。

示例

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

更新于：2023年2月13日

6000+ 次浏览

开启你的职业生涯

完成课程获得认证

开始学习
广告