0

The logic of this component looks good to me.

  • Assuming isReceivedSession is true, a <ReactFragment/> renders; if not, a <Spinner/> should render
  • Within the fragment, if isLoadingApp || isLoadingAuth is 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);
2
  • Is the local isReceivedSession state "masking" when the loading spinner should display? In other words, is isReceivedSession set 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? Commented Mar 8, 2022 at 23:08
  • 1
    Only "odd" thing I see is that isLoadingApp || (isLoadingAuth && <Spinner size={48} className={classes.spinner} />) should probably be (isLoadingApp || isLoadingAuth) && <Spinner size={48} className={classes.spinner} /> so if either of the isLoadingX states is truthy the spinner will display. The parenthesis form an incorrect logical grouping. Commented Mar 8, 2022 at 23:18

1 Answer 1

2

The logical OR operator "||" doesn't look at the second condition whenever the first condition is already true.

Sign up to request clarification or add additional context in comments.

4 Comments

Thanks, noted; in this particular case, if the first condition isLoadingApp condition is true that should still return a render of the spinner. So the problem remains.
I'm saying if isLoadingApp is true, the way it's setup now it will not look at the second condition or the spinner component. Thats why the spinner doesn't get printed.
Ah yes yes. @jmelger @DrewReese you both helped! The way it was set up, given the operator precedence, even with the perentheses around (isLoadingAuth && <Spinner/>) the returned value of everything would be simply true any time isLoadingApp is true. The spinner would have only rendered if isLoadingApp is false and isLoadingAuth is true, which would be rare and not what I was aiming for.
Glad we could be of help mate

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.