title: Cannot set a Loader while big component renders
body: <p>I want to show a loader while my Analysis component (and its children) load but I cannot for the life of me get this to work.</p>
  <p>The main idea is:</p>
  <pre><code>&lt;Context&gt;
    &lt;Admin&gt;
      &lt;Analysis (with other child components) /&gt;
    &lt;/Admin&gt;
  &lt;/Context&gt;
  </code></pre>
  <p>The Admin component has a sidebar and the main view that is based upon a Switch/Router as seen here:</p>
  <pre><code> const Admin = () =&gt; {
    const classes = useStyles();
    const { pageLoading } = useContext();
  
    return (
      &lt;&gt;
        &lt;Box display=&quot;flex&quot;&gt;
          &lt;Sidebar
            routes={sidebarRoutes}
            logo={{
              innerLink: &quot;/&quot;,
              imgAlt: &quot;...&quot;,
            }}
          /&gt;
          &lt;Box position=&quot;relative&quot; flex=&quot;1&quot; className={classes.mainContent}&gt;
            &lt;Switch&gt;
              { pageLoading ? 
              &lt;Loader /&gt;
              : (&lt;Route
              path=&quot;/admin/stats&quot;
              component={Analysis}
              key={&quot;stats&quot;} /&gt;) }
            &lt;/Switch&gt;
            &lt;Container
              maxWidth={false}
              component={Box}
              classes={{ root: classes.containerRoot }}
            &gt;
            &lt;/Container&gt;
          &lt;/Box&gt;
        &lt;/Box&gt; 
      &lt;/&gt;
    );
  };
  </code></pre>
  <p>However, since the Analysis component and its children take a while to load, I want to display a loader like this (no API calls are made):</p>
  <p><a href="https://i.stack.imgur.com/LrvIq.png" rel="nofollow noreferrer">My current loading screen</a></p>
  <p>See, the problem is that I tried setting the context loading state in my useEffect hook inside the Sidebar component, like this:</p>
  <pre><code>  const handleTabClick = () =&gt; {
      setPageLoading(true);
    };
  </code></pre>
  <p>And then stopping the loader using the same context after the Analysis component mounts:</p>
  <pre><code>
    React.useEffect(() =&gt; {
      setPageLoading(false);
    }, []);
  
  </code></pre>
  <p>...And the loader gets stuck forever...
  My conclusion is that when the Context component has its state changed and re-renders, the Admin component then has pageLoading field set to &quot;true&quot; and doesn't display the Analysis component.</p>
  <p>What can I do to fix this? It's not crucial for my website but I'm trying to find a solution to this clunkiness. Clicking on the &quot;Analysis&quot; tab changes URLs in my browser search bar above, but nothing happens for a few seconds while the Analysis component loads. Looks stupid.</p>