Goal
Improve perceived performance on web for large Spend/Reports lists by splitting row implementation by viewport and deferring heavy action UI.
Changes
- Split
ExpenseReportListItemRow.tsx into a thin dispatcher that renders ExpenseReportListItemRowWide (table layout) or ExpenseReportListItemRowNarrow (mobile layout) so each viewport loads only the code and dependencies it needs.
- Extract the avatar into a memoized
ExpenseReportListItemAvatar.
- Add
DeferredActionCell: shows a skeleton on first paint, then swaps in the real ActionCell after a transition so initial render stays responsive for large lists.
Offline: same as above where applicable.
Issue Owner
Current Issue Owner: @DylanDylannIssue Owner
Current Issue Owner: @DylanDylann
Goal
Improve perceived performance on web for large Spend/Reports lists by splitting row implementation by viewport and deferring heavy action UI.
Changes
ExpenseReportListItemRow.tsxinto a thin dispatcher that rendersExpenseReportListItemRowWide(table layout) orExpenseReportListItemRowNarrow(mobile layout) so each viewport loads only the code and dependencies it needs.ExpenseReportListItemAvatar.DeferredActionCell: shows a skeleton on first paint, then swaps in the realActionCellafter a transition so initial render stays responsive for large lists.Offline: same as above where applicable.
Issue Owner
Current Issue Owner: @DylanDylannIssue Owner
Current Issue Owner: @DylanDylann