- implement tips on loading screen

- implement centralized sections
- removed react-spinner package

src/components/router/LoadingScreen.js

@@ -1,15 +1,16 @@
 import { Fade, Modal } from "@material-ui/core";
 import React from "react";
+import { getRandomTip } from "../../data/tips";
 import Logo from "../shared/Logo";
 
-const LoadingScreen = ({ type }) => {
+const LoadingScreen = () => {
   return (
     <Modal open hideBackdrop>
       <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>
+            <span className="font-medium opacity-75">{getRandomTip()}</span>
           </div>
         </div>
       </Fade>

src/components/router/PrivateRoute.js

@@ -7,7 +7,7 @@ const PrivateRoute = ({ component: Component, location, ...props }) => {
   const { user, loading } = useContext(UserContext);
 
   if (loading) {
-    return <LoadingScreen type="User" />;
+    return <LoadingScreen message="Authenticating..." />;
   }
 
   if (!user) {