我有一个用React编写的网页/应用程序，它有两个组件，主页面和页面顶部的导航栏。导航栏有一个Google登录按钮组件，允许用户使用他们的Google帐户登录。当用户登录时，导航栏还有一个组件，显示用户名和个人资料图片。下面是一个示例截图：
Imgur
问题是，当用户导航到其他页面时，头像和文本总是需要大约一秒钟才能显示出来，这使得页面导航变得很糟糕。
当用户导航到其他页面时，用户头像和名字需要一秒钟才能显示出来，这会导致页面上的其他内容突然向下移动。
下面是部分代码：App.js

const App = () => {
    return(
        <div>
            <Navigation/>
            <Routes>
                <Route path="/" element={<Landing/>} />
                <Route path="/extrainfo" element={<ExtraInfo/>} />
                <Route path="/test" element={<Test/>}/>
                <Route path="/userpage" element={<Userpage/>}/>
            </Routes>
        </div>
            
    );
}

Navigation.js

const Navigation = () => {
    let userInfo = JSON.parse( localStorage.getItem('userInfo') );

    const [isLoggedIn, setIsLoggedIn] = useState(false);
    const navigate = useNavigate();

    const onSuccess = async (googleRes) => {
        localStorage.setItem("user", JSON.stringify(googleRes));
        setIsLoggedIn(true);
        
        try{
            let userResponse = await UserService.getUser()
            if(userResponse.status === 200){
                
                setIsLoggedIn(true);
                navigate("/userpage");
            } 
        }
        catch(error){
            if (error.response.status === 404){
                /* navigate("/extrainfo"); */
            }
            const resMessage = (error.response && error.response.data && error.response.data.message) || error.message || error.toString();
            console.log(resMessage);
        }
    };

    const onFailure = (err) => {
        console.log('failed', err);
    };

    const onLogout = (res) => {
        console.log("log out");
        UserService.logout();
        setIsLoggedIn(false);
    }

    useEffect(() => {
        document.title = 'Navigation';   

        const start = () =>{
            gapi.client.init({
                clientId: process.env.REACT_APP_GOOGLE_CLIENT_ID,
                scope: 'email',
            });
        }
        gapi.load('client:auth2', start);

    }, []);

    return (
        <nav className="dt w-100 border-box pa2 ph5-ns bg-#f5f5f5">
            <a href="/" title="Home">
                <img src="mylogo.png" 
                    className="dib w3 h3 br-100" alt="Site Name"/>
            </a>
            <div className="dtc v-mid w-40 tr">
                { isLoggedIn ? (
                    <GoogleLogout
                    clientId= {process.env.REACT_APP_GOOGLE_CLIENT_ID}
                    buttonText="Logout"
                    onLogoutSuccess={onLogout}
                />) : (
                    <GoogleLogin 
                    clientId= {process.env.REACT_APP_GOOGLE_CLIENT_ID}
                    buttonText="Sign in"
                    onSuccess={onSuccess}
                    onFailure={onFailure}
                    cookiePolicy={'single_host_origin'}
                    isSignedIn={true}
                />
                )}
            </div>
            <div className="dtc v-mid w-10 tr">
                <a className="link dim white f6 f5-ns dib mr3 mr4-ns bg-dark-gray pa2" href="landing" title="Landing">Enter page</a>
            </div>
            <MyAvatar isLoggedIn={isLoggedIn}/>
        </nav>
    );
}

MyAvatar.js

const MyAvatar = (isLoggedIn) => {
    const usrData = JSON.parse( localStorage.getItem('user') );
    let usrObj = {};
    let usrName = null;
    let usrImg = null;
    
    if (usrData) {
        usrObj = usrData['profileObj'];
        usrName = usrObj['name'];
        usrImg = usrObj['imageUrl'];
    }
    
    if(isLoggedIn.isLoggedIn === true ){
        return(
            <div className="dtc v-mid w-10 pa1 tc">
                <img
                    src={usrImg}
                    className="br-100 h3 w3 dib" alt={usrName + ' avatar'}>
                </img>
                <p className="avatar_name">{usrName}</p>
            </div>
        )
    }
    
}