Merge pull request #544 from WatchItDev/app/refactor/hide-test-profiles

feat(finance): add loading state to quick transfer
WatchItDev · Feb 18, 2025 · 62775b6 · 62775b6
2 parents 5dfd325 + e25030b
commit 62775b6
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 6 deletions.
diff --git a/src/sections/finance/components/finance-quick-transfer.tsx b/src/sections/finance/components/finance-quick-transfer.tsx
@@ -33,6 +33,7 @@ import FinanceNoFollowingsQuickTransfer
   from "@src/sections/finance/components/finance-no-followings-quick-transfer";
 import FinanceDisplayProfileInfo from "@src/sections/finance/components/finance-display-profile-info";
 import {handleAmountConstraints} from "@src/utils/format-number.ts";
+import {LoadingScreen} from "@src/components/loading-screen";
 
 // ----------------------------------------------------------------------
 
@@ -41,10 +42,11 @@ const MIN_AMOUNT = 0;
 // A thousand millions allowed in the pool
 export const MAX_POOL: number = 1000000000;
 
-interface Props extends CardProps {
+export interface FinanceQuickTransferProps extends CardProps {
   title?: string;
   subheader?: string;
   list: Profile[] | null | undefined;
+  loading: boolean;
 }
 
 export const isValidAddress = (address: string): boolean => {
@@ -58,8 +60,9 @@ export default function FinanceQuickTransfer({
   subheader,
   sx,
   list: initialList,
+  loading,
   ...other
-}: Props) {
+}: FinanceQuickTransferProps) {
   const theme = useTheme();
   const dispatch = useDispatch();
 
@@ -396,12 +399,12 @@ export default function FinanceQuickTransfer({
           />
 
           {/* Content */}
-          <Stack sx={{ p: 3 }}>
+          { loading ? <LoadingScreen sx={{marginBottom: 5}} /> : (<Stack sx={{ p: 3 }}>
             <FinanceDisplayProfileInfo mode={'profile'} initialList={list} carousel={carousel} />
             {list?.length > 0 ? renderCarousel : <FinanceNoFollowingsQuickTransfer />}
             <FinanceDisplayProfileInfo mode={'wallet'} initialList={list} carousel={carousel} />
             {renderInput}
-          </Stack>
+          </Stack>) }
         </Stack>
       </Wrapper>
 

diff --git a/src/sections/finance/index.tsx b/src/sections/finance/index.tsx
@@ -29,7 +29,7 @@ export default function OverviewBankingView() {
   const { transactions, loading } = useGetSmartWalletTransactions();
   const [widgetSeriesData, setWidgetSeriesData] = useState<{ x: string; y: number }[]>([]);
   const [percent, setPercent] = useState(0);
-  const { data: results } = useProfileFollowing({
+  const { data: results, loading: loadingProfiles } = useProfileFollowing({
     // @ts-ignore
     for: sessionData?.profile?.id,
   });
@@ -80,7 +80,7 @@ export default function OverviewBankingView() {
               }}
             />
 
-            {!mdUp ? <FinanceQuickTransfer list={following} /> : null}
+            {!mdUp ? <FinanceQuickTransfer list={following} loading={loadingProfiles} /> : null}
             {lgUp ? <FinanceEarnTokens lgUp={lgUp} /> : null}
           </Stack>
 
@@ -114,6 +114,7 @@ export default function OverviewBankingView() {
         <Grid xs={12} md={4}>
           <Stack spacing={2}>
             <FinanceQuickTransfer
+              loading={loadingProfiles}
               list={following}
               sx={{
                 display: { xs: 'none', md: 'flex' },