preloader

README.md

@@ -58,6 +58,7 @@ Free meal planner for cooks short on ideas! (like me …)
 - Get a full menu (Starter, Main, Dessert + Cocktail)
 - Send a daily suggestion to newsletter
 - History
+- Language selection
 
 ## Supports
 
@@ -93,9 +94,7 @@ Free meal planner for cooks short on ideas! (like me …)
 ## TO DO
 
 - add sidenav on mobile
-- accounts v2 (profile page)
 - send message after contact form validation (confirm to sender and msg+info to admin)
 - code cleanup (props and refactoring)
-- put a preloader
 - Back to top button
 - Take a look at some components [here](http://react-materialize.github.io/react-materialize/?path=/story/css-grid--default)

src/App.js

@@ -17,6 +17,7 @@ import { getData } from "./utils/methods";
 import history from "./utils/history";
 import { Profile } from "./pages/Profile";
 import { PrivateRoute } from "./components/PrivateRoute";
+import { PreLoader } from "./components/PreLoader";
 
 export const App = () => {
   const { loading } = useAuth0();
@@ -109,7 +110,9 @@ export const App = () => {
   const buttonUrl = "/random";
 
   return loading ? (
-    <div>Loading</div>
+    <div className="container center-align valign-wrapper">
+      <PreLoader />
+    </div>
   ) : (
     <Router history={history}>
       <header>

src/pages/Profile.jsx

@@ -1,17 +1,23 @@
 import React from "react";
 import { useAuth0 } from "../utils/auth0-spa";
+import { PreLoader } from "../components/PreLoader";
 
 export const Profile = () => {
   const { loading, user } = useAuth0();
 
-  return loading || !user ? (
-    <div>Loading ... </div> // is catched by PrivateRoute
+  return loading || !user ? ( // is catched by PrivateRoute
+    <div className="container center-align">
+      <PreLoader />
+    </div>
   ) : (
     <div className="container">
-      <img className="responsive-img" src={user.picture} alt="Avatar" />
+      <img className="circle responsive-img" src={user.picture} alt="Avatar" />
       <h2>{user.name}</h2>
-      <p>{user.email}</p>
-      <code>{JSON.stringify(user, null, 2)}</code>
+      <p>
+        <b>Email: </b>
+        {user.email}
+      </p>
+      {/* <code>{JSON.stringify(user, null, 2)}</code> */}
     </div>
   );
 };