[Mobile] Add loading indicator on mobile transactions list (#2831)

* Add loading indicator on mobile transactions list

* Release notes

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}

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}

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>

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}
         />

upcoming-release-notes/2831.md

+---
+category: Enhancements
+authors: [joel-jeremy]
+---
+
+Add loading indicator on mobile transactions list.