如何在signInWithRedirect()之后等待onAuthStateChanged()解析时显示微调器

Question

当auth更改时，我正在尝试设置一个微调器。我试过用下面的方法。(如果微调器为真，它将替换整个路由器组件(

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);
}
});