diff --git a/packages/desktop-client/src/components/mobile/accounts/AccountTransactions.jsx b/packages/desktop-client/src/components/mobile/accounts/AccountTransactions.jsx index 36c4e4a023b0cce74206f0569cb6440b3dae7aa4..cf01dba15ee2c4d5e65c039a7075572585496423 100644 --- a/packages/desktop-client/src/components/mobile/accounts/AccountTransactions.jsx +++ b/packages/desktop-client/src/components/mobile/accounts/AccountTransactions.jsx @@ -144,6 +144,7 @@ const getSchedulesTransform = memoizeOne(id => { function TransactionListWithPreviews({ account }) { const [currentQuery, setCurrentQuery] = useState(); const [isSearching, setIsSearching] = useState(false); + const [isLoading, setIsLoading] = useState(true); const [transactions, setTransactions] = useState([]); const prependTransactions = usePreviewTransactions(); const allTransactions = useMemo( @@ -170,10 +171,14 @@ function TransactionListWithPreviews({ account }) { const updateQuery = useCallback(query => { paged.current?.unsubscribe(); + setIsLoading(true); paged.current = pagedQuery( query.options({ splits: 'none' }).select('*'), - data => setTransactions(data), - { pageCount: 10 }, + data => { + setTransactions(data); + setIsLoading(false); + }, + { pageCount: 50 }, ); }, []); @@ -267,6 +272,7 @@ function TransactionListWithPreviews({ account }) { return ( <TransactionListWithBalances + isLoading={isLoading} transactions={allTransactions} balance={balance} balanceCleared={balanceCleared} diff --git a/packages/desktop-client/src/components/mobile/budget/CategoryTransactions.jsx b/packages/desktop-client/src/components/mobile/budget/CategoryTransactions.jsx index a3113f661d81895a19e2dee7f86a73a6408dc746..a25c86895de18ced36c1bdb95bb1b8894908c9ee 100644 --- a/packages/desktop-client/src/components/mobile/budget/CategoryTransactions.jsx +++ b/packages/desktop-client/src/components/mobile/budget/CategoryTransactions.jsx @@ -24,6 +24,7 @@ import { TransactionListWithBalances } from '../transactions/TransactionListWith export function CategoryTransactions({ category, month }) { const dispatch = useDispatch(); const navigate = useNavigate(); + const [isLoading, setIsLoading] = useState(true); const [currentQuery, setCurrentQuery] = useState(); const [transactions, setTransactions] = useState([]); @@ -42,10 +43,14 @@ export function CategoryTransactions({ category, month }) { const updateQuery = useCallback(query => { paged.current?.unsubscribe(); + setIsLoading(true); paged.current = pagedQuery( query.options({ splits: 'inline' }).select('*'), - data => setTransactions(data), - { pageCount: 10 }, + data => { + setTransactions(data); + setIsLoading(false); + }, + { pageCount: 50 }, ); }, []); @@ -136,6 +141,7 @@ export function CategoryTransactions({ category, month }) { padding={0} > <TransactionListWithBalances + isLoading={isLoading} transactions={transactions} balance={balance} balanceCleared={balanceCleared} diff --git a/packages/desktop-client/src/components/mobile/transactions/TransactionList.jsx b/packages/desktop-client/src/components/mobile/transactions/TransactionList.jsx index 332d45c1002dba3bede8b241f1718fdec06b6f4b..6a1d4ba98d9171bd88b1c90a999b2b63f1d8e4e7 100644 --- a/packages/desktop-client/src/components/mobile/transactions/TransactionList.jsx +++ b/packages/desktop-client/src/components/mobile/transactions/TransactionList.jsx @@ -5,15 +5,18 @@ import { Item, Section } from '@react-stately/collections'; import * as monthUtils from 'loot-core/src/shared/months'; import { isPreviewId } from 'loot-core/src/shared/transactions'; +import { AnimatedLoading } from '../../../icons/AnimatedLoading'; import { theme } from '../../../style'; import { Text } from '../../common/Text'; +import { View } from '../../common/View'; import { ListBox } from './ListBox'; import { Transaction } from './Transaction'; export function TransactionList({ + isLoading, transactions, - isNew, + isNewTransaction, onSelect, scrollProps = {}, onLoadMore, @@ -46,6 +49,20 @@ export function TransactionList({ return sections; }, [transactions]); + if (isLoading) { + return ( + <View + style={{ + flex: 1, + justifyContent: 'center', + alignItems: 'center', + }} + > + <AnimatedLoading width={25} height={25} /> + </View> + ); + } + return ( <> {scrollProps.ListHeaderComponent} @@ -92,7 +109,7 @@ export function TransactionList({ > <Transaction transaction={transaction} - added={isNew(transaction.id)} + added={isNewTransaction(transaction.id)} onSelect={onSelect} /> </Item> diff --git a/packages/desktop-client/src/components/mobile/transactions/TransactionListWithBalances.jsx b/packages/desktop-client/src/components/mobile/transactions/TransactionListWithBalances.jsx index 60e71efd5bf53b73cbcd4bebecafa6e041632419..f29994ddc46ffb39424b6968f7c351539111046e 100644 --- a/packages/desktop-client/src/components/mobile/transactions/TransactionListWithBalances.jsx +++ b/packages/desktop-client/src/components/mobile/transactions/TransactionListWithBalances.jsx @@ -56,6 +56,7 @@ function TransactionSearchInput({ placeholder, onSearch }) { } export function TransactionListWithBalances({ + isLoading, transactions, balance, balanceCleared, @@ -154,8 +155,9 @@ export function TransactionListWithBalances({ </View> <PullToRefresh isPullable={!!onRefresh} onRefresh={onRefresh}> <TransactionList + isLoading={isLoading} transactions={transactions} - isNew={isNewTransaction} + isNewTransaction={isNewTransaction} onLoadMore={onLoadMore} onSelect={onSelectTransaction} /> diff --git a/upcoming-release-notes/2831.md b/upcoming-release-notes/2831.md new file mode 100644 index 0000000000000000000000000000000000000000..b4265bb8c85653190ad63a507adb58cba2302967 --- /dev/null +++ b/upcoming-release-notes/2831.md @@ -0,0 +1,6 @@ +--- +category: Enhancements +authors: [joel-jeremy] +--- + +Add loading indicator on mobile transactions list.