Nextjs13 revalidateTag 在等待重新验证时加载模态

Question

有一个简单的问题要问你。我正在开发一个连接到 Flask 后端的 Next.js 前端应用程序。因此，当单击按钮时，我使用 startTransition() 函数触发服务器操作。一旦获取数据，该操作就会包含一个 revalidateTag（我将分享下面的代码）。现在，我想显示一个加载模式组件。问题是，重新验证会影响抽屉组件中使用的数据，我希望用户在重新验证正在进行时冷静下来 - 同时让他们保持在循环中。总而言之，我正在寻找一种等待验证的方法。干杯！

在这里，我正在开始我的操作，在挂起时，我的加载模式存在，但问题是它仅在操作获取数据时存在，完成后，重新验证开始，模式消失了，我不确定在我的重新验证过程中如何调用它。

 startTransition(() =>
      deleteSources(email, selectedChannelIds)
    );
 {isPending && <LoadingModal />}

调用的操作

export async function deleteSources(
  email: string,
  channels: WorkspaceChannel[]
) {
  const res = await fetch(
    `https://someroute/test/leave_channels/${email}`,
    {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(channels),
    }
  );
  revalidateTag('groups');
}

我已经尝试了我找到的所有内容，但没有找到任何相关内容。

Answer 1

您可以在这里查看讨论：https://github.com/vercel/next.js/discussions/53206