- designing the dashboard

- resume preview
- create resume modal

src/components/router/LoadingScreen.js

@@ -0,0 +1,19 @@
+import React from "react";
+import Modal from "@material-ui/core/Modal";
+import Loader from "react-loader-spinner";
+import Logo from "../shared/Logo";
+
+const LoadingScreen = () => {
+  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} />
+        </div>
+      </div>
+    </Modal>
+  );
+};
+
+export default LoadingScreen;

src/components/router/PrivateRoute.js

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