javascript - 在 NextJS/React 中加载 Skeleton 实现

Question

我从 Amazon S3 存储桶中获取一组视频链接，并将它们映射到名为 HoverVideoPlayer 的视频播放器组件中:

 {data?.slice(0, 10).map((item: any) => (
      <div key={item.id}>
        {data ? (
          <HoverVideoPlayer videoSrc={item.videoLink} />
        ) : (
          <Skeleton count={10} />
        )}
      </div>
    ))}

这会导致加载体验，其中多个图像/视频在 Tailwind 网格组件内按比例放大，直到完全加载，从而扭曲布局:

为了将这种加载改进为 YouTube 上使用的更精致的内容，我实现了“React Loading Skeleton”，以努力拥有一个固定大小的预加载器，该预加载器会占用网格列的空间，直到视频完全加载加载并缩放以防止布局跳转。

这是我第十次以上尝试实现加载骨架并使其在加载/扩展期间显示。我调整了骨架的高度和宽度，将组件放在播放器的上方和下方，将导入调整到精确的数据获取位置:

            <HoverVideoPlayer
                  videoSrc={item.videoLink || <Skeleton count={10} />}
                />

但没有成功，甚至连装载骷髅的影子都没有出现。我做错了什么？

https://codesandbox.io/p/sandbox/happy-antonelli-dt1enq?file=%2Fpages%2Findex.tsx

Answer 1

据我了解，您希望在获取数据时显示骨架？

我认为这样的事情应该有效:

<main className={styles.main}>
   {!data?.length && new Array(10).fill().map(() => <Skeleton count={10} />)}}
   {data?.slice(0, 10).map((item: any) => (
      <div key={item.id}>
         <HoverVideoPlayer videoSrc={item.videoLink}  />
      </div>
    ))}
</main>

并且不要忘记导入骨架的样式:

导入'react-loading-sketch/dist/sketch.css'