React Virtuoso自动高度列表切换Shimmer时延迟跳转问题求助

问题背景 #

• 使用场景：从API获取曲目列表，请求完成前展示shimmer加载骨架，请求完成后用React Virtuoso渲染自动高度的列表（无法设置固定高度）
• 核心问题：shimmer消失后，React Virtuoso列表显示存在100ms内的延迟，导致页面出现跳转感，用户体验受影响
• 验证过程：通过对比普通列表与Virtuoso列表的渲染流程，Chrome DevTools性能面板录制显示，仅Virtuoso列表存在该延迟，跳转现象可复现

原因分析 #

React Virtuoso在渲染自动高度列表时，需要先计算列表项的实际高度以确定虚拟滚动的视口范围，这个计算过程会产生短暂延迟——当shimmer卸载后，Virtuoso还未完成高度计算，页面会出现短暂的空白或高度塌陷，进而引发跳转。

解决方案 #

1. 预加载列表项高度占位 #

在Virtuoso初始化前，用与实际列表项高度一致的占位元素填充，替代shimmer的位置，维持页面高度避免塌陷：

// 假设列表项平均高度为80px
const PlaceholderList = ({ count }) => (
  <div style={{ height: `${count * 80}px` }}>
    {Array.from({ length: count }).map((_, idx) => (
      <div key={idx} style={{ height: '80px', margin: '8px 0' }} />
    ))}
  </div>
)

// 渲染逻辑
{isLoading ? <Shimmer /> : (items.length > 0 ? <Virtuoso ... /> : <PlaceholderList count={10} />)}

2. 延迟卸载shimmer，同步Virtuoso渲染 #

利用useEffect监听加载状态，延迟隐藏shimmer，让Virtuoso在shimmer下方提前渲染，实现视觉无缝切换：

const [isShimmerVisible, setIsShimmerVisible] = useState(isLoading)

useEffect(() => {
  if (!isLoading) {
    const timer = setTimeout(() => setIsShimmerVisible(false), 50)
    return () => clearTimeout(timer)
  }
}, [isLoading])

// 渲染逻辑
{isShimmerVisible && <Shimmer />}
{!isLoading && <Virtuoso style={{ position: isShimmerVisible ? 'absolute' : 'static' }} ... />}

3. 预估算列表项高度 #

如果已知列表项高度的大致范围，通过estimateItemHeight提前初始化Virtuoso的视口参数，减少首次渲染的高度计算时间：

<Virtuoso
  items={items}
  itemContent={...}
  initialTopMostItemIndex={0}
  // 估算每个列表项的高度
  estimateItemHeight={() => 80}
/>

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