Virtualize mobile payees list (#5904)

This commit is contained in:
Matiss Janis Aboltins
2025-10-13 19:04:32 +02:00
committed by GitHub
parent 7a3794295f
commit adae3e4352
2 changed files with 30 additions and 22 deletions

View File

@@ -1,4 +1,4 @@
import { GridList } from 'react-aria-components';
import { GridList, Virtualizer, ListLayout } from 'react-aria-components';
import { Trans, useTranslation } from 'react-i18next';
import { AnimatedLoading } from '@actual-app/components/icons/AnimatedLoading';
@@ -71,27 +71,29 @@ export function PayeesList({
return (
<View style={{ flex: 1 }}>
<GridList
aria-label={t('Payees')}
aria-busy={isLoading || undefined}
items={payees}
style={{
flex: 1,
paddingBottom: MOBILE_NAV_HEIGHT,
overflow: 'auto',
}}
dependencies={[ruleCounts, isRuleCountsLoading]}
>
{payee => (
<PayeesListItem
value={payee}
ruleCount={ruleCounts.get(payee.id) ?? 0}
isRuleCountLoading={isRuleCountsLoading}
onAction={() => onPayeePress(payee)}
onDelete={() => onPayeeDelete(payee)}
/>
)}
</GridList>
<Virtualizer layout={ListLayout}>
<GridList
aria-label={t('Payees')}
aria-busy={isLoading || undefined}
items={payees}
style={{
flex: 1,
paddingBottom: MOBILE_NAV_HEIGHT,
overflow: 'auto',
}}
dependencies={[ruleCounts, isRuleCountsLoading]}
>
{payee => (
<PayeesListItem
value={payee}
ruleCount={ruleCounts.get(payee.id) ?? 0}
isRuleCountLoading={isRuleCountsLoading}
onAction={() => onPayeePress(payee)}
onDelete={() => onPayeeDelete(payee)}
/>
)}
</GridList>
</Virtualizer>
{isLoading && (
<View
style={{

View File

@@ -0,0 +1,6 @@
---
category: Enhancements
authors: [MatissJanis]
---
Mobile payees: add list virtualization