La lógica de este componente me parece buena.
isReceivedSession
es verdadero, se representa un <ReactFragment/>
; si no, un <Spinner/>
debería representarisLoadingApp || isLoadingAuth
es cierto, un componente <Spinner/>
debería mostrarse; si la declaración no es veraz, se devuelve una línea y el enrutador y se procesa. Pero incluso cuando isLoadingApp
registra verdadero en la consola, la rueda giratoria nunca aparece. Solo veo un fragmento (nada) o la línea esperada y la ruta de navegación del enrutador.
Cuando isLoadingApp
evalúa como verdadero, debe verse un componente giratorio.
Siento que me estoy perdiendo algo más profundo aquí... ¿dónde está la falla en la lógica?
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);
El operador lógico OR "||" no mira la segunda condición cuando la primera condición ya es verdadera.