在signInWithRedirect（）之后等待onAuthStateChanged（）解决时如何显示微调器

Question

当身份验证更改时，我正在尝试设置微调器。 我尝试过使用以下方法。 （如果 spinner 为真，它将替换整个路由器组件）

function App() {
  const [currentUser, setCurrentUser] = useState(false);
  const [spinner, setSpinner] = useState(false);

  useEffect(() => {
    setSpinner(true);
    onAuthStateChanged(auth, (user) => {
      if (user) {
        setCurrentUser(user);
        setSpinner(false);
      } else {
        setCurrentUser(false);
      }
    });
  }, []);

  return (
    <Context.Provider value={{ db, auth, currentUser, setSpinner }}>
      {spinner? (
        <Spinner />
      ) : (
        <BrowserRouter>
          <Navbar></Navbar>
          <Routes>
            <Route
              path='/'
              element={currentUser ? <MessageCenter /> : <Landing />}
            />
          </Routes>
        </BrowserRouter>
      )}
    </Context.Provider>
  );
}

export default App;

我在这里面临的问题是，在第一次重新加载时，微调器不会显示，但是如果我再次重新加载我的页面，微调器会显示（因为它在 app.js 中处于使用效果）应该是 onAuthStateChanged每次加载应用程序时调用（设置 currentUser、注销或登录），因此，我在 app.js 上的 useEffect 中使用它。

有没有办法在等待 onAuthStateChanged 时显示微调器？

Answer 1

如果您希望微调器在加载后立即显示，您是否考虑将其默认设置为true ？

const [spinner, setSpinner] = useState(true); // 👈 set default to true

要隐藏微调器：

onAuthStateChanged(auth, (user) => {
  setSpinner(false); // 👈 move this outside of the conditional
  if (user) {
    setCurrentUser(user);
  } else {
    setCurrentUser(false);
  }
});