From 64933eedb73964c30bc81a74446f50197a43b4d2 Mon Sep 17 00:00:00 2001
From: Alberto Defendi <1369-ahl-berto@users.noreply.gitlab.inf.unibz.it>
Date: Thu, 20 May 2021 14:06:22 +0200
Subject: [PATCH] Display progress while the async call is running.
This prevents the Children to display while the calls are performing
---
.../RestrictedRoute/RestrictedRoute.tsx | 17 ++++++++++-------
1 file changed, 10 insertions(+), 7 deletions(-)
diff --git a/src/components/RestrictedRoute/RestrictedRoute.tsx b/src/components/RestrictedRoute/RestrictedRoute.tsx
index 1230e56..3e3b5ee 100644
--- a/src/components/RestrictedRoute/RestrictedRoute.tsx
+++ b/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} />
)
}
/>
--
GitLab