Add on upgrade listener for DB and overlay when upgrading

src/components/UpgradingLoadingOverlay.js

@@ -0,0 +1,80 @@
+import React, { useState, useEffect } from "react";
+import { Text } from "theme-ui";
+
+import LoadingOverlay from "./LoadingOverlay";
+
+import { shuffle } from "../helpers/shared";
+
+const facts = [
+  "Owls can rotate their necks 270 degrees",
+  "Not all owls hoot",
+  "Owl flight is almost completely silent",
+  "Owls are used to represent the Goddess Athena in Greek mythology",
+  "Owls have the best night vision of any animal",
+  "Bears can run up to 40 mi (~64 km) per hour ",
+  "A hibernating bear’s heart beats at 8 bpm",
+  "Bears can see in colour",
+  "Koala bears are not bears",
+  "A polar bear can swim up to 100 mi (~161 km) without resting",
+  "A group of bears is called a sleuth or sloth",
+  "Not all bears hibernate",
+];
+
+function UpgradingLoadingOverlay() {
+  const [subText, setSubText] = useState();
+
+  useEffect(() => {
+    let index = 0;
+    let randomFacts = shuffle(facts);
+
+    function updateFact() {
+      setSubText(randomFacts[index % (randomFacts.length - 1)]);
+      index += 1;
+    }
+
+    // Show first fact after 10 seconds then every 20 seconds after that
+    let interval;
+    let timeout = setTimeout(() => {
+      updateFact();
+      interval = setInterval(() => {
+        updateFact();
+      }, 20 * 1000);
+    }, 10 * 1000);
+
+    return () => {
+      clearTimeout(timeout);
+      if (interval) {
+        clearInterval(interval);
+      }
+    };
+  }, []);
+
+  return (
+    <LoadingOverlay>
+      <Text as="p" variant="body2" m={1}>
+        Database upgrading, please wait...
+      </Text>
+      {subText && (
+        <>
+          <Text
+            sx={{ maxWidth: "200px", textAlign: "center" }}
+            as="p"
+            variant="caption"
+            m={1}
+          >
+            We're still working on the upgrade. In the meantime, did you know?
+          </Text>
+          <Text
+            sx={{ maxWidth: "200px", textAlign: "center" }}
+            as="p"
+            variant="body2"
+          >
+            {subText}
+          </Text>
+        </>
+      )}
+    </LoadingOverlay>
+  );
+}
+
+export default UpgradingLoadingOverlay;