myheats

commit 90edce05481e19a20c0f176024b4e32b5268407e
parent f130976454e11cc703e37f3a0951e66145cd8c5c
Author: Andreas Gruhler <andreas.gruhler@adfinis.com>
Date:   Tue,  4 Apr 2023 23:59:31 +0200

feat: loading indicator for heatlist

Diffstat:
M
src/App.css
 | 
4
++++
M
src/Heats.js
 | 
9
++++++---

2 files changed, 10 insertions(+), 3 deletions(-)
diff --git a/src/App.css b/src/App.css
@@ -31,3 +31,7 @@ table.leaderboard tr td:first-child::before {
   min-width: 1em;
   margin-right: 0.5em;
 }
+
+button:disabled {
+  visibility: hidden;
+}
diff --git a/src/Heats.js b/src/Heats.js
@@ -16,36 +16,39 @@ async function deleteHeat(e, heatId, heatName) {
 }
 
 function HeatForm({session}) {
+  const [loading, setLoading] = useState(false)
   const [heats, setHeats] = useState([])
 
   useEffect(() => {
     (async () => {
+      setLoading(true)
       const heatList = await supabase.from('heats').select()
       if (heatList.error === null)
         setHeats(heatList.data)
+        setLoading(false)
     })();
   }, [])
 
   return (
     <div>
-      <h1>Manage Heats</h1>
+      <h1>Manage Heats  <button disabled={!loading}>{loading ? '🔄 loading' : ''}</button></h1>
       <table>
         <thead>
           <tr>
+            <th>Created at</th>
             <th>Name</th>
             <th>Location</th>
             <th>Planned start</th>
-            <th>Created at</th>
             <th>Delete</th>
           </tr>
         </thead>
         <tbody>
           {heats.map(h => (
             <tr key={h.id}>
+              <td className='right'className='right'>{new Date(h.created_at).toLocaleString()}</td>
               <td>{h.name}</td>
               <td>{h.location}</td>
               <td className='right'>{h.planned_start}</td>
-              <td>{new Date(h.created_at).toLocaleString()}</td>
               <td className='right'><button onClick={e => deleteHeat(e, h.id, h.name)}>🗑️</button></td>
             </tr>
           ))}