Semi-Design List组件空数据加载状态问题解析

问题背景

在Semi-Design UI库的List组件使用过程中，开发者发现当数据源为空数组且同时处于加载状态时，组件会出现显示异常。具体表现为：List组件高度变为0，而加载状态(Spin)会超出List容器范围，遮挡相邻元素。

问题复现

通过以下代码可以稳定复现该问题：

import React from 'react';
import { List } from '@douyinfe/semi-ui';

() => {
    const data = [];
    return (
        <div style={{ marginRight: 16, width: 280, display: 'flex', flexDirection: 'column' }}>
            <div style={{ height: 20, width: '100%', backgroundColor: 'green' }}></div>
            <List
                dataSource={data}
                split={false}
                loading={true}
                size='small'
                renderItem={(item) =>
                    <List.Item>{item}</List.Item>
                }
            />
        </div>
    );
};

问题分析

1. 组件行为异常：当dataSource为空数组且loading为true时，List组件的高度计算出现偏差，导致容器高度为0。

2. 布局影响：由于高度为0，Spin加载指示器会突破容器边界，影响相邻元素的显示。

3. 预期行为差异：开发者期望在这种情况下，List组件应该保持Empty状态的同时显示加载指示器，而不是完全折叠高度。

技术原理

在React组件设计中，List组件通常需要处理多种状态：

• 数据加载中(loading)
• 数据为空(empty)
• 数据正常展示

理想情况下，这些状态应该互不干扰且能够平滑过渡。当前问题源于状态处理逻辑中未充分考虑loading和empty同时存在的情况。

解决方案建议

1. 保持最小高度：即使在空数据状态下，List组件也应保持最小高度，确保加载指示器有足够的显示空间。

2. 状态优先级：可以定义状态显示的优先级，例如loading状态优先于empty状态显示。

3. 样式隔离：确保Spin组件的定位不会影响外部布局，可以考虑使用绝对定位或固定高度容器。

最佳实践

在实际项目中使用List组件时，建议：

1. 始终为List容器设置最小高度，避免高度塌陷
2. 对于空数据状态，考虑使用placeholder保持布局稳定
3. 复杂场景下可以自定义loading和empty状态的显示逻辑

总结

这个问题虽然看似简单，但反映了组件设计中状态管理的复杂性。良好的组件设计应该能够优雅处理各种边界情况，为用户提供一致的体验。Semi-Design团队已经确认了这个问题，并欢迎社区贡献修复方案。