Merge pull request #33962 from bernhardoj/fix/32841-reimbursement-sec…

…tion-blinks

Fix workspace reimbursement section blinks

src/pages/workspace/reimburse/WorkspaceReimburseSection.js

@@ -2,19 +2,18 @@ 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';
 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 +34,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);
+    }, [prevIsLoading, isLoading]);
 
     if (props.network.isOffline) {
         return (
@@ -62,11 +61,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]}>