reactjs - 在等待列表渲染时有条件地渲染微调器

Question

我有一个组件用于渲染几个不同的卡片。这些卡片需要一些时间来渲染，我想显示CircularProgress通过 Material-UI 导入的微调器。

我不确定如何实现这一点，我在 Stack 上看到了一些使用某种加载状态的帖子，但不确定这将如何适应这个特定的组件。

任何建议将不胜感激。

import { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import './Home.css';
import Layout from '../../components/Layout/Layout';
import Card from '../../components/Card/Card';
import img from './level-1.jpg';
import CircularProgress from '@material-ui/core/CircularProgress';

const Home = ({ levels = {}, setCurrentLevel }) => {

    const gameLevels = levels.map((level) => {
        return (
            <Link to="/game" onClick={() => setCurrentLevel(level.id)}>
                <Card key={level.id} level={level} />
            </Link>
        );
    });

    return (
        <Layout>
            <div className="main-container">
                <div className="grid-container">
                    {gameLevels}
                </div>
            </div>
        </Layout>
    );
}

export default Home;

标签： reactjs