Content Flash in Protected Route with React HOC

Help
,
1

I am experimenting with Auth0 and React (actually Preact) and have created a ProtectedRoute HOC that gets a token asynchronously from Auth0 using a requested permission (scope). If the token is successful, then it renders the view, or it will redirect to the login view if the user is not authenticated or it will show an access denied message if the user does not have the appropriate permission.

I am experiencing a loading flash on the page while the token is obtained asynchronously from Auth0. This also means the entire DOM gets re-rendered every time so it looks more like a traditional web app where the entire page is loaded each time.

I’m not sure how to prevent this content flash while the token is obtained. Is there a better way to be implementing this protected route?

import { FunctionComponent, h } from "preact";
import { useAuth0 } from "@auth0/auth0-react";
import { useLocation } from "preact-iso";
import routeHelper from "../../components/routeHelper";
import { useEffect, useState } from "preact/hooks";
import { audience, connection, scopes } from "../../components/authorisation";

type Props = {
    scope: string;
    component: FunctionComponent<any>;
};

const ProtectedRoute: FunctionComponent<Props> = (props) => {
    const { loginWithRedirect, isLoading, isAuthenticated, getAccessTokenSilently } = useAuth0();
    const location = useLocation();
    const [scope, setScope] = useState("");
    
    const loading = <div class="p-2 text-center">Loading...</div>;

    const login = () => {
        loginWithRedirect({
            authorizationParams: {
                connection,
                scope
            },
            appState: {
                returnTo: window.location.href
            },
        });
    };

    const checkAccess = async () => {
        try {
            await getAccessTokenSilently({
                authorizationParams: {
                    audience,
                    scope: props.scope
                }
            });
            setScope(props.scope);
        } catch (error) {
            const message = (error as Error).message;
            if (message == "Login required") {
                login();
            } else {
                location.route(routeHelper.accessDenied);
            }
        }
    };

    useEffect(() => {
        checkAccess();
    }, [getAccessTokenSilently, props.scope]);

    
    if (isLoading || !isAuthenticated || !scope) {
        return loading;
    }

    return h(props.component, props);
};

export default ProtectedRoute;