Clarification on Loader Usage in TanStack Router Auth Setup

[tony-james-2024]

Hi team,

I’ve been exploring the TanStack Router authentication setup guide, and I had a few questions regarding the loader and provider behavior in the example.

In the documentation (https://tanstack.com/router/latest/docs/framework/react/how-to/setup-auth-providers), the loader is returned from the InnerApp component (App.tsx). This means that when the login page is shown, the router is mounted. However, when the loader is shown (e.g., during authentication), does the router get unmounted? If so, could this cause any issues when remounting the router after loading completes?

Additionally, I’m wrapping my theme provider using the InnerWrap of TanStack Router. In this setup, I’m unable to access the theme inside the loader since the loader is outside the router and in App.tsx.

So, is this method in documentation above, the recommended approach for showing a loader during authentication?

Would it be better to; Show a loader within the root route by returning when the loading state is true, or Have a dedicated route/page for the loader?

I’d appreciate any guidance or best practices around this setup, especially regarding provider accessibility and router lifecycle during authentication.

Thanks in advance!