diff --git a/.eslintrc.js b/.eslintrc.js index 858df25d62542..7983c45863b1a 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -13,6 +13,7 @@ const restrictedImportPaths = [ 'Pressable', 'Text', 'ScrollView', + 'ActivityIndicator', 'Animated', 'findNodeHandle', ], @@ -23,6 +24,7 @@ const restrictedImportPaths = [ "For 'StatusBar', please use '@libs/StatusBar' instead.", "For 'Text', please use '@components/Text' instead.", "For 'ScrollView', please use '@components/ScrollView' instead.", + "For 'ActivityIndicator', please use '@components/ActivityIndicator' instead.", "For 'Animated', please use 'Animated' from 'react-native-reanimated' instead.", ].join('\n'), }, diff --git a/src/CONST/index.ts b/src/CONST/index.ts index 7c5b559c8433b..093b589b386aa 100755 --- a/src/CONST/index.ts +++ b/src/CONST/index.ts @@ -1601,6 +1601,7 @@ const CONST = { FAST_SEARCH_TREE_CREATION: 'fast_search_tree_creation', SHOW_HOVER_PREVIEW_DELAY: 270, SHOW_HOVER_PREVIEW_ANIMATION_DURATION: 250, + ACTIVITY_INDICATOR_TIMEOUT: 10000, }, PRIORITY_MODE: { GSD: 'gsd', diff --git a/src/components/ActivityIndicator.tsx b/src/components/ActivityIndicator.tsx new file mode 100644 index 0000000000000..1f0c2bea19240 --- /dev/null +++ b/src/components/ActivityIndicator.tsx @@ -0,0 +1,43 @@ +import React, {useEffect} from 'react'; +import type {ActivityIndicatorProps as RNActivityIndicatorProps} from 'react-native'; +// eslint-disable-next-line no-restricted-imports +import {ActivityIndicator as RNActivityIndicator} from 'react-native'; +import useTheme from '@hooks/useTheme'; +import Log from '@libs/Log'; +import CONST from '@src/CONST'; + +type ActivityIndicatorProps = RNActivityIndicatorProps & { + /** The ID of the test to be used for testing */ + testID?: string; + + /** Timeout for the activity indicator after which we fire a log about abnormally long loading */ + timeout?: number; +}; + +function ActivityIndicator({timeout = CONST.TIMING.ACTIVITY_INDICATOR_TIMEOUT, ...rest}: ActivityIndicatorProps) { + const theme = useTheme(); + + useEffect(() => { + const timeoutId = setTimeout(() => { + Log.warn('ActivityIndicator has been shown for longer than expected', { + timeoutMs: timeout, + }); + }, timeout); + + return () => { + clearTimeout(timeoutId); + }; + }, [timeout]); + + return ( + + ); +} + +ActivityIndicator.displayName = 'ActivityIndicator'; + +export default ActivityIndicator; diff --git a/src/components/AddPlaidBankAccount.tsx b/src/components/AddPlaidBankAccount.tsx index edfdb76b7b8f9..4c50576b5417a 100644 --- a/src/components/AddPlaidBankAccount.tsx +++ b/src/components/AddPlaidBankAccount.tsx @@ -1,10 +1,9 @@ import React, {useCallback, useEffect, useRef, useState} from 'react'; -import {ActivityIndicator, View} from 'react-native'; +import {View} from 'react-native'; import type {OnyxEntry} from 'react-native-onyx'; import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; import useOnyx from '@hooks/useOnyx'; -import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import {handlePlaidError, openPlaidBankAccountSelector, openPlaidBankLogin, setPlaidEvent} from '@libs/actions/BankAccounts'; import KeyboardShortcut from '@libs/KeyboardShortcut'; @@ -14,6 +13,7 @@ import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import type {PlaidData} from '@src/types/onyx'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; +import ActivityIndicator from './ActivityIndicator'; import FullPageOfflineBlockingView from './BlockingViews/FullPageOfflineBlockingView'; import FormHelpMessage from './FormHelpMessage'; import Icon from './Icon'; @@ -74,7 +74,6 @@ function AddPlaidBankAccount({ onInputChange = () => {}, isDisplayedInWalletFlow = false, }: AddPlaidBankAccountProps) { - const theme = useTheme(); const styles = useThemeStyles(); const plaidBankAccounts = plaidData?.bankAccounts ?? []; const defaultSelectedPlaidAccount = plaidBankAccounts.find((account) => account.plaidAccountID === selectedPlaidAccountID); @@ -230,10 +229,7 @@ function AddPlaidBankAccount({ if (plaidData?.isLoading) { return ( - + ); } diff --git a/src/components/AddToWalletButton/index.native.tsx b/src/components/AddToWalletButton/index.native.tsx index a6f3b51735d22..d7c67997e76a7 100644 --- a/src/components/AddToWalletButton/index.native.tsx +++ b/src/components/AddToWalletButton/index.native.tsx @@ -1,10 +1,10 @@ import {AddToWalletButton as RNAddToWalletButton} from '@expensify/react-native-wallet'; import type {TokenizationStatus} from '@expensify/react-native-wallet'; import React, {useCallback, useEffect, useState} from 'react'; -import {ActivityIndicator, Alert, View} from 'react-native'; +import {Alert, View} from 'react-native'; +import ActivityIndicator from '@components/ActivityIndicator'; import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; -import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import {getPaymentMethods} from '@libs/actions/PaymentMethods'; import getPlatform from '@libs/getPlatform'; @@ -19,7 +19,6 @@ function AddToWalletButton({card, cardHolderName, cardDescription, buttonStyle}: const {translate} = useLocalize(); const isCardAvailable = card.state === CONST.EXPENSIFY_CARD.STATE.OPEN; const [isLoading, setIsLoading] = useState(false); - const theme = useTheme(); const platform = getPlatform() === CONST.PLATFORM.IOS ? 'Apple' : 'Google'; const styles = useThemeStyles(); @@ -81,12 +80,7 @@ function AddToWalletButton({card, cardHolderName, cardDescription, buttonStyle}: } if (isLoading) { - return ( - - ); + return ; } if (isInWallet) { diff --git a/src/components/AddressSearch/index.tsx b/src/components/AddressSearch/index.tsx index 2b4fc3f40ce4d..4e0fe3d646f7b 100644 --- a/src/components/AddressSearch/index.tsx +++ b/src/components/AddressSearch/index.tsx @@ -1,9 +1,10 @@ import React, {forwardRef, useEffect, useMemo, useRef, useState} from 'react'; import type {ForwardedRef} from 'react'; -import {ActivityIndicator, Keyboard, LogBox, View} from 'react-native'; +import {Keyboard, LogBox, View} from 'react-native'; import type {LayoutChangeEvent} from 'react-native'; import {GooglePlacesAutocomplete} from 'react-native-google-places-autocomplete'; import type {GooglePlaceData, GooglePlaceDetail} from 'react-native-google-places-autocomplete'; +import ActivityIndicator from '@components/ActivityIndicator'; import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator'; import LocationErrorMessage from '@components/LocationErrorMessage'; import ScrollView from '@components/ScrollView'; @@ -339,13 +340,10 @@ function AddressSearch( const listLoader = useMemo( () => ( - + ), - [styles.pv4, theme.spinner], + [styles.pv4], ); return ( diff --git a/src/components/Attachments/AttachmentView/DefaultAttachmentView/index.tsx b/src/components/Attachments/AttachmentView/DefaultAttachmentView/index.tsx index 2ec825b6ac554..2639c618cbc89 100644 --- a/src/components/Attachments/AttachmentView/DefaultAttachmentView/index.tsx +++ b/src/components/Attachments/AttachmentView/DefaultAttachmentView/index.tsx @@ -1,6 +1,7 @@ import React from 'react'; import type {StyleProp, ViewStyle} from 'react-native'; -import {ActivityIndicator, View} from 'react-native'; +import {View} from 'react-native'; +import ActivityIndicator from '@components/ActivityIndicator'; import Icon from '@components/Icon'; import * as Expensicons from '@components/Icon/Expensicons'; import Text from '@components/Text'; @@ -61,7 +62,6 @@ function DefaultAttachmentView({fileName = '', shouldShowLoadingSpinnerIcon = fa diff --git a/src/components/AvatarCropModal/AvatarCropModal.tsx b/src/components/AvatarCropModal/AvatarCropModal.tsx index be14348ce897a..d7721debb3420 100644 --- a/src/components/AvatarCropModal/AvatarCropModal.tsx +++ b/src/components/AvatarCropModal/AvatarCropModal.tsx @@ -1,10 +1,11 @@ import React, {useCallback, useEffect, useState} from 'react'; -import {ActivityIndicator, InteractionManager, View} from 'react-native'; +import {InteractionManager, View} from 'react-native'; import type {LayoutChangeEvent} from 'react-native'; import {Gesture, GestureHandlerRootView} from 'react-native-gesture-handler'; import type {GestureUpdateEvent, PanGestureChangeEventPayload, PanGestureHandlerEventPayload} from 'react-native-gesture-handler'; import ImageSize from 'react-native-image-size'; import {interpolate, runOnUI, useSharedValue} from 'react-native-reanimated'; +import ActivityIndicator from '@components/ActivityIndicator'; import Button from '@components/Button'; import HeaderGap from '@components/HeaderGap'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; @@ -375,9 +376,8 @@ function AvatarCropModal({imageUri = '', imageName = '', imageType = '', onClose {/* To avoid layout shift we should hide this component until the image container & image is initialized */} {!isImageInitialized || !isImageContainerInitialized ? ( ) : ( <> diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx index a0104a6e098db..3c9b04b3cc4e3 100644 --- a/src/components/Button/index.tsx +++ b/src/components/Button/index.tsx @@ -2,7 +2,8 @@ import {useIsFocused} from '@react-navigation/native'; import type {ForwardedRef} from 'react'; import React, {useCallback, useMemo, useState} from 'react'; import type {GestureResponderEvent, LayoutChangeEvent, StyleProp, TextStyle, ViewStyle} from 'react-native'; -import {ActivityIndicator, StyleSheet, View} from 'react-native'; +import {StyleSheet, View} from 'react-native'; +import ActivityIndicator from '@components/ActivityIndicator'; import Icon from '@components/Icon'; import * as Expensicons from '@components/Icon/Expensicons'; import type {PressableRef} from '@components/Pressable/GenericPressable/types'; diff --git a/src/components/FullscreenLoadingIndicator.tsx b/src/components/FullscreenLoadingIndicator.tsx index 32ff1cd1f0793..093e514c00fb3 100644 --- a/src/components/FullscreenLoadingIndicator.tsx +++ b/src/components/FullscreenLoadingIndicator.tsx @@ -1,24 +1,28 @@ import React from 'react'; import type {ActivityIndicatorProps, StyleProp, ViewStyle} from 'react-native'; -import {ActivityIndicator, StyleSheet, View} from 'react-native'; -import useTheme from '@hooks/useTheme'; +import {StyleSheet, View} from 'react-native'; import useThemeStyles from '@hooks/useThemeStyles'; +import CONST from '@src/CONST'; +import ActivityIndicator from './ActivityIndicator'; type FullScreenLoadingIndicatorIconSize = ActivityIndicatorProps['size']; type FullScreenLoadingIndicatorProps = { + /** Styles of the outer view */ style?: StyleProp; + + /** Size of the icon */ iconSize?: FullScreenLoadingIndicatorIconSize; + + /** The ID of the test to be used for testing */ testID?: string; }; -function FullScreenLoadingIndicator({style, iconSize = 'large', testID = ''}: FullScreenLoadingIndicatorProps) { - const theme = useTheme(); +function FullScreenLoadingIndicator({style, iconSize = CONST.ACTIVITY_INDICATOR_SIZE.LARGE, testID = ''}: FullScreenLoadingIndicatorProps) { const styles = useThemeStyles(); return ( diff --git a/src/components/HeaderWithBackButton/index.tsx b/src/components/HeaderWithBackButton/index.tsx index 41e15c1f8b4ca..8df34b97933ae 100755 --- a/src/components/HeaderWithBackButton/index.tsx +++ b/src/components/HeaderWithBackButton/index.tsx @@ -1,6 +1,7 @@ import React, {useMemo} from 'react'; -import {ActivityIndicator, Keyboard, StyleSheet, View} from 'react-native'; +import {Keyboard, StyleSheet, View} from 'react-native'; import type {SvgProps} from 'react-native-svg'; +import ActivityIndicator from '@components/ActivityIndicator'; import Avatar from '@components/Avatar'; import AvatarWithDisplayName from '@components/AvatarWithDisplayName'; import Header from '@components/Header'; @@ -274,11 +275,7 @@ function HeaderWithBackButton({ ) : ( - + ))} {shouldShowPinButton && !!report && } diff --git a/src/components/Lightbox/index.tsx b/src/components/Lightbox/index.tsx index e9ae48eaacda2..bbcaf4043bece 100644 --- a/src/components/Lightbox/index.tsx +++ b/src/components/Lightbox/index.tsx @@ -1,7 +1,8 @@ import React, {useCallback, useContext, useEffect, useMemo, useState} from 'react'; import type {LayoutChangeEvent, StyleProp, ViewStyle} from 'react-native'; -import {ActivityIndicator, PixelRatio, StyleSheet, View} from 'react-native'; +import {PixelRatio, StyleSheet, View} from 'react-native'; import {useSharedValue} from 'react-native-reanimated'; +import ActivityIndicator from '@components/ActivityIndicator'; import AttachmentOfflineIndicator from '@components/AttachmentOfflineIndicator'; import AttachmentCarouselPagerContext from '@components/Attachments/AttachmentCarousel/Pager/AttachmentCarouselPagerContext'; import Image from '@components/Image'; @@ -13,6 +14,7 @@ import useNetwork from '@hooks/useNetwork'; import useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; import {isLocalFile} from '@libs/fileDownload/FileUtils'; +import CONST from '@src/CONST'; import NUMBER_OF_CONCURRENT_LIGHTBOXES from './numberOfConcurrentLightboxes'; const cachedImageDimensions = new Map(); @@ -269,7 +271,7 @@ function Lightbox({isAuthTokenRequired = false, uri, onScaleChanged: onScaleChan {/* Show activity indicator while the lightbox is still loading the image. */} {isLoading && (!isOffline || isALocalFile) && ( )} diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx index ba55883c8c75a..5c3b82410b9b2 100644 --- a/src/components/MenuItem.tsx +++ b/src/components/MenuItem.tsx @@ -2,7 +2,7 @@ import type {ImageContentFit} from 'expo-image'; import type {ReactElement, ReactNode, Ref} from 'react'; import React, {useContext, useMemo, useRef} from 'react'; import type {GestureResponderEvent, StyleProp, TextStyle, ViewStyle} from 'react-native'; -import {ActivityIndicator, View} from 'react-native'; +import {View} from 'react-native'; import type {ValueOf} from 'type-fest'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useStyleUtils from '@hooks/useStyleUtils'; @@ -24,6 +24,7 @@ import CONST from '@src/CONST'; import type {Icon as IconType} from '@src/types/onyx/OnyxCommon'; import type {TooltipAnchorAlignment} from '@src/types/utils/AnchorAlignment'; import type IconAsset from '@src/types/utils/IconAsset'; +import ActivityIndicator from './ActivityIndicator'; import Avatar from './Avatar'; import Badge from './Badge'; import CopyTextToClipboard from './CopyTextToClipboard'; @@ -777,10 +778,7 @@ function MenuItem({ additionalStyles={additionalIconStyles} /> ) : ( - + ))} {!!icon && iconType === CONST.ICON_TYPE_WORKSPACE && ( (false); const styles = useThemeStyles(); const illustrations = useThemeIllustrations(); - const theme = useTheme(); const width = isLarge ? variables.cardPreviewWidth : variables.cardIconWidth; const height = isLarge ? variables.cardPreviewHeight : variables.cardIconHeight; const [loading, setLoading] = useState(true); @@ -57,10 +56,7 @@ function PlaidCardFeedIcon({plaidUrl, style, isLarge, isSmall}: PlaidCardFeedIco /> {loading ? ( - + ) : ( {}, onError = () => {}, onExit = () => {}, onEvent, receivedRedirectURI}: PlaidLinkProps) { const [isPlaidLoaded, setIsPlaidLoaded] = useState(false); - const theme = useTheme(); const styles = useThemeStyles(); const successCallback = useCallback( (publicToken: string, metadata: PlaidLinkOnSuccessMetadata) => { @@ -68,10 +68,7 @@ function PlaidLink({token, onSuccess = () => {}, onError = () => {}, onExit = () return ( - + ); } diff --git a/src/components/ReportActionItem/MoneyReportView.tsx b/src/components/ReportActionItem/MoneyReportView.tsx index dc1d9e628bfb0..1e0eac53ed618 100644 --- a/src/components/ReportActionItem/MoneyReportView.tsx +++ b/src/components/ReportActionItem/MoneyReportView.tsx @@ -1,8 +1,9 @@ import {Str} from 'expensify-common'; import React, {useMemo} from 'react'; import type {StyleProp, TextStyle} from 'react-native'; -import {ActivityIndicator, View} from 'react-native'; +import {View} from 'react-native'; import type {OnyxEntry} from 'react-native-onyx'; +import ActivityIndicator from '@components/ActivityIndicator'; import Icon from '@components/Icon'; import * as Expensicons from '@components/Icon/Expensicons'; import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription'; @@ -199,7 +200,6 @@ function MoneyReportView({report, policy, isCombinedReport = false, shouldShowTo )} {!isTotalUpdated && !isOffline ? ( diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx index 14cc6ccb06bb6..d5ae3c2279ff3 100644 --- a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx +++ b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx @@ -1,7 +1,8 @@ import React, {useCallback, useContext, useDeferredValue, useEffect, useMemo, useRef, useState} from 'react'; -import {ActivityIndicator, FlatList, View} from 'react-native'; +import {FlatList, View} from 'react-native'; import type {ListRenderItemInfo, ViewToken} from 'react-native'; import Animated, {useAnimatedStyle, useSharedValue, withDelay, withSpring, withTiming} from 'react-native-reanimated'; +import ActivityIndicator from '@components/ActivityIndicator'; import AnimatedSubmitButton from '@components/AnimatedSubmitButton'; import Button from '@components/Button'; import {getButtonRole} from '@components/Button/utils'; @@ -739,10 +740,7 @@ function MoneyRequestReportPreviewContent({ styles.mtn1, ]} > - + ) : ( diff --git a/src/components/SelectionList/Search/TransactionGroupListItem.tsx b/src/components/SelectionList/Search/TransactionGroupListItem.tsx index f09a9f5e73c4a..7d4dc68426083 100644 --- a/src/components/SelectionList/Search/TransactionGroupListItem.tsx +++ b/src/components/SelectionList/Search/TransactionGroupListItem.tsx @@ -1,5 +1,6 @@ import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'; -import {ActivityIndicator, View} from 'react-native'; +import {View} from 'react-native'; +import ActivityIndicator from '@components/ActivityIndicator'; import AnimatedCollapsible from '@components/AnimatedCollapsible'; import Button from '@components/Button'; import {getButtonRole} from '@components/Button/utils'; diff --git a/src/components/TextInput/BaseTextInput/implementation/index.native.tsx b/src/components/TextInput/BaseTextInput/implementation/index.native.tsx index 7aa3c74a6f63c..7ee876bf55536 100644 --- a/src/components/TextInput/BaseTextInput/implementation/index.native.tsx +++ b/src/components/TextInput/BaseTextInput/implementation/index.native.tsx @@ -1,8 +1,9 @@ import {Str} from 'expensify-common'; import React, {useCallback, useEffect, useRef, useState} from 'react'; import type {GestureResponderEvent, LayoutChangeEvent, NativeSyntheticEvent, StyleProp, TextInput, TextInputFocusEventData, ViewStyle} from 'react-native'; -import {ActivityIndicator, StyleSheet, View} from 'react-native'; +import {StyleSheet, View} from 'react-native'; import {Easing, useSharedValue, withTiming} from 'react-native-reanimated'; +import ActivityIndicator from '@components/ActivityIndicator'; import Checkbox from '@components/Checkbox'; import FormHelpMessage from '@components/FormHelpMessage'; import Icon from '@components/Icon'; @@ -441,7 +442,6 @@ function BaseTextInput({ )} {inputProps.isLoading !== undefined && !shouldShowClearButton && ( (undefined); const [distanceEReceiptAspectRatio, setDistanceEReceiptAspectRatio] = useState(undefined); @@ -109,10 +108,7 @@ function ReceiptPreview({source, hovered, isEReceipt = false, transactionItem}: {isLoading && ( - + )} diff --git a/src/pages/ReimbursementAccount/NonUSD/BankInfo/subSteps/BankAccountDetails.tsx b/src/pages/ReimbursementAccount/NonUSD/BankInfo/subSteps/BankAccountDetails.tsx index 2e077788e6a3b..cf2bc5a1465c3 100644 --- a/src/pages/ReimbursementAccount/NonUSD/BankInfo/subSteps/BankAccountDetails.tsx +++ b/src/pages/ReimbursementAccount/NonUSD/BankInfo/subSteps/BankAccountDetails.tsx @@ -1,5 +1,6 @@ import React, {useCallback, useMemo} from 'react'; -import {ActivityIndicator, View} from 'react-native'; +import {View} from 'react-native'; +import ActivityIndicator from '@components/ActivityIndicator'; import AddressSearch from '@components/AddressSearch'; import FormProvider from '@components/Form/FormProvider'; import InputWrapper from '@components/Form/InputWrapper'; @@ -9,7 +10,6 @@ import TextInput from '@components/TextInput'; import useLocalize from '@hooks/useLocalize'; import useOnyx from '@hooks/useOnyx'; import useReimbursementAccountStepFormSubmit from '@hooks/useReimbursementAccountStepFormSubmit'; -import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import type BankInfoSubStepProps from '@pages/ReimbursementAccount/NonUSD/BankInfo/types'; import {getBankInfoStepValues} from '@pages/ReimbursementAccount/NonUSD/utils/getBankInfoStepValues'; @@ -29,7 +29,6 @@ function getInputComponent(field: CorpayFormField) { function BankAccountDetails({onNext, isEditing, corpayFields}: BankInfoSubStepProps) { const {translate} = useLocalize(); const styles = useThemeStyles(); - const theme = useTheme(); const [reimbursementAccount] = useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {canBeMissing: false}); const [reimbursementAccountDraft] = useOnyx(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM_DRAFT, {canBeMissing: true}); @@ -134,7 +133,6 @@ function BankAccountDetails({onNext, isEditing, corpayFields}: BankInfoSubStepPr diff --git a/src/pages/ReimbursementAccount/NonUSD/BankInfo/subSteps/Confirmation.tsx b/src/pages/ReimbursementAccount/NonUSD/BankInfo/subSteps/Confirmation.tsx index dd707a480d071..6ba0c18dae44b 100644 --- a/src/pages/ReimbursementAccount/NonUSD/BankInfo/subSteps/Confirmation.tsx +++ b/src/pages/ReimbursementAccount/NonUSD/BankInfo/subSteps/Confirmation.tsx @@ -1,11 +1,11 @@ import React, {useMemo} from 'react'; -import {ActivityIndicator, View} from 'react-native'; +import {View} from 'react-native'; +import ActivityIndicator from '@components/ActivityIndicator'; import FormProvider from '@components/Form/FormProvider'; import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription'; import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; import useOnyx from '@hooks/useOnyx'; -import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import type BankInfoSubStepProps from '@pages/ReimbursementAccount/NonUSD/BankInfo/types'; import {getBankInfoStepValues} from '@pages/ReimbursementAccount/NonUSD/utils/getBankInfoStepValues'; @@ -18,7 +18,6 @@ const {ACCOUNT_HOLDER_COUNTRY} = INPUT_IDS.ADDITIONAL_DATA.CORPAY; function Confirmation({onNext, onMove, corpayFields}: BankInfoSubStepProps) { const {translate} = useLocalize(); const styles = useThemeStyles(); - const theme = useTheme(); const [reimbursementAccount] = useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {canBeMissing: false}); const [reimbursementAccountDraft] = useOnyx(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM_DRAFT, {canBeMissing: true}); @@ -67,7 +66,6 @@ function Confirmation({onNext, onMove, corpayFields}: BankInfoSubStepProps) { {corpayFields?.isLoading ? ( ) : ( diff --git a/src/pages/home/report/ListBoundaryLoader.tsx b/src/pages/home/report/ListBoundaryLoader.tsx index 8081e18bb6680..38fd2446fcb16 100644 --- a/src/pages/home/report/ListBoundaryLoader.tsx +++ b/src/pages/home/report/ListBoundaryLoader.tsx @@ -1,12 +1,12 @@ import React, {useEffect} from 'react'; -import {ActivityIndicator, View} from 'react-native'; +import {View} from 'react-native'; import type {ValueOf} from 'type-fest'; +import ActivityIndicator from '@components/ActivityIndicator'; import Button from '@components/Button'; import ReportActionsSkeletonView from '@components/ReportActionsSkeletonView'; import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; -import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import CONST from '@src/CONST'; @@ -42,7 +42,6 @@ function ListBoundaryLoader({ hasError = false, onRetry, }: ListBoundaryLoaderProps) { - const theme = useTheme(); const styles = useThemeStyles(); const {isOffline} = useNetwork(); const {translate} = useLocalize(); @@ -101,10 +100,7 @@ function ListBoundaryLoader({ // the styles for android and the rest components are different that's why we use two different components return ( - + ); } diff --git a/src/pages/iou/request/step/IOURequestStepCategory.tsx b/src/pages/iou/request/step/IOURequestStepCategory.tsx index b549595aeee1b..b81ea9921aa29 100644 --- a/src/pages/iou/request/step/IOURequestStepCategory.tsx +++ b/src/pages/iou/request/step/IOURequestStepCategory.tsx @@ -1,6 +1,7 @@ import lodashIsEmpty from 'lodash/isEmpty'; import React, {useEffect} from 'react'; -import {ActivityIndicator, InteractionManager, View} from 'react-native'; +import {InteractionManager, View} from 'react-native'; +import ActivityIndicator from '@components/ActivityIndicator'; import FullPageOfflineBlockingView from '@components/BlockingViews/FullPageOfflineBlockingView'; import Button from '@components/Button'; import CategoryPicker from '@components/CategoryPicker'; @@ -14,7 +15,6 @@ import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; import useOnyx from '@hooks/useOnyx'; import useShowNotFoundPageInIOUStep from '@hooks/useShowNotFoundPageInIOUStep'; -import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import {getIOURequestPolicyID, setDraftSplitTransaction, setMoneyRequestCategory, updateMoneyRequestCategory} from '@libs/actions/IOU'; import {enablePolicyCategories, getPolicyCategories} from '@libs/actions/Policy/Category'; @@ -46,7 +46,6 @@ function IOURequestStepCategory({ transaction, }: IOURequestStepCategoryProps) { const styles = useThemeStyles(); - const theme = useTheme(); const {translate} = useLocalize(); const policyIdReal = getIOURequestPolicyID(transaction, reportReal); @@ -154,7 +153,6 @@ function IOURequestStepCategory({ )} {shouldShowOfflineView && {null}} diff --git a/src/pages/iou/request/step/IOURequestStepDestination.tsx b/src/pages/iou/request/step/IOURequestStepDestination.tsx index a6c6c54c03182..e294101a40b3e 100644 --- a/src/pages/iou/request/step/IOURequestStepDestination.tsx +++ b/src/pages/iou/request/step/IOURequestStepDestination.tsx @@ -1,5 +1,6 @@ import React from 'react'; -import {ActivityIndicator, InteractionManager, View} from 'react-native'; +import {InteractionManager, View} from 'react-native'; +import ActivityIndicator from '@components/ActivityIndicator'; import FullPageOfflineBlockingView from '@components/BlockingViews/FullPageOfflineBlockingView'; import Button from '@components/Button'; import DestinationPicker from '@components/DestinationPicker'; @@ -13,7 +14,6 @@ import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; import useOnyx from '@hooks/useOnyx'; import useSafeAreaInsets from '@hooks/useSafeAreaInsets'; -import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; import {getPerDiemCustomUnit, isPolicyAdmin} from '@libs/PolicyUtils'; @@ -63,7 +63,6 @@ function IOURequestStepDestination({ const selectedDestination = transaction?.comment?.customUnit?.customUnitRateID; const styles = useThemeStyles(); - const theme = useTheme(); const {translate} = useLocalize(); // eslint-disable-next-line rulesdir/no-negated-variables @@ -131,7 +130,6 @@ function IOURequestStepDestination({ )} {shouldShowOfflineView && {null}} diff --git a/src/pages/iou/request/step/IOURequestStepScan/index.native.tsx b/src/pages/iou/request/step/IOURequestStepScan/index.native.tsx index 67071643d9b44..f0c9bdb2b6492 100644 --- a/src/pages/iou/request/step/IOURequestStepScan/index.native.tsx +++ b/src/pages/iou/request/step/IOURequestStepScan/index.native.tsx @@ -1,6 +1,6 @@ import {useFocusEffect} from '@react-navigation/core'; import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'; -import {ActivityIndicator, Alert, AppState, InteractionManager, StyleSheet, View} from 'react-native'; +import {Alert, AppState, InteractionManager, StyleSheet, View} from 'react-native'; import type {LayoutRectangle} from 'react-native'; import ReactNativeBlobUtil from 'react-native-blob-util'; import {Gesture, GestureDetector} from 'react-native-gesture-handler'; @@ -13,6 +13,7 @@ import MultiScan from '@assets/images/educational-illustration__multi-scan.svg'; import TestReceipt from '@assets/images/fake-receipt.png'; import Hand from '@assets/images/hand.svg'; import Shutter from '@assets/images/shutter.svg'; +import ActivityIndicator from '@components/ActivityIndicator'; import AttachmentPicker from '@components/AttachmentPicker'; import Button from '@components/Button'; import FeatureTrainingModal from '@components/FeatureTrainingModal'; diff --git a/src/pages/iou/request/step/IOURequestStepScan/index.tsx b/src/pages/iou/request/step/IOURequestStepScan/index.tsx index b70768a40c316..d785cc8548905 100644 --- a/src/pages/iou/request/step/IOURequestStepScan/index.tsx +++ b/src/pages/iou/request/step/IOURequestStepScan/index.tsx @@ -1,7 +1,7 @@ import {useIsFocused} from '@react-navigation/native'; import React, {useCallback, useContext, useEffect, useMemo, useReducer, useRef, useState} from 'react'; import type {LayoutRectangle} from 'react-native'; -import {ActivityIndicator, InteractionManager, PanResponder, StyleSheet, View} from 'react-native'; +import {InteractionManager, PanResponder, StyleSheet, View} from 'react-native'; import type {OnyxEntry} from 'react-native-onyx'; import {RESULTS} from 'react-native-permissions'; import Animated, {useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated'; @@ -11,6 +11,7 @@ import TestReceipt from '@assets/images/fake-receipt.png'; import Hand from '@assets/images/hand.svg'; import ReceiptUpload from '@assets/images/receipt-upload.svg'; import Shutter from '@assets/images/shutter.svg'; +import ActivityIndicator from '@components/ActivityIndicator'; import AttachmentPicker from '@components/AttachmentPicker'; import Button from '@components/Button'; import CopyTextToClipboard from '@components/CopyTextToClipboard'; diff --git a/src/pages/settings/Security/TwoFactorAuth/CopyCodesPage.tsx b/src/pages/settings/Security/TwoFactorAuth/CopyCodesPage.tsx index 04dc42b020f7f..f8e146286ee3e 100644 --- a/src/pages/settings/Security/TwoFactorAuth/CopyCodesPage.tsx +++ b/src/pages/settings/Security/TwoFactorAuth/CopyCodesPage.tsx @@ -1,5 +1,6 @@ import React, {useEffect, useState} from 'react'; -import {ActivityIndicator, View} from 'react-native'; +import {View} from 'react-native'; +import ActivityIndicator from '@components/ActivityIndicator'; import Button from '@components/Button'; import FixedFooter from '@components/FixedFooter'; import FormHelpMessage from '@components/FormHelpMessage'; @@ -12,7 +13,6 @@ import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; import useOnyx from '@hooks/useOnyx'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; -import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import {READ_COMMANDS} from '@libs/API/types'; import Clipboard from '@libs/Clipboard'; @@ -28,7 +28,6 @@ import type {TwoFactorAuthPageProps} from './TwoFactorAuthPage'; import TwoFactorAuthWrapper from './TwoFactorAuthWrapper'; function CopyCodesPage({route}: TwoFactorAuthPageProps) { - const theme = useTheme(); const styles = useThemeStyles(); const {translate} = useLocalize(); // We need to use isSmallScreenWidth instead of shouldUseNarrowLayout to use correct style @@ -81,7 +80,7 @@ function CopyCodesPage({route}: TwoFactorAuthPageProps) { {account?.isLoading ? ( - + ) : ( <> diff --git a/src/pages/settings/Wallet/WalletPage/WalletPage.tsx b/src/pages/settings/Wallet/WalletPage/WalletPage.tsx index a89d9995b379d..fd66581265493 100644 --- a/src/pages/settings/Wallet/WalletPage/WalletPage.tsx +++ b/src/pages/settings/Wallet/WalletPage/WalletPage.tsx @@ -3,7 +3,8 @@ import isEmpty from 'lodash/isEmpty'; import type {ForwardedRef, RefObject} from 'react'; import React, {useCallback, useContext, useEffect, useLayoutEffect, useRef, useState} from 'react'; import type {GestureResponderEvent} from 'react-native'; -import {ActivityIndicator, View} from 'react-native'; +import {View} from 'react-native'; +import ActivityIndicator from '@components/ActivityIndicator'; import ConfirmModal from '@components/ConfirmModal'; import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; @@ -446,7 +447,6 @@ function WalletPage({shouldListenForResize = false}: WalletPageProps) { <> {shouldShowLoadingSpinner && ( diff --git a/src/pages/signin/ThirdPartySignInPage.tsx b/src/pages/signin/ThirdPartySignInPage.tsx index 4800752ee6c0b..67a4d0d420c9d 100644 --- a/src/pages/signin/ThirdPartySignInPage.tsx +++ b/src/pages/signin/ThirdPartySignInPage.tsx @@ -1,7 +1,8 @@ import React from 'react'; -import {ActivityIndicator, View} from 'react-native'; +import {View} from 'react-native'; import {SafeAreaView} from 'react-native-safe-area-context'; import type {ValueOf} from 'type-fest'; +import ActivityIndicator from '@components/ActivityIndicator'; import AppleSignIn from '@components/SignInButtons/AppleSignIn'; import GoogleSignIn from '@components/SignInButtons/GoogleSignIn'; import Text from '@components/Text'; @@ -37,7 +38,10 @@ function ThirdPartySignInPage({signInProvider}: ThirdPartySignInPageProps) { {account?.isLoading ? ( - + ) : ( + ) : ( {translate('workspace.qbd.setupPage.body')} {!hasResultOfFetchingSetupLink ? ( - + ) : ( )} {hasVisibleCategories && !isLoading && ( diff --git a/src/pages/workspace/companyCards/BankConnection/index.native.tsx b/src/pages/workspace/companyCards/BankConnection/index.native.tsx index 71264d6f05c42..05fd6ee149b37 100644 --- a/src/pages/workspace/companyCards/BankConnection/index.native.tsx +++ b/src/pages/workspace/companyCards/BankConnection/index.native.tsx @@ -1,7 +1,7 @@ import React, {useEffect, useMemo, useRef, useState} from 'react'; -import {ActivityIndicator} from 'react-native'; import type {WebViewNavigation} from 'react-native-webview'; import {WebView} from 'react-native-webview'; +import ActivityIndicator from '@components/ActivityIndicator'; import FullPageOfflineBlockingView from '@components/BlockingViews/FullPageOfflineBlockingView'; import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; @@ -12,7 +12,6 @@ import useLocalize from '@hooks/useLocalize'; import useOnyx from '@hooks/useOnyx'; import usePermissions from '@hooks/usePermissions'; import usePrevious from '@hooks/usePrevious'; -import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import useUpdateFeedBrokenConnection from '@hooks/useUpdateFeedBrokenConnection'; import {updateSelectedFeed} from '@libs/actions/Card'; @@ -44,7 +43,6 @@ type BankConnectionProps = { function BankConnection({policyID: policyIDFromProps, feed, route}: BankConnectionProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); - const theme = useTheme(); const webViewRef = useRef(null); const [session] = useOnyx(ONYXKEYS.SESSION, {canBeMissing: false}); const [assignCard] = useOnyx(ONYXKEYS.ASSIGN_CARD, {canBeMissing: true}); @@ -176,7 +174,6 @@ function BankConnection({policyID: policyIDFromProps, feed, route}: BankConnecti )} diff --git a/src/pages/workspace/companyCards/BankConnection/index.tsx b/src/pages/workspace/companyCards/BankConnection/index.tsx index 92858e5369dda..412c6b2e86161 100644 --- a/src/pages/workspace/companyCards/BankConnection/index.tsx +++ b/src/pages/workspace/companyCards/BankConnection/index.tsx @@ -1,5 +1,5 @@ import React, {useCallback, useEffect, useMemo, useState} from 'react'; -import {ActivityIndicator} from 'react-native'; +import ActivityIndicator from '@components/ActivityIndicator'; import BlockingView from '@components/BlockingViews/BlockingView'; import FullPageOfflineBlockingView from '@components/BlockingViews/FullPageOfflineBlockingView'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; @@ -14,7 +14,6 @@ import useNetwork from '@hooks/useNetwork'; import useOnyx from '@hooks/useOnyx'; import usePermissions from '@hooks/usePermissions'; import usePrevious from '@hooks/usePrevious'; -import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import useUpdateFeedBrokenConnection from '@hooks/useUpdateFeedBrokenConnection'; import {setAssignCardStepAndData} from '@libs/actions/CompanyCards'; @@ -50,7 +49,6 @@ function BankConnection({policyID: policyIDFromProps, feed, route}: BankConnecti const {translate} = useLocalize(); const [addNewCard] = useOnyx(ONYXKEYS.ADD_NEW_COMPANY_CARD, {canBeMissing: true}); const [assignCard] = useOnyx(ONYXKEYS.ASSIGN_CARD, {canBeMissing: true}); - const theme = useTheme(); const {bankName: bankNameFromRoute, backTo, policyID: policyIDFromRoute} = route?.params ?? {}; const policyID = policyIDFromProps ?? policyIDFromRoute; const [cardFeeds] = useCardFeeds(policyID); @@ -203,7 +201,6 @@ function BankConnection({policyID: policyIDFromProps, feed, route}: BankConnecti ) : ( - } + rightComponent={} description={translate('workspace.moreFeatures.companyCards.lastUpdated')} title={card?.isLoadingLastUpdated ? translate('workspace.moreFeatures.companyCards.updating') : lastScrape} interactive={false} diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx index 94d348d6828c4..d8beedb6f36c9 100644 --- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx +++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx @@ -1,5 +1,5 @@ import React, {useCallback, useContext, useEffect, useState} from 'react'; -import {ActivityIndicator} from 'react-native'; +import ActivityIndicator from '@components/ActivityIndicator'; import DecisionModal from '@components/DecisionModal'; import {DelegateNoAccessContext} from '@components/DelegateNoAccessModalProvider'; import * as Illustrations from '@components/Icon/Illustrations'; @@ -10,7 +10,6 @@ import useNetwork from '@hooks/useNetwork'; import useOnyx from '@hooks/useOnyx'; import usePermissions from '@hooks/usePermissions'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; -import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import { checkIfFeedConnectionIsBroken, @@ -49,7 +48,6 @@ type WorkspaceCompanyCardsPageProps = PlatformStackScreenProps )} {!isLoading && ( diff --git a/src/pages/workspace/companyCards/addNew/PlaidConnectionStep.tsx b/src/pages/workspace/companyCards/addNew/PlaidConnectionStep.tsx index bdfd6e5ed48f0..33839e030d18c 100644 --- a/src/pages/workspace/companyCards/addNew/PlaidConnectionStep.tsx +++ b/src/pages/workspace/companyCards/addNew/PlaidConnectionStep.tsx @@ -1,7 +1,8 @@ import React, {useCallback, useEffect, useRef} from 'react'; -import {ActivityIndicator, InteractionManager, View} from 'react-native'; +import {InteractionManager, View} from 'react-native'; import type {LinkSuccessMetadata} from 'react-native-plaid-link-sdk'; import type {PlaidLinkOnSuccessMetadata} from 'react-plaid-link/src/types'; +import ActivityIndicator from '@components/ActivityIndicator'; import FullPageOfflineBlockingView from '@components/BlockingViews/FullPageOfflineBlockingView'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import PlaidLink from '@components/PlaidLink'; @@ -10,7 +11,6 @@ import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; import useOnyx from '@hooks/useOnyx'; -import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import {setAddNewCompanyCardStepAndData, setAssignCardStepAndData} from '@libs/actions/CompanyCards'; import KeyboardShortcut from '@libs/KeyboardShortcut'; @@ -28,7 +28,6 @@ import {isEmptyObject} from '@src/types/utils/EmptyObject'; function PlaidConnectionStep({feed, policyID}: {feed?: CompanyCardFeed; policyID?: string}) { const {translate} = useLocalize(); const styles = useThemeStyles(); - const theme = useTheme(); const [addNewCard] = useOnyx(ONYXKEYS.ADD_NEW_COMPANY_CARD, {canBeMissing: true}); const isUSCountry = addNewCard?.data?.selectedCountry === CONST.COUNTRY.US; const [isPlaidDisabled] = useOnyx(ONYXKEYS.IS_PLAID_DISABLED, {canBeMissing: true}); @@ -189,10 +188,7 @@ function PlaidConnectionStep({feed, policyID}: {feed?: CompanyCardFeed; policyID if (plaidData?.isLoading) { return ( - + ); } diff --git a/src/pages/workspace/distanceRates/PolicyDistanceRatesPage.tsx b/src/pages/workspace/distanceRates/PolicyDistanceRatesPage.tsx index 117c56927ad91..cf2897af82b39 100644 --- a/src/pages/workspace/distanceRates/PolicyDistanceRatesPage.tsx +++ b/src/pages/workspace/distanceRates/PolicyDistanceRatesPage.tsx @@ -1,6 +1,7 @@ import React, {useCallback, useEffect, useMemo, useState} from 'react'; -import {ActivityIndicator, InteractionManager, View} from 'react-native'; +import {InteractionManager, View} from 'react-native'; import type {OnyxCollection} from 'react-native-onyx'; +import ActivityIndicator from '@components/ActivityIndicator'; import Button from '@components/Button'; import type {DropdownOption, WorkspaceDistanceRatesBulkActionType} from '@components/ButtonWithDropdownMenu/types'; import ConfirmModal from '@components/ConfirmModal'; @@ -24,7 +25,6 @@ import usePolicy from '@hooks/usePolicy'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useSearchBackPress from '@hooks/useSearchBackPress'; import useSearchResults from '@hooks/useSearchResults'; -import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import {turnOffMobileSelectionMode} from '@libs/actions/MobileSelectionMode'; import { @@ -62,7 +62,6 @@ function PolicyDistanceRatesPage({ }: PolicyDistanceRatesPageProps) { const {shouldUseNarrowLayout} = useResponsiveLayout(); const styles = useThemeStyles(); - const theme = useTheme(); const {translate} = useLocalize(); const [isWarningModalVisible, setIsWarningModalVisible] = useState(false); const [isDeleteModalVisible, setIsDeleteModalVisible] = useState(false); @@ -500,7 +499,6 @@ function PolicyDistanceRatesPage({ )} {Object.values(customUnitRates).length > 0 && ( diff --git a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPage.tsx b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPage.tsx index 274fba4e52cf2..a9f1b3b53a70e 100644 --- a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPage.tsx +++ b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPage.tsx @@ -1,9 +1,8 @@ import React, {useCallback, useEffect} from 'react'; -import {ActivityIndicator} from 'react-native'; +import ActivityIndicator from '@components/ActivityIndicator'; import useDefaultFundID from '@hooks/useDefaultFundID'; import useNetwork from '@hooks/useNetwork'; import useOnyx from '@hooks/useOnyx'; -import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import {filterInactiveCards} from '@libs/CardUtils'; import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; @@ -21,7 +20,6 @@ type WorkspaceExpensifyCardPageProps = PlatformStackScreenProps ); } diff --git a/src/pages/workspace/perDiem/WorkspacePerDiemPage.tsx b/src/pages/workspace/perDiem/WorkspacePerDiemPage.tsx index 242a2cc79c052..30669300fdab5 100644 --- a/src/pages/workspace/perDiem/WorkspacePerDiemPage.tsx +++ b/src/pages/workspace/perDiem/WorkspacePerDiemPage.tsx @@ -1,6 +1,7 @@ import {useFocusEffect} from '@react-navigation/native'; import React, {useCallback, useEffect, useMemo, useState} from 'react'; -import {ActivityIndicator, InteractionManager, View} from 'react-native'; +import {InteractionManager, View} from 'react-native'; +import ActivityIndicator from '@components/ActivityIndicator'; import ButtonWithDropdownMenu from '@components/ButtonWithDropdownMenu'; import type {DropdownOption} from '@components/ButtonWithDropdownMenu/types'; import ConfirmModal from '@components/ConfirmModal'; @@ -28,7 +29,6 @@ import usePolicy from '@hooks/usePolicy'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useSearchBackPress from '@hooks/useSearchBackPress'; import useSearchResults from '@hooks/useSearchResults'; -import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import {convertAmountToDisplayString} from '@libs/CurrencyUtils'; import {canUseTouchScreen} from '@libs/DeviceCapabilities'; @@ -117,7 +117,6 @@ function WorkspacePerDiemPage({route}: WorkspacePerDiemPageProps) { // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth const {shouldUseNarrowLayout, isSmallScreenWidth} = useResponsiveLayout(); const styles = useThemeStyles(); - const theme = useTheme(); const {translate, localeCompare} = useLocalize(); const [isOfflineModalVisible, setIsOfflineModalVisible] = useState(false); const [selectedPerDiem, setSelectedPerDiem] = useState([]); @@ -445,7 +444,6 @@ function WorkspacePerDiemPage({route}: WorkspacePerDiemPageProps) { )} {hasVisibleSubRates && !isLoading && ( diff --git a/src/pages/workspace/receiptPartners/WorkspaceReceiptPartnersPage.tsx b/src/pages/workspace/receiptPartners/WorkspaceReceiptPartnersPage.tsx index 0d4cca03c1a97..cc31bcfd3351e 100644 --- a/src/pages/workspace/receiptPartners/WorkspaceReceiptPartnersPage.tsx +++ b/src/pages/workspace/receiptPartners/WorkspaceReceiptPartnersPage.tsx @@ -1,5 +1,6 @@ import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'; -import {ActivityIndicator, View} from 'react-native'; +import {View} from 'react-native'; +import ActivityIndicator from '@components/ActivityIndicator'; import Button from '@components/Button'; import ConfirmModal from '@components/ConfirmModal'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; @@ -17,7 +18,6 @@ import useNetwork from '@hooks/useNetwork'; import usePolicy from '@hooks/usePolicy'; import usePrevious from '@hooks/usePrevious'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; -import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@navigation/Navigation'; import type {PlatformStackScreenProps} from '@navigation/PlatformStackNavigation/types'; @@ -45,7 +45,6 @@ function WorkspaceReceiptPartnersPage({route}: WorkspaceReceiptPartnersPageProps const {isOffline} = useNetwork(); const threeDotsMenuContainerRef = useRef(null); const policy = usePolicy(policyID); - const theme = useTheme(); const [selectedPartner, setSelectedPartner] = useState(null); const isLoading = policy?.isLoading; const [isDisconnectModalOpen, setIsDisconnectModalOpen] = useState(false); @@ -235,7 +234,6 @@ function WorkspaceReceiptPartnersPage({route}: WorkspaceReceiptPartnersPageProps ) : ( )} {!isLoading && ( diff --git a/src/pages/workspace/tags/WorkspaceTagsPage.tsx b/src/pages/workspace/tags/WorkspaceTagsPage.tsx index 2f8f7892747ec..aa8d075135443 100644 --- a/src/pages/workspace/tags/WorkspaceTagsPage.tsx +++ b/src/pages/workspace/tags/WorkspaceTagsPage.tsx @@ -1,5 +1,6 @@ import React, {useCallback, useEffect, useMemo, useState} from 'react'; -import {ActivityIndicator, InteractionManager, View} from 'react-native'; +import {InteractionManager, View} from 'react-native'; +import ActivityIndicator from '@components/ActivityIndicator'; import Button from '@components/Button'; import ButtonWithDropdownMenu from '@components/ButtonWithDropdownMenu'; import type {DropdownOption} from '@components/ButtonWithDropdownMenu/types'; @@ -32,7 +33,6 @@ import usePolicy from '@hooks/usePolicy'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useSearchBackPress from '@hooks/useSearchBackPress'; import useSearchResults from '@hooks/useSearchResults'; -import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import {isConnectionInProgress, isConnectionUnverified} from '@libs/actions/connections'; import {turnOffMobileSelectionMode} from '@libs/actions/MobileSelectionMode'; @@ -82,7 +82,6 @@ function WorkspaceTagsPage({route}: WorkspaceTagsPageProps) { // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth const {shouldUseNarrowLayout, isSmallScreenWidth} = useResponsiveLayout(); const styles = useThemeStyles(); - const theme = useTheme(); const {translate, localeCompare} = useLocalize(); const [isDownloadFailureModalVisible, setIsDownloadFailureModalVisible] = useState(false); const [isDeleteTagsConfirmModalVisible, setIsDeleteTagsConfirmModalVisible] = useState(false); @@ -694,7 +693,6 @@ function WorkspaceTagsPage({route}: WorkspaceTagsPageProps) { )} {hasVisibleTags && !isLoading && ( diff --git a/src/pages/workspace/tags/WorkspaceViewTagsPage.tsx b/src/pages/workspace/tags/WorkspaceViewTagsPage.tsx index 1403c4fa91ae9..37bc66e96b148 100644 --- a/src/pages/workspace/tags/WorkspaceViewTagsPage.tsx +++ b/src/pages/workspace/tags/WorkspaceViewTagsPage.tsx @@ -1,6 +1,7 @@ import {useIsFocused} from '@react-navigation/native'; import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'; -import {ActivityIndicator, InteractionManager, View} from 'react-native'; +import {InteractionManager, View} from 'react-native'; +import ActivityIndicator from '@components/ActivityIndicator'; import ButtonWithDropdownMenu from '@components/ButtonWithDropdownMenu'; import type {DropdownOption} from '@components/ButtonWithDropdownMenu/types'; import ConfirmModal from '@components/ConfirmModal'; @@ -24,7 +25,6 @@ import usePolicy from '@hooks/usePolicy'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useSearchBackPress from '@hooks/useSearchBackPress'; import useSearchResults from '@hooks/useSearchResults'; -import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import {turnOffMobileSelectionMode} from '@libs/actions/MobileSelectionMode'; import { @@ -63,7 +63,6 @@ function WorkspaceViewTagsPage({route}: WorkspaceViewTagsProps) { // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth const {shouldUseNarrowLayout, isSmallScreenWidth} = useResponsiveLayout(); const styles = useThemeStyles(); - const theme = useTheme(); const {translate, localeCompare} = useLocalize(); const dropdownButtonRef = useRef(null); const [isDeleteTagsConfirmModalVisible, setIsDeleteTagsConfirmModalVisible] = useState(false); @@ -402,7 +401,6 @@ function WorkspaceViewTagsPage({route}: WorkspaceViewTagsProps) { )} {tagList.length > 0 && !isLoading && ( diff --git a/src/pages/workspace/taxes/WorkspaceTaxesPage.tsx b/src/pages/workspace/taxes/WorkspaceTaxesPage.tsx index 7e9d0d3d1ada2..5f7ebdf3dc59a 100644 --- a/src/pages/workspace/taxes/WorkspaceTaxesPage.tsx +++ b/src/pages/workspace/taxes/WorkspaceTaxesPage.tsx @@ -1,5 +1,6 @@ import React, {useCallback, useEffect, useMemo, useState} from 'react'; -import {ActivityIndicator, InteractionManager, View} from 'react-native'; +import {InteractionManager, View} from 'react-native'; +import ActivityIndicator from '@components/ActivityIndicator'; import Button from '@components/Button'; import ButtonWithDropdownMenu from '@components/ButtonWithDropdownMenu'; import type {DropdownOption, WorkspaceTaxRatesBulkActionType} from '@components/ButtonWithDropdownMenu/types'; @@ -24,7 +25,6 @@ import useOnyx from '@hooks/useOnyx'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useSearchBackPress from '@hooks/useSearchBackPress'; import useSearchResults from '@hooks/useSearchResults'; -import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import {isConnectionInProgress, isConnectionUnverified} from '@libs/actions/connections'; import {turnOffMobileSelectionMode} from '@libs/actions/MobileSelectionMode'; @@ -63,7 +63,6 @@ function WorkspaceTaxesPage({ // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth const {shouldUseNarrowLayout, isSmallScreenWidth} = useResponsiveLayout(); const styles = useThemeStyles(); - const theme = useTheme(); const {translate, localeCompare} = useLocalize(); const [selectedTaxesIDs, setSelectedTaxesIDs] = useState([]); const [isDeleteModalVisible, setIsDeleteModalVisible] = useState(false); @@ -415,7 +414,6 @@ function WorkspaceTaxesPage({ )} ; function WorkspaceWorkflowsPage({policy, route}: WorkspaceWorkflowsPageProps) { const {translate, localeCompare} = useLocalize(); - const theme = useTheme(); const styles = useThemeStyles(); // We need to use isSmallScreenWidth instead of shouldUseNarrowLayout to apply a correct padding style @@ -285,7 +284,6 @@ function WorkspaceWorkflowsPage({policy, route}: WorkspaceWorkflowsPageProps) { !isOffline && policy?.isLoadingWorkspaceReimbursement === true ? ( ) : ( @@ -364,7 +362,6 @@ function WorkspaceWorkflowsPage({policy, route}: WorkspaceWorkflowsPageProps) { isSmartLimitEnabled, addApprovalAction, isOffline, - theme.spinner, isPolicyAdmin, displayNameForAuthorizedPayer, route.params.policyID,