add 'loading' as initial room state

src/pages/treff.js

@@ -1,14 +1,20 @@
 import React, { useEffect, useState } from "react"
 import Layout from "../components/layout"
 
+const roomStateData = {
+  loading: { text: "lade…", color: "white" },
+  open: { text: "OFFEN", color: "forestgreen" },
+  closed: { text: "GESCHLOSSEN", color: "firebrick" },
+}
+
 export default () => {
-  const [opened, setOpened] = useState(false)
+  const [openState, setOpenState] = useState("loading")
 
   useEffect(() => {
     async function fetchState() {
       const response = await fetch("https://status.ctdo.de/api/simple/v2")
       const json = await response.json()
-      setOpened(json.state)
+      setOpenState(json.state ? "open" : "closed")
     }
     fetchState()
   }, [])
@@ -17,8 +23,8 @@ export default () => {
     <Layout>
       <h2>
         Raumstatus:{" "}
-        <span style={{ color: opened ? `forestgreen` : `firebrick` }}>
+        <span style={{ color: roomStateData[openState].color }}>
-          {opened ? "OFFEN" : "GESCHLOSSEN"}
+          {roomStateData[openState].text}
         </span>
       </h2>
     </Layout>