Rendering the nested component before the AuthProvider component renders

[LuisGuerraa]

Hi guys. I am building an React app and I have wrapped an HashRouter (with the home page) in the AuthProvider component and before the AuthProvider renders it shows like 2s of the nested component before completing the render of AuthProvider (showing some content before authentication). Is there anything I can do?

[pseudoramble]

Hi there. I would try do a check to see if the user is signed in already or if oidc-react is still loading. If it's loading and there is content that needs to be hidden from them, show a loading component or nothing instead.

I don't know specifically what you need, but let's say you want to hide TheLayout from your example in the screenshot. It would look something like this:

<Route
  path="/"
  name="home"
  render={props => {
    const auth = useAuth();

    if (auth.isLoading) {
      return <div>Loading Component Here</div>;
    }
    
   return <TheLayout {...props} />;
  }}
/>

Assuming you haven't changed the auto sign-in default, which looks like it's the case, then when this finishes loading it should have redirected the user to sign-in. Once they return and oidc-react has loaded, it should render as expected.

[LuisGuerraa]

Hey, thanks that helped a lot! I already can utilize the Loading component before rendering the layout.But, still I have another problem, I am using useAuth() to get the picture and name of the logged in account and it takes a ridiculous amount of time (1min). I used my own Identity Server and "https://demo.identityserver.io/" but the times are similar. Is that normal, a problem with useAuth() or the IdentityServer's latency? (auth.isLoading is true after credential authentication because the userData retrieved is null for quite some time ).

[pseudoramble]

That sounds definitely like a network related issue unfortunately. In my apps assuming the Identity backend I'm using is healthy I've never seen everything take more than a second, and it's usually much less than that.

Sorry about that!

[LuisGuerraa]

It's all fixed! Thanks for the help.