NextJS/React中Loading Skeleton加载骨架实现问题排查

核心问题 #

1. 条件判断逻辑错误
   你使用data?.slice(0,10).map(...)的写法，当data处于加载状态（值为undefined或null）时，整个map循环不会执行，嵌套在内部的骨架占位完全没有渲染机会。原代码里的{data ? <视频组件> : <骨架>}逻辑，因为外层map仅在data存在时运行，导致骨架永远无法显示。

2. 错误的骨架使用方式
   尝试将<Skeleton>作为videoSrc的 fallback 值，完全不符合组件 props 要求——videoSrc需要接收字符串类型的视频链接，不能传入 React 组件，这种写法只会导致组件失效或报错。

修正后的实现代码 #

{/* 数据未加载时，渲染固定尺寸的骨架占位 */}
{!data ? (
  Array.from({ length: 10 }).map((_, idx) => (
    <div key={idx} className="w-full aspect-video">
      <Skeleton className="w-full h-full" />
    </div>
  ))
) : (
  {/* 数据加载完成后，渲染视频播放器 */}
  data.slice(0, 10).map((item: any) => (
    <div key={item.id} className="w-full aspect-video">
      <HoverVideoPlayer videoSrc={item.videoLink} />
    </div>
  ))
)}

关键优化说明 #

• 优先处理骨架渲染：先判断data是否存在，不存在时直接生成10个骨架占位，确保数据加载前页面有固定尺寸的占位元素，彻底避免布局跳动。
• 统一容器尺寸：用aspect-video（Tailwind 预设16:9比例）或固定宽高类（如w-[320px] h-[180px]）设置容器尺寸，让骨架和视频播放器的尺寸完全匹配。
• 正确使用骨架组件：将<Skeleton>作为独立占位组件渲染，而非试图传递给视频播放器的videoSrc属性。

额外注意事项 #

• 确保正确导入 React Loading Skeleton 的样式：

  import Skeleton from 'react-loading-skeleton';
  import 'react-loading-skeleton/dist/skeleton.css';
  

• 确认HoverVideoPlayer组件会继承容器尺寸，或给组件本身设置固定宽高，避免视频加载后改变容器大小。

内容的提问来源于stack exchange，提问作者DennoFreezy