如何在 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+ 次瀏覽

開啟你的職業生涯

完成課程獲得認證

開始學習
廣告