如何在从Firestore获取文档时显示循环进度指示器

import React, { useState, useEffect } from 'react';
import { CircularProgress } from '@material-ui/core'; // 使用Material-UI的循环进度指示器组件

const MyComponent = () => {
  const [loading, setLoading] = useState(true);
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      // 从Firestore获取文档的代码
      // 例如：const docRef = firestore.collection('myCollection').doc('myDocument');
      //       const snapshot = await docRef.get();
      //       const data = snapshot.data();
      //       setData(data);
      setLoading(false);
    };

    fetchData();
  }, []);

  return (
    <div>
      {loading ? (
        <CircularProgress /> // 显示循环进度指示器
      ) : (
        <div>
          {/* 显示从Firestore获取的数据 */}
          {data && <p>{data}</p>}
        </div>
      )}
    </div>
  );
};

export default MyComponent;

const express = require('express');
const app = express();
const Firestore = require('@google-cloud/firestore');
const firestore = new Firestore();

app.get('/data', async (req, res) => {
  try {
    // 从Firestore获取文档的代码
    // 例如：const docRef = firestore.collection('myCollection').doc('myDocument');
    //       const snapshot = await docRef.get();
    //       const data = snapshot.data();
    res.json(data);
  } catch (error) {
    res.status(500).json({ error: 'Failed to fetch data from Firestore' });
  }
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});