next开发中，如何测试骨架屏显示

最新推荐文章于 2025-12-15 07:24:15 发布

原创最新推荐文章于 2025-12-15 07:24:15 发布 · 211 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

以组件UsernamePasswordLogin为例

1、在 `UsernamePasswordLogin` 组件中添加人为延迟：

export async function UsernamePasswordLogin() {
  // 添加 3 秒延迟
  await new Promise((resolve) => setTimeout(resolve, 3000));
  
  return (
    // 你的登录表单内容
  )
}

2、如果想要一直显示骨架屏进行开发调试，可以临时注释掉实际组件：

<Suspense
  fallback={
    <div className="w-[400px] p-6 space-y-4 bg-white/80 backdrop-blur-sm rounded-lg shadow-lg">
      {/* ... 骨架屏代码 ... */}
    </div>
  }
>
  {/* 临时注释掉实际组件，这样就会一直显示骨架屏 */}
  {/* <UsernamePasswordLogin /> */}
</Suspense>