在我的Nextjs应用程序中，我在页面路由上使用了暂停来显示加载框架，直到内容准备就绪。
URL类似于'/organization/：orgId/activity'。
我正在使用服务器组件，并在我的ActivityList组件中使用Prisma从planetscale数据库获取数据。
如果我从一个.. orgId/activity转到另一个.. orgId/activity，会发生以下情况：
1.我看到的 backbone 装载机，这是悬念后备
1.我看到上一页的旧活动列表UI
1.旧的UI弹出并显示新的Activity列表。
每次我在两条路线之间导航时都会发生这种情况（我也有另一个组件的相同问题）
下面是页面组件代码：

const ActivityPage = async ({ params }: Props) => {
  const isSubscriped = await checkSubscription()
  

  return (
    <div className="w-full space-y-2">
      <Info isSubscriped={isSubscriped} />
      <Separator />
      <Suspense key={params.organizationId} fallback={<ActivityList.Skeleton />}>
        <ActivityList />
      </Suspense>
    </div>
  )
}

export default ActivityPage

字符串
下面是带有框架加载器代码的ActivityList组件：

import { ActivityItem } from "@/components/activity-item"
import { Skeleton } from "@/components/ui/skeleton"
import { db } from "@/lib/db"
import { auth } from "@clerk/nextjs"
import { redirect } from "next/navigation"

export const ActivityList = async () => {
  const { orgId } = auth()
  
  if (!orgId) {
    redirect("select-org")
  }

  const logs = await db.auditLog.findMany({
    where: {
      orgId,
    },
    orderBy: {
      createdAt: "desc"
    }
  })

  return (
    <ol className="space-y-4 mt-4">
      {logs.length ? (
        logs.map((log) => <ActivityItem key={log.id} auditLog={log} />)
      ) : (
        <p className="block text-muted-foreground text-center text-sm">No activity found in this organization</p>
      )}
    </ol>
  )
}

ActivityList.Skeleton = function() {
  return (
    <ol className="space-y-4 mt-4">
      <div className="w-[75%] flex items-start gap-2">
        <Skeleton className="w-8 h-8 bg-neutral-200" />
        <Skeleton className="w-[75%] h-8 bg-neutral-200"/>
      </div>
      <div className="w-[75%] flex items-start gap-2">
        <Skeleton className="w-8 h-8 bg-neutral-200" />
        <Skeleton className="w-[60%] h-8 bg-neutral-200"/>
      </div>
      <div className="w-[75%] flex items-start gap-2">
        <Skeleton className="w-8 h-8 bg-neutral-200" />
        <Skeleton className="w-[75%] h-8 bg-neutral-200"/>
      </div>
      <div className="w-[75%] flex items-start gap-2">
        <Skeleton className="w-8 h-8 bg-neutral-200" />
        <Skeleton className="w-[55%] h-8 bg-neutral-200"/>
      </div>
      <div className="w-[75%] flex items-start gap-2">
        <Skeleton className="w-8 h-8 bg-neutral-200" />
        <Skeleton className="w-[80%] h-8 bg-neutral-200"/>
      </div>
    </ol>
  )
}

型
我所期望发生的是， backbone 加载器一直显示，直到新的活动列表准备好显示。
我试过将抓取移动到页面组件，我试过如果日志尚未定义则返回null，我试过在线寻找答案，但没有任何运气，我试过等待一个新的Promise，它在1秒后得到解决，这确实隐藏了丑陋的弹出窗口。
任何见解或帮助将不胜感激。
谢谢
编辑：感谢@Jung hyeonuk帮我找到答案。原来Clerk组织ID还没有更新，这导致了这个问题。
添加了setActive方法对路由更改修复了这个问题！

const onRouteChange = async (href: string) => {
await setActive?.({organization: organization.id})
router.push(href)

型
}