- switching from firestore to realtime DB

- implement debouncing tactic to sync data
- display sync indicator

src/components/router/LoadingScreen.js

@@ -1,17 +1,18 @@
+import { Fade, Modal } from "@material-ui/core";
 import React from "react";
-import Modal from "@material-ui/core/Modal";
-import Loader from "react-loader-spinner";
 import Logo from "../shared/Logo";
 
-const LoadingScreen = () => {
+const LoadingScreen = ({ type }) => {
   return (
     <Modal open hideBackdrop>
-      <div className="w-screen h-screen flex justify-center items-center outline-none">
-        <div className="flex flex-col items-center">
-          <Logo size="48px" className="mb-4" />
-          <Loader type="ThreeDots" color="#AAA" height={32} width={48} />
+      <Fade in>
+        <div className="w-screen h-screen flex justify-center items-center outline-none">
+          <div className="flex flex-col items-center">
+            <Logo size="48px" className="mb-4" />
+            <span className="font-medium opacity-75">Fetching {type}</span>
+          </div>
         </div>
-      </div>
+      </Fade>
     </Modal>
   );
 };

src/components/router/PrivateRoute.js

@@ -1,5 +1,5 @@
-import React, { useContext } from "react";
 import { navigate } from "gatsby";
+import React, { useContext } from "react";
 import UserContext from "../../contexts/UserContext";
 import LoadingScreen from "./LoadingScreen";
 
@@ -7,7 +7,7 @@ const PrivateRoute = ({ component: Component, location, ...props }) => {
   const { user, loading } = useContext(UserContext);
 
   if (loading) {
-    return <LoadingScreen />;
+    return <LoadingScreen type="User" />;
   }
 
   if (!user) {
@@ -15,7 +15,7 @@ const PrivateRoute = ({ component: Component, location, ...props }) => {
     return null;
   }
 
-  return <Component {...props} />;
+  return <Component user={user} {...props} />;
 };
 
 export default PrivateRoute;