useSessionContext() + loading state?

What are some best practices on handling the time the session is being fetched?

Tried adding a loading state here but keep hitting the redirect /login path because session is null in the initial render. Is there an isFetching state I can pull from useSessionConetxt?

export const Home = ({ scenes }: { scenes: Scene[] }) => {
    // TODO display username somewhere
    const { session } = useSessionContext();
    const { profile, creatingProfile, setProfile } = useCustomerContext(); // active profile
    const { user, isLoading } = useUserInfo(session && session.user ? session.user.id : null)
    const router = useRouter();
    const { profile: profileQueryParam } = router.query;

    if (isLoading) {
        return (
            // tailwind center aligned full screen column in the middle
            <div className="flex flex-col items-center justify-center h-screen">
                <Loader>Loading</Loader>
            </div>
        )
    }

    if (!isLoading && !user) {
        router.push('/login');
        return null;
    }
Was this page helpful?