Display progress while the async call is running.

This prevents the Children to display while the calls are performing

src/components/RestrictedRoute/RestrictedRoute.tsx

@@ -2,13 +2,13 @@ import React, { useState, useEffect, useContext } from 'react';
 import { Route, Redirect, RouteProps } from 'react-router-dom';
 import { AuthRoutes, NonAuthRoutes } from 'api/routes';
 import { isAuthenticated } from 'api/isAuthenticated';
+import { CircularProgress } from '@material-ui/core';
 
 /**
  *
  * */
 type Props = {
   Component: React.FC<RouteProps>;
-  restricted: boolean;
   path: string;
 };
 
@@ -22,22 +22,25 @@ type Props = {
 /* eslint-disable react/jsx-props-no-spreading */
 export const RestrictedRoute = ({ Component, path }: Props): JSX.Element => {
   const [authUser, setAuthUser] = useState<boolean>(false);
+  const [isLoading, setLoading] = useState<boolean>(false);
   useEffect(() => {
-    isAuthenticated(setAuthUser);
+    isAuthenticated(setAuthUser).then(() => setLoading(true));
   });
 
-  return (
+  return !isLoading ? (
+    <CircularProgress />
+  ) : (
     <Route
       path={path}
       render={(props: RouteProps) =>
-        authUser ? (
+        !authUser ? (
+          // Redirect to component.
+          <Component {...props} />
+        ) : (
           // Redirect to homepage.
           <Redirect
             to={{ pathname: `${AuthRoutes.dashboard}${AuthRoutes.home}` }}
           />
-        ) : (
-          // Redirect to component.
-          <Component {...props} />
         )
       }
     />