diff --git a/src/pages/workspace/reimburse/WorkspaceReimburseSection.js b/src/pages/workspace/reimburse/WorkspaceReimburseSection.js index 7cf17c9d498c..00ef284c50ae 100644 --- a/src/pages/workspace/reimburse/WorkspaceReimburseSection.js +++ b/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 (