【React】初めてのフロントエンド〜ランダムで今日行くラーメン二郎を決めてもらう〜

import { useEffect, useState } from 'react';
import './App.css';
import db from './firebase';
import { collection, getDocs, onSnapshot } from "firebase/firestore";
 
function App() {
  
  const [posts, setPosts] = useState([]);
  const [selectedPost, setSelectedPost] = useState(null);
  const [isLoading, setIsLoading] = useState(false);
 
  useEffect( () => {
    const postData = collection(db, "jirouFromTokyoAndKanagawa");
    getDocs(postData).then((snapShot) => {
      const postsData = snapShot.docs.map((doc) => ({ ...doc.data()}));
      setPosts(postsData);
    });
 
    onSnapshot(postData, (post) => {
      const postsData = post.docs.map((doc) => ({...doc.data()}));
      setPosts(postsData);
    });
  }, [])
 
  const handleButtonClick = () => {
    if (isLoading) {
      return;
    }
 
    setIsLoading(true);
    setTimeout(() => {
      if (posts.length > 0) {
        const randomIndex = Math.floor(Math.random() * posts.length);
        setSelectedPost(posts[randomIndex]);
      }
      setIsLoading(false);
    }, 2000);
  }
 
  return (
    <div className="App">
      <div className="App-header">
        <h1>じろるーれっと</h1>
      </div>
      <div className='mainContaienr'>
        <table className='tableLayout'>
          {isLoading ?
            <div className='circle-body'>
              <div className='spinner-box'>
                <div className="circle-border">
                  <div className="circle-core"></div>
                </div>
              </div>
            </div>:
              selectedPost && (
                <div key={selectedPost.store_name}>
                  <h1 className='title'>{selectedPost.store_name}</h1>
                  <tr>
                    <th>店名</th>
                    <th>{selectedPost.store_name}</th>
                  </tr>
                  <tr>
                    <th>住所</th>
                    <th>{selectedPost.store_address}</th>
                  </tr>
                  <tr>
                    <th>営業時間</th>
                    <th>{selectedPost.open_time}</th>
                  </tr>
                  <tr>
                    <th>定休日</th>
                    <th>{selectedPost.close_day}</th>
                  </tr>
                </div>
              )
            }
        </table>
        <div className='button-container'>
          <div>
            <button onClick={handleButtonClick} className='randomButton'>ラーメン屋を選ぶ</button>
          </div>
        </div>
      </div>
    </div>
  );
}
 
export default App;

:root {
  --main-background-color: #1e2739;
  --main-color: white;
}
 
.App, .App-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: var(--main-background-color);
  font-size: calc(10px + 2vmin);
  color: var(--main-color);
}
 
.App {
  min-height: 100vh;
}
 
.App-header {
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  width: 100%;
  padding: 20px 40px;
  box-sizing: border-box;
}
 
.tableLayout, .title {
  text-align: left;
  margin: auto;
}
 
.mainContaienr {
  width: 75%;
  height: 75%;
}
 
.randomButton {
  background-color: #00af4f;
  border: none;
  color: var(--main-color);
  text-align: center;
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
  padding: 10px 24px;
  border-radius: 100vh;
  margin: 50px auto 0;
  position: relative;
  transition: background-color 0.4s, transform 0.4s;
  cursor: pointer;
}
 
.randomButton:hover {
  background-color: #007f3b;
  color: white;
}
 
.randomButton:active {
	transform: translate(0,10px);
	border-bottom:none;
}
 
.spinner-box {
  width: 300px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
}
 
.circle-border, .circle-core {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}
 
.circle-border {
  width: 150px;
  height: 150px;
  padding: 3px;
  background: linear-gradient(0deg, rgba(63,249,220,0.1) 33%, rgba(63,249,220,1) 100%);
  animation: spin .8s linear 0s infinite;
}
 
.circle-core {
  width: 100%;
  height: 100%;
  background-color: var(--main-background-color);
}
 
@keyframes spin {
  from {
      transform: rotate(0);
  }
  to{
      transform: rotate(359deg);
  }
}
 
.circle-body {
  background-color: var(--main-background-color);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: flex-start;
}