From 10797bbd69faeae24de394537fa8e05f71292a0d Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Thu, 4 Jan 2024 23:56:19 +0800
Subject: [PATCH 1/3] remove debounce and simplify loading logic

---
 .../reimburse/WorkspaceReimburseSection.js    | 25 ++++++++-----------
 1 file changed, 10 insertions(+), 15 deletions(-)

diff --git a/src/pages/workspace/reimburse/WorkspaceReimburseSection.js b/src/pages/workspace/reimburse/WorkspaceReimburseSection.js
index 7cf17c9d498c..a20553a19aaa 100644
--- a/src/pages/workspace/reimburse/WorkspaceReimburseSection.js
+++ b/src/pages/workspace/reimburse/WorkspaceReimburseSection.js
@@ -9,12 +9,12 @@ import * as Illustrations from '@components/Icon/Illustrations';
 import networkPropTypes from '@components/networkPropTypes';
 import Section from '@components/Section';
 import Text from '@components/Text';
+import usePrevious from '@hooks/usePrevious';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import BankAccount from '@libs/models/BankAccount';
 import * as ReimbursementAccountProps from '@pages/ReimbursementAccount/reimbursementAccountPropTypes';
 import * as Link from '@userActions/Link';
-import CONST from '@src/CONST';
 
 const propTypes = {
     /** Policy values needed in the component */
@@ -35,19 +35,19 @@ const propTypes = {
 function WorkspaceReimburseSection(props) {
     const theme = useTheme();
     const styles = useThemeStyles();
-    const [shouldShowLoadingSpinner, setShouldShowLoadingSpinner] = useState(false);
+    const [shouldShowLoadingSpinner, setShouldShowLoadingSpinner] = useState(true);
     const achState = lodashGet(props.reimbursementAccount, 'achData.state', '');
     const hasVBA = achState === BankAccount.STATE.OPEN;
     const reimburseReceiptsUrl = `reports?policyID=${props.policy.id}&from=all&type=expense&showStates=Archived&isAdvancedFilterMode=true`;
-    const debounceSetShouldShowLoadingSpinner = _.debounce(() => {
-        const isLoading = props.reimbursementAccount.isLoading || false;
-        if (isLoading !== shouldShowLoadingSpinner) {
-            setShouldShowLoadingSpinner(isLoading);
-        }
-    }, CONST.TIMING.SHOW_LOADING_SPINNER_DEBOUNCE_TIME);
+    const isLoading = lodashGet(props.reimbursementAccount, 'isLoading', false);
+    const prevIsLoading = usePrevious(isLoading);
+
     useEffect(() => {
-        debounceSetShouldShowLoadingSpinner();
-    }, [debounceSetShouldShowLoadingSpinner]);
+        if (prevIsLoading === isLoading) {
+            return;
+        }
+        setShouldShowLoadingSpinner(isLoading);
+    }, [isLoading]);
 
     if (props.network.isOffline) {
         return (
@@ -62,11 +62,6 @@ function WorkspaceReimburseSection(props) {
         );
     }
 
-    // If the reimbursementAccount is loading but not enough time has passed to show a spinner, then render nothing.
-    if (props.reimbursementAccount.isLoading && !shouldShowLoadingSpinner) {
-        return null;
-    }
-
     if (shouldShowLoadingSpinner) {
         return (
             <View style={[styles.flex1, styles.alignItemsCenter, styles.justifyContentCenter]}>

From 17a0a33685e8c2d9fba11b0d06267ea5bfa00460 Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Fri, 5 Jan 2024 00:10:37 +0800
Subject: [PATCH 2/3] remove unused import

---
 src/pages/workspace/reimburse/WorkspaceReimburseSection.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pages/workspace/reimburse/WorkspaceReimburseSection.js b/src/pages/workspace/reimburse/WorkspaceReimburseSection.js
index a20553a19aaa..bce4714870b6 100644
--- a/src/pages/workspace/reimburse/WorkspaceReimburseSection.js
+++ b/src/pages/workspace/reimburse/WorkspaceReimburseSection.js
@@ -2,7 +2,6 @@ import lodashGet from 'lodash/get';
 import PropTypes from 'prop-types';
 import React, {useEffect, useState} from 'react';
 import {ActivityIndicator, View} from 'react-native';
-import _ from 'underscore';
 import ConnectBankAccountButton from '@components/ConnectBankAccountButton';
 import * as Expensicons from '@components/Icon/Expensicons';
 import * as Illustrations from '@components/Icon/Illustrations';

From 711bc6bc30353ec75fc44a13c8080a0f361c072d Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Fri, 5 Jan 2024 00:11:06 +0800
Subject: [PATCH 3/3] add missing deps

---
 src/pages/workspace/reimburse/WorkspaceReimburseSection.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/workspace/reimburse/WorkspaceReimburseSection.js b/src/pages/workspace/reimburse/WorkspaceReimburseSection.js
index bce4714870b6..00ef284c50ae 100644
--- a/src/pages/workspace/reimburse/WorkspaceReimburseSection.js
+++ b/src/pages/workspace/reimburse/WorkspaceReimburseSection.js
@@ -46,7 +46,7 @@ function WorkspaceReimburseSection(props) {
             return;
         }
         setShouldShowLoadingSpinner(isLoading);
-    }, [isLoading]);
+    }, [prevIsLoading, isLoading]);
 
     if (props.network.isOffline) {
         return (