The logic of this component looks good to me.
- Assuming
isReceivedSessionis true, a<ReactFragment/>renders; if not, a<Spinner/>should render - Within the fragment, if
isLoadingApp || isLoadingAuthis truthy, a<Spinner/>component should render; if the statement is not truthy, a line and the router are returned and render.
But even when isLoadingApp logs true in the console, the spinner never shows up. I just see a fragment (nothing) or the expected line and router navigation path.
When isLoadingApp evaluates to true, a spinner component should be visible.
I feel like I'm missing something deeper here...where is the flaw in the logic?
const App = ({ classes }: IProps) => {
const dispatch = useDispatch();
const [isReceivedSession, setIsReceivedSession] = useState(false);
const isLoadingAuth: boolean = useSelector(authIsLoadingSelector);
const isLoadingApp: boolean = useSelector(appIsLoadingSelector);
useEffect(() => {
(async () => {
try {
const sessionData = await CognitoClient.currentSession();
const currentSessionToken = sessionData.getAccessToken().getJwtToken();
if (currentSessionToken) {
dispatch(authActions.setAuthStatus(AUTH_STATUS.LOGGED_IN));
}
} finally {
setIsReceivedSession(true);
}
})();
}, []);
//all logging values properly
console.log("isReceivedSession", isReceivedSession);
console.log("isLoadingApp ", isLoadingApp);
console.log("isLoadingAuth ", isLoadingAuth)
return isReceivedSession ? (
//spinner never renders even when isLoadingApp is true
<Fragment>
{isLoadingApp ||
(isLoadingAuth && <Spinner size={48} className={classes.spinner} />)}
<HeaderLine />
<Router>
<Switch>
<Route exact path={APP_AUTH_PATH()} component={SignInScreen} />
<PrivateRoute
path={APP_DASHBOARD_PATH()}
component={DashboardScreen}
authenticationPath={APP_AUTH_PATH()}
/>
<Route
exact
path={APP_LANDING_PATH()}
render={() => <Redirect to={APP_DASHBOARD_PATH()} />}
/>
</Switch>
</Router>
</Fragment>
) : (
<Spinner size={48} className={classes.spinner} />
);
};
export default withStyles(styles)(App);
isReceivedSessionstate "masking" when the loading spinner should display? In other words, isisReceivedSessionset true at the same time any of the loading states are toggled false? Is it possible to create a running codesandbox demo that reproduces the issue that we can inspect and debug live?isLoadingApp || (isLoadingAuth && <Spinner size={48} className={classes.spinner} />)should probably be(isLoadingApp || isLoadingAuth) && <Spinner size={48} className={classes.spinner} />so if either of theisLoadingXstates is truthy the spinner will display. The parenthesis form an incorrect logical grouping.