Expensify/App 中未报告费用列表骨架加载问题分析与解决方案

问题背景

在Expensify/App的财务模块中，用户在使用"添加未报告费用"功能时遇到了一个界面显示问题。每当用户打开未报告费用列表时，即使没有新的数据需要加载，系统也会显示一个骨架加载动画(Skeleton Loading)。这种视觉反馈会给用户造成"正在加载更多数据"的错误印象，影响用户体验。

技术分析

骨架加载机制

骨架加载是现代前端应用中常见的加载状态指示器，它通过展示与内容结构相似的灰色占位区块，向用户暗示内容正在加载。在理想情况下，这种视觉反馈应该只在确实有数据正在加载时显示。

问题根源

通过代码审查发现，问题出在AddUnreportedExpense.tsx组件中。当前实现存在两个关键问题：

1. 加载状态管理不精确：isLoadingUnreportedTransactions标志位在每次调用fetchUnreportedExpensesAPI时都会被设置为true，包括页面初始加载时。

2. 条件判断不足：骨架加载的显示仅依赖于isLoadingUnreportedTransactions状态，而没有考虑当前是否确实有更多数据需要加载(hasMoreUnreportedTransactionsResults)或者是否是初始加载场景。

解决方案

经过技术团队讨论，最终确定的解决方案是：

1. 增强条件判断：修改骨架加载的显示逻辑，使其仅在满足以下两个条件时显示：

   • 确实有未报告交易正在加载(isLoadingUnreportedTransactions为true)
   • 当前滚动偏移量大于0(表示不是初始加载)

2. 代码实现：具体修改是在listFooterContent属性中添加偏移量检查：

listFooterContent={isLoadingUnreportedTransactions && offset > 0 ? 
    <UnreportedExpensesSkeleton fixedNumberOfItems={3} /> : 
    undefined}

技术考量

这个解决方案考虑了多种边界情况：

• 初始加载空状态：当首次打开页面且没有任何费用记录时，不会显示骨架加载，而是直接显示空状态
• 滚动加载：当用户滚动到底部加载更多数据时，骨架加载会正常显示
• 性能优化：避免了不必要的渲染操作，提升了界面响应速度

经验总结

这个案例为我们提供了几个重要的前端开发经验：

1. 状态管理精细化：对于加载状态这类影响用户体验的关键状态，需要进行更细致的区分和管理。

2. 用户预期匹配：视觉反馈应该准确反映后台的真实状态，避免给用户造成误解。

3. 边界情况考虑：在实现功能时，需要充分考虑各种使用场景，包括初始状态、空状态、加载中等不同情况。

通过这次修复，Expensify/App的未报告费用功能提供了更准确、更符合用户预期的加载状态反馈，提升了整体用户体验。