我正在Web应用程序中使用Supabase进行身份验证。我注意到，当我已经登录并尝试导航到登录页面进行测试时，它会在重定向到正确的受保护路由之前简要显示登录页面。即使使用useSessionContext（）设置了isLoading状态，也会发生这种情况。
我希望它在isLoading为true时显示CircularProgress，然后，一旦isLoading为false且session为true（表示我已经登录），它将直接重定向我而不显示登录页面。然而，在实践中，我在重定向发生之前会看到登录页面。
在开发模式下，在重定向之前，此登录页面可见几秒钟。在生产模式下（使用npm start），它更像是一个 Flink 。为什么会发生这种情况，我如何使它只显示循环进度，而加载，然后直接重定向，如果我已经登录？

HOC组件

import CircularProgress from '@mui/material/CircularProgress';
import { useSessionContext } from '@supabase/auth-helpers-react';
import { useRouter } from 'next/router';
import { FC, useEffect } from 'react';
import ErrorIcon from '@mui/icons-material/Error';
import { Typography } from '@mui/material';

export const withAuth = <T extends Record<string, unknown>>(Component: FC<T>, redirectLink = '/') => {
    const AuthenticatedComponent: FC<T> = (props) => {
        const router = useRouter();
        const { isLoading, session, error } = useSessionContext();

        useEffect(() => {
            const checkAuth = async () => {
                if (session) {
                    await router.replace(redirectLink);
                }
            };
            checkAuth();
        }, [session, router]);

        if (isLoading) return <CircularProgress color='primary' size={'2rem'} />;

        if (error)
            return (
                <>
                    <ErrorIcon color='error' fontSize='large' />
                    <Typography variant='body1'>We are experiencing technical difficulties. Please try again later.</Typography>
                </>
            );

        return <Component {...(props as T)} />;
    };

    return AuthenticatedComponent;
};

登录页面

const LoginPage = () => {
    const supabaseClient = useSupabaseClient();
    return (
        <Box sx={{ width: '50%', padding: '50px' }}>
            <Auth redirectTo='/' appearance={{ theme: ThemeSupa }} supabaseClient={supabaseClient} providers={['google']} socialLayout='horizontal' />
        </Box>
    );
};

export default withAuth(LoginPage);