Javascript 在next.js中单击按钮时，如何显示加载微调器而不是登录按钮？

你好

我只是在玩next.js，并尝试创建一个小论坛应用程序

经过长时间的谷歌搜索，我有以下问题：

如何在单击加载微调器而不是登录按钮时显示该微调器，直到解决问题，然后显示注销按钮？

我设法在登录和注销之间切换（我只需将req.user道具传递到navbar组件中，并可以有条件地显示它）

但是req对象中是否存在某种类型的prop，表明它尚未被解析

next.js应用程序在后台使用express

因此，有些路由只是指向其他页面的链接，而登录路由实际上是一个API路由

这只是使用passport进行身份验证，成功后将重定向到“/”

我找不到解决这个问题的办法

下面是我的导航栏的一个小预览：

{user ? (
            <Link href="/api/auth/logout">
              <Button color="inherit">Logout</Button>
            </Link>
          ) : (
            <Link href="/api/auth/facebook">
              <Button color="inherit">Login</Button>
            </Link>
          )}

但这只是给了我一个完整的页面加载指示器，我只想在登录时有一个小微调器

{isLoading ? (
            <p>Loading..</p>
          ) : user ? (
            <Link href="/api/auth/logout">
              <Button color="inherit">Logout</Button>
            </Link>
          ) : (
            <Link href="/api/auth/facebook">
              <Button color="inherit">Login</Button>
            </Link>
          )}

Router.events.on("routeChangeStart", url => {
  console.log(`Loading: ${url}`);
  NProgress.start();
});
Router.events.on("routeChangeComplete", () => NProgress.done());
Router.events.on("routeChangeError", () => NProgress.done());