From 417f5805a8ff2074daff050f5ec911ee3fb006ce Mon Sep 17 00:00:00 2001
From: Joel Jeremy Marquez <joeljeremy.marquez@gmail.com>
Date: Thu, 6 Jun 2024 17:12:47 -0700
Subject: [PATCH] [Mobile] Add loading indicator on mobile transactions list
(#2831)
* Add loading indicator on mobile transactions list
* Release notes
---
.../mobile/accounts/AccountTransactions.jsx | 10 +++++++--
.../mobile/budget/CategoryTransactions.jsx | 10 +++++++--
.../mobile/transactions/TransactionList.jsx | 21 +++++++++++++++++--
.../TransactionListWithBalances.jsx | 4 +++-
upcoming-release-notes/2831.md | 6 ++++++
5 files changed, 44 insertions(+), 7 deletions(-)
create mode 100644 upcoming-release-notes/2831.md
diff --git a/packages/desktop-client/src/components/mobile/accounts/AccountTransactions.jsx b/packages/desktop-client/src/components/mobile/accounts/AccountTransactions.jsx
index 36c4e4a02..cf01dba15 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 a3113f661..a25c86895 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 332d45c10..6a1d4ba98 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 60e71efd5..f29994ddc 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 000000000..b4265bb8c
--- /dev/null
+++ b/upcoming-release-notes/2831.md
@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [joel-jeremy]
+---
+
+Add loading indicator on mobile transactions list.
--
GitLab