如何在从firestore获取数据时显示加载微调器

import React, { useState, useEffect } from 'react';
import { db } from './firebase'; // 假设你已经配置好了Firebase
import Spinner from './Spinner'; // 假设你有一个Spinner组件

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

  useEffect(() => {
    const fetchData = async () => {
      try {
        const snapshot = await db.collection('yourCollection').get();
        const data = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
        setData(data);
      } catch (error) {
        console.error('Error fetching data: ', error);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  if (loading) {
    return <Spinner />;
  }

  return (
    <div>
      {data.map(item => (
        <div key={item.id}>
          {/* 渲染你的数据 */}
        </div>
      ))}
    </div>
  );
};

export default DataComponent;

import React from 'react';
import './Spinner.css'; // 假设你有一个CSS文件来定义加载微调器的样式

const Spinner = () => {
  return <div className="spinner"></div>;
};

export default Spinner;

.spinner {
  border: 4px solid rgba(0, 0, 0, 0.1);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border-left-color: #000;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}