I am trying to protect my private pages using HOC withAuth. Protection works fine but i dont want users to see loading for second while access token is being retrieved from local storage. And if i were to just return null after redirecting i get error that says received div without enclosing div (or something like that). Is there any way to delay route transition ? My HOC is

export function withAuth<T extends TWithAuth = TWithAuth>(
   WrappedComponent: React.ComponentType<T>,
   ): React.ComponentType<T> {
const InnerComponent = (props: T) => {
    const [loading, setLoading] = useState(true);
    const router = useRouter();
    useEffect(() => {
        const accessToken = TokenService.getAccessToken();

        if (!accessToken) {
            router.replace('/auth/login');
        } else {
            setLoading(false);
        }
    }, []);
    return loading ? <div>loading</div> : <WrappedComponent {...props} />;
};

InnerComponent.displayName = `withAuth(${WrappedComponent.displayName || WrappedComponent.name}`;

return InnerComponent;

}