Improve refresh button behavior in lists (#956)

swan-io · Oct 8, 2024 · 48cc86d · 48cc86d
1 parent 32b3b85
commit 48cc86d
Show file tree

Hide file tree

Showing 12 changed files with 54 additions and 35 deletions.
diff --git a/clients/banking/src/components/AccountMembersDetailsCardList.tsx b/clients/banking/src/components/AccountMembersDetailsCardList.tsx
@@ -142,9 +142,7 @@ export const AccountMembersDetailsCardList = ({
                   filters={filters}
                   search={search}
                   status={status}
-                  onRefresh={() => {
-                    reload();
-                  }}
+                  onRefresh={reload}
                   onChangeFilters={filters => {
                     Router.replace("AccountMembersDetailsCardList", {
                       accountMembershipId: currentUserAccountMembershipId,

diff --git a/clients/banking/src/components/BeneficiaryList.tsx b/clients/banking/src/components/BeneficiaryList.tsx
@@ -532,6 +532,8 @@ export const BeneficiaryList = ({
     Option.fromNullable(data.account?.trustedBeneficiaries).toResult(undefined),
   );
 
+  const [isRefreshing, setIsRefreshing] = useState(false);
+
   return (
     <ResponsiveContainer breakpoint={breakpoints.large} style={styles.fill}>
       {({ large }) => {
@@ -580,9 +582,10 @@ export const BeneficiaryList = ({
                       mode="secondary"
                       size="small"
                       icon="arrow-counterclockwise-filled"
-                      loading={beneficiaries.isLoading()}
+                      loading={isRefreshing}
                       onPress={() => {
-                        reload();
+                        setIsRefreshing(true);
+                        reload().tap(() => setIsRefreshing(false));
                       }}
                     />
                   </>

diff --git a/clients/banking/src/components/CardItemTransactionList.tsx b/clients/banking/src/components/CardItemTransactionList.tsx
@@ -145,9 +145,7 @@ export const CardItemTransactionList = ({
                   large={large}
                   filters={filters}
                   search={search}
-                  onRefresh={() => {
-                    reload();
-                  }}
+                  onRefresh={reload}
                   onChangeFilters={filters => {
                     Router.replace("AccountCardsItemTransactions", { ...params, ...filters });
                   }}

diff --git a/clients/banking/src/components/CardListFilter.tsx b/clients/banking/src/components/CardListFilter.tsx
@@ -1,4 +1,4 @@
-import { Dict } from "@swan-io/boxed";
+import { Dict, Future } from "@swan-io/boxed";
 import { Box } from "@swan-io/lake/src/components/Box";
 import { Fill } from "@swan-io/lake/src/components/Fill";
 import { FilterChooser } from "@swan-io/lake/src/components/FilterChooser";
@@ -50,7 +50,7 @@ type TransactionListFilterProps = {
   search: string | undefined;
   status: "Active" | "Canceled";
   onChangeFilters: (filters: Partial<CardFilters>) => void;
-  onRefresh: () => void;
+  onRefresh: () => Future<unknown>;
   onChangeSearch: (search: string | undefined) => void;
   onChangeStatus: (status: "Active" | "Canceled") => void;
 };
@@ -100,6 +100,8 @@ export const CardListFilter = ({
     });
   }, [filters]);
 
+  const [isRefreshing, setIsRefreshing] = useState(false);
+
   return (
     <>
       <Box direction="row" alignItems="center">
@@ -129,7 +131,11 @@ export const CardListFilter = ({
               mode="secondary"
               size="small"
               icon="arrow-counterclockwise-filled"
-              onPress={onRefresh}
+              loading={isRefreshing}
+              onPress={() => {
+                setIsRefreshing(true);
+                onRefresh().tap(() => setIsRefreshing(false));
+              }}
             />
           </>
         ) : null}

diff --git a/clients/banking/src/components/MembershipListFilter.tsx b/clients/banking/src/components/MembershipListFilter.tsx
@@ -1,4 +1,4 @@
-import { AsyncData, Dict, Result } from "@swan-io/boxed";
+import { AsyncData, Dict, Future, Result } from "@swan-io/boxed";
 import { Box } from "@swan-io/lake/src/components/Box";
 import { Fill } from "@swan-io/lake/src/components/Fill";
 import { FilterChooser } from "@swan-io/lake/src/components/FilterChooser";
@@ -107,7 +107,7 @@ type MembershipListFilterProps = {
   search: string | undefined;
   totalCount: AsyncData<Result<number, unknown>>;
   onChangeFilters: (filters: Partial<MembershipFilters>) => void;
-  onRefresh: () => void;
+  onRefresh: () => Future<unknown>;
   onChangeSearch: (search: string | undefined) => void;
 };
 
@@ -182,6 +182,8 @@ export const MembershipListFilter = ({
     });
   }, [filters]);
 
+  const [isRefreshing, setIsRefreshing] = useState(false);
+
   return (
     <>
       <Box direction="row" alignItems="center">
@@ -211,7 +213,11 @@ export const MembershipListFilter = ({
               mode="secondary"
               size="small"
               icon="arrow-counterclockwise-filled"
-              onPress={onRefresh}
+              loading={isRefreshing}
+              onPress={() => {
+                setIsRefreshing(true);
+                onRefresh().tap(() => setIsRefreshing(false));
+              }}
             />
           </>
         ) : null}

diff --git a/clients/banking/src/components/MembershipsArea.tsx b/clients/banking/src/components/MembershipsArea.tsx
@@ -221,9 +221,7 @@ export const MembershipsArea = ({
                 onChangeSearch={search => {
                   Router.replace("AccountMembersList", { accountMembershipId, ...params, search });
                 }}
-                onRefresh={() => {
-                  reload();
-                }}
+                onRefresh={reload}
                 totalCount={data.mapOk(data => data.account?.memberships.totalCount ?? 0)}
                 large={large}
               >

diff --git a/clients/banking/src/components/MerchantList.tsx b/clients/banking/src/components/MerchantList.tsx
@@ -18,7 +18,7 @@ import { ColumnConfig, PlainListView } from "@swan-io/lake/src/components/PlainL
 import { Tag } from "@swan-io/lake/src/components/Tag";
 import { Toggle } from "@swan-io/lake/src/components/Toggle";
 import { colors, spacings } from "@swan-io/lake/src/constants/design";
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 import { StyleSheet } from "react-native";
 import { P, match } from "ts-pattern";
 import {
@@ -210,6 +210,8 @@ export const MerchantList = ({ accountId, accountMembershipId, params, large }:
     accountId,
   });
 
+  const [isRefreshing, setIsRefreshing] = useState(false);
+
   return (
     <>
       <Box
@@ -222,8 +224,10 @@ export const MerchantList = ({ accountId, accountMembershipId, params, large }:
           mode="secondary"
           size="small"
           icon="arrow-counterclockwise-filled"
+          loading={isRefreshing}
           onPress={() => {
-            reload();
+            setIsRefreshing(true);
+            reload().tap(() => setIsRefreshing(false));
           }}
         />
 

diff --git a/clients/banking/src/components/RecurringTransferList.tsx b/clients/banking/src/components/RecurringTransferList.tsx
@@ -120,6 +120,8 @@ const RecurringTransferHistory = ({
     canViewAccount,
   });
 
+  const [isRefreshing, setIsRefreshing] = useState(false);
+
   return (
     <>
       <Space height={24} />
@@ -130,9 +132,10 @@ const RecurringTransferHistory = ({
           mode="secondary"
           size="small"
           icon="arrow-counterclockwise-filled"
-          loading={data.isLoading()}
+          loading={isRefreshing}
           onPress={() => {
-            reload();
+            setIsRefreshing(true);
+            reload().tap(() => setIsRefreshing(false));
           }}
         />
       </ListRightPanelContent>
@@ -675,6 +678,8 @@ export const RecurringTransferList = ({
     [],
   );
 
+  const [isRefreshing, setIsRefreshing] = useState(false);
+
   return (
     <>
       <Box
@@ -687,9 +692,10 @@ export const RecurringTransferList = ({
           mode="secondary"
           size="small"
           icon="arrow-counterclockwise-filled"
-          loading={data.isLoading()}
+          loading={isRefreshing}
           onPress={() => {
-            reload();
+            setIsRefreshing(true);
+            reload().tap(() => setIsRefreshing(false));
           }}
         />
 

diff --git a/clients/banking/src/components/TransactionListFilter.tsx b/clients/banking/src/components/TransactionListFilter.tsx
@@ -1,4 +1,4 @@
-import { Dict } from "@swan-io/boxed";
+import { Dict, Future } from "@swan-io/boxed";
 import { Box } from "@swan-io/lake/src/components/Box";
 import { Fill } from "@swan-io/lake/src/components/Fill";
 import { FilterChooser } from "@swan-io/lake/src/components/FilterChooser";
@@ -89,7 +89,7 @@ type TransactionListFilterProps = {
   filters: TransactionFilters;
   search: string | undefined;
   onChangeFilters: (filters: Partial<TransactionFilters>) => void;
-  onRefresh: () => void;
+  onRefresh: () => Future<unknown>;
   onChangeSearch: (search: string | undefined) => void;
   filtersDefinition?: {
     isAfterUpdatedAt: FilterDateDef;
@@ -161,6 +161,8 @@ export const TransactionListFilter = ({
     });
   }, [filters]);
 
+  const [isRefreshing, setIsRefreshing] = useState(false);
+
   return (
     <>
       <Box direction="row" alignItems="center">
@@ -190,7 +192,11 @@ export const TransactionListFilter = ({
               mode="secondary"
               size="small"
               icon="arrow-counterclockwise-filled"
-              onPress={onRefresh}
+              loading={isRefreshing}
+              onPress={() => {
+                setIsRefreshing(true);
+                onRefresh().tap(() => setIsRefreshing(false));
+              }}
             />
           </>
         ) : null}

diff --git a/clients/banking/src/components/TransferList.tsx b/clients/banking/src/components/TransferList.tsx
@@ -129,9 +129,7 @@ export const TransferList = ({
               large={large}
               filters={filters}
               search={search}
-              onRefresh={() => {
-                reload();
-              }}
+              onRefresh={reload}
               onChangeFilters={({ status, ...filters }) =>
                 Router.replace("AccountPaymentsRoot", {
                   ...params,

diff --git a/clients/banking/src/pages/CardListPage.tsx b/clients/banking/src/pages/CardListPage.tsx
@@ -126,9 +126,7 @@ export const CardListPage = ({
               filters={filters}
               search={search}
               status={status}
-              onRefresh={() => {
-                reload();
-              }}
+              onRefresh={reload}
               onChangeFilters={filters => {
                 Router.replace("AccountCardsList", { accountMembershipId, ...params, ...filters });
               }}

diff --git a/clients/banking/src/pages/TransactionListPage.tsx b/clients/banking/src/pages/TransactionListPage.tsx
@@ -166,9 +166,7 @@ export const TransactionListPage = ({
               large={large}
               filters={filters}
               search={search}
-              onRefresh={() => {
-                reload();
-              }}
+              onRefresh={reload}
               onChangeFilters={({ status, ...filters }) => {
                 Router.replace("AccountTransactionsListRoot", {
                   ...params,