如何以反应或有条件渲染的布局显示加载屏幕？

Question

我现在真的很胖，无法解决这个简单的问题

我基本上想在我的应用尚未准备就绪时显示加载屏幕。但是如果应用程序准备就绪，我想显示一个登录按钮或用户主屏幕

useEffect(() => {
        setLoaded(true)
}, [])
return loaded ? (
    <div>
        {user.isLoggedIn ? (
            <>
                <div> welcome {user} </div>
            </>
        ) : (
            <SignInButton onClick={login}>
                <img src={'/images/google.png'} /> Sign in with Google
            </SignInButton>
        )}
    </div>
) : (
    <LoadingContainer>
        <img src="/images/loading.gif" width="30" style={{ margin: 'auto' }} />
    </LoadingContainer>
)

现在闪烁，它完成加载的位置，然后显示google屏幕，然后滑动到主屏幕。我猜是因为在用户准备好之前，我将加载设置为false。我该如何解决这个问题，以实现无缝连接？

我也尝试过这个

useEffect(() => {
      if(user){
        setLoaded(true)
   }
}, [])

但显然这很愚蠢，因为当我未登录时，它将永远显示正在加载。请有人帮我解决下午的痛苦

Answer 1

[尝试使用setTimeout方法，例如，让加载程序显示3秒钟，例如

useEffect(() => {
        setTimeout(setLoaded(true), 3000);
}, [])