github-starred/actual
2
0
Fork 0
mirror of https://github.com/actualbudget/actual.git synced 2026-04-28 18:40:34 -05:00
Code Issues 1.3k Packages Projects Releases 54 Wiki Activity

Add virtualizer to mobile transactions (#5921)

Browse Source
This commit is contained in:
Matiss Janis Aboltins
2025-10-22 19:07:29 +02:00
committed by GitHub
parent 80aee4ee71
commit 6826ca0e4b
2 changed files with 78 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
packages/desktop-client/src/components/mobile/transactions/TransactionList.tsx
View File

@@ -11,6 +11,8 @@ import {
ListBoxSection,
Header,
Collection,
Virtualizer,
ListLayout,
} from 'react-aria-components';
import { Trans, useTranslation } from 'react-i18next';
@@ -158,64 +160,76 @@ export function TransactionList({
aria-label={t('Loading transactions...')}
/>
)}
<ListBox
aria-label={t('Transaction list')}
selectionMode={selectedTransactions.size > 0 ? 'multiple' : 'single'}
selectedKeys={selectedTransactions}
dependencies={[selectedTransactions]}
renderEmptyState={() =>
!isLoading && (
<View
style={{
alignItems: 'center',
justifyContent: 'center',
backgroundColor: theme.mobilePageBackground,
}}
>
<Text style={{ fontSize: 15 }}>
<Trans>No transactions</Trans>
</Text>
</View>
)
}
items={sections}
>
{section => (
<ListBoxSection>
<Header
style={{
...styles.smallText,
backgroundColor: theme.pageBackground,
color: theme.tableHeaderText,
display: 'flex',
justifyContent: 'center',
paddingBottom: 4,
paddingTop: 4,
position: 'sticky',
top: '0',
width: '100%',
zIndex: 10,
}}
>
{monthUtils.format(section.date, 'MMMM dd, yyyy', locale)}
</Header>
<Collection
items={section.transactions.filter(
t => !isPreviewId(t.id) || !t.is_child,
)}
>
{transaction => (
<TransactionListItem
key={transaction.id}
value={transaction}
onPress={trans => onTransactionPress(trans)}
onLongPress={trans => onTransactionPress(trans, true)}
/>
)}
</Collection>
</ListBoxSection>
)}
</ListBox>
<View style={{ flex: 1, overflow: 'auto' }}>
<Virtualizer
layout={ListLayout}
layoutOptions={{
estimatedRowHeight: ROW_HEIGHT,
padding: 0,
}}
>
<ListBox
aria-label={t('Transaction list')}
selectionMode={
selectedTransactions.size > 0 ? 'multiple' : 'single'
}
selectedKeys={selectedTransactions}
dependencies={[selectedTransactions]}
renderEmptyState={() =>
!isLoading && (
<View
style={{
alignItems: 'center',
justifyContent: 'center',
backgroundColor: theme.mobilePageBackground,
}}
>
<Text style={{ fontSize: 15 }}>
<Trans>No transactions</Trans>
</Text>
</View>
)
}
items={sections}
>
{section => (
<ListBoxSection>
<Header
style={{
...styles.smallText,
backgroundColor: theme.pageBackground,
color: theme.tableHeaderText,
display: 'flex',
justifyContent: 'center',
paddingBottom: 4,
paddingTop: 4,
position: 'sticky',
top: '0',
width: '100%',
zIndex: 10,
}}
>
{monthUtils.format(section.date, 'MMMM dd, yyyy', locale)}
</Header>
<Collection
items={section.transactions.filter(
t => !isPreviewId(t.id) || !t.is_child,
)}
>
{transaction => (
<TransactionListItem
key={transaction.id}
value={transaction}
onPress={trans => onTransactionPress(trans)}
onLongPress={trans => onTransactionPress(trans, true)}
/>
)}
</Collection>
</ListBoxSection>
)}
</ListBox>
</Virtualizer>
</View>
{isLoadingMore && (
<Loading

6
upcoming-release-notes/5921.md Normal file
View File

@@ -0,0 +1,6 @@
---
category: Enhancements
authors: [MatissJanis]
---
Mobile transactions: add virtualizer to the list for improved performance