Skip to content

Commit 754d35d

Browse files
mollfprmollfpr
authored
Merge pull request Expensify#75422 from samarroy84/fix/75248
[No QA] Migrate product illustrations to lazy loading
2 parents 4092be2 + c8905f0 commit 754d35d

38 files changed

Lines changed: 176 additions & 141 deletions

‎src/components/Attachments/AttachmentCarousel/AttachmentCarouselView/index.native.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import AttachmentCarouselPager from '@components/Attachments/AttachmentCarousel/
55
import type {AttachmentCarouselPagerHandle} from '@components/Attachments/AttachmentCarousel/Pager';
66
import type {AttachmentSource} from '@components/Attachments/types';
77
import BlockingView from '@components/BlockingViews/BlockingView';
8-
import * as Illustrations from '@components/Icon/Illustrations';
8+
import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
99
import useLocalize from '@hooks/useLocalize';
1010
import useThemeStyles from '@hooks/useThemeStyles';
1111
import {canUseTouchScreen as canUseTouchScreenUtil} from '@libs/DeviceCapabilities';
@@ -30,6 +30,7 @@ function AttachmentCarouselView({
3030
const {translate} = useLocalize();
3131
const canUseTouchScreen = canUseTouchScreenUtil();
3232
const styles = useThemeStyles();
33+
const illustrations = useMemoizedLazyIllustrations(['ToddBehindCloud'] as const);
3334
const [activeAttachmentID, setActiveAttachmentID] = useState<AttachmentSource>(attachmentID ?? source);
3435

3536
const pagerRef = useRef<AttachmentCarouselPagerHandle>(null);
@@ -80,7 +81,7 @@ function AttachmentCarouselView({
8081
>
8182
{page === -1 ? (
8283
<BlockingView
83-
icon={Illustrations.ToddBehindCloud}
84+
icon={illustrations.ToddBehindCloud}
8485
iconWidth={variables.modalTopIconWidth}
8586
iconHeight={variables.modalTopIconHeight}
8687
title={translate('notFound.notHere')}

‎src/components/Attachments/AttachmentCarousel/AttachmentCarouselView/index.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@ import type {UpdatePageProps} from '@components/Attachments/AttachmentCarousel/t
1313
import useCarouselContextEvents from '@components/Attachments/AttachmentCarousel/useCarouselContextEvents';
1414
import type {Attachment, AttachmentSource} from '@components/Attachments/types';
1515
import BlockingView from '@components/BlockingViews/BlockingView';
16-
import * as Illustrations from '@components/Icon/Illustrations';
1716
import {useFullScreenContext} from '@components/VideoPlayerContexts/FullScreenContext';
17+
import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
1818
import useLocalize from '@hooks/useLocalize';
1919
import useResponsiveLayout from '@hooks/useResponsiveLayout';
2020
import useThemeStyles from '@hooks/useThemeStyles';
@@ -62,6 +62,7 @@ function AttachmentCarouselView({
6262
}: AttachmentCarouselViewProps) {
6363
const {translate} = useLocalize();
6464
const styles = useThemeStyles();
65+
const illustrations = useMemoizedLazyIllustrations(['ToddBehindCloud'] as const);
6566
const canUseTouchScreen = canUseTouchScreenUtil();
6667
const {isFullScreenRef} = useFullScreenContext();
6768
const isPagerScrolling = useSharedValue(false);
@@ -239,7 +240,7 @@ function AttachmentCarouselView({
239240
>
240241
{page === -1 ? (
241242
<BlockingView
242-
icon={Illustrations.ToddBehindCloud}
243+
icon={illustrations.ToddBehindCloud}
243244
iconWidth={variables.modalTopIconWidth}
244245
iconHeight={variables.modalTopIconHeight}
245246
title={translate('notFound.notHere')}

‎src/components/AutoSubmitModal.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, {useCallback} from 'react';
22
import {InteractionManager, View} from 'react-native';
3+
import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
34
import useLocalize from '@hooks/useLocalize';
45
import useOnyx from '@hooks/useOnyx';
56
import useStyleUtils from '@hooks/useStyleUtils';
@@ -12,6 +13,7 @@ import type {TranslationPaths} from '@src/languages/types';
1213
import ONYXKEYS from '@src/ONYXKEYS';
1314
import FeatureTrainingModal from './FeatureTrainingModal';
1415
import Icon from './Icon';
16+
// eslint-disable-next-line no-restricted-imports
1517
import * as Illustrations from './Icon/Illustrations';
1618
import Text from './Text';
1719

@@ -33,6 +35,7 @@ function AutoSubmitModal() {
3335
const {translate} = useLocalize();
3436
const styles = useThemeStyles();
3537
const StyleUtils = useStyleUtils();
38+
const illustrations = useMemoizedLazyIllustrations(['ReceiptsStackedOnPin'] as const);
3639

3740
const onClose = useCallback((willShowAgain: boolean) => {
3841
// eslint-disable-next-line @typescript-eslint/no-deprecated
@@ -50,7 +53,7 @@ function AutoSubmitModal() {
5053
title={translate('autoSubmitModal.title')}
5154
description={translate('autoSubmitModal.description')}
5255
confirmText={translate('common.buttonConfirm')}
53-
image={Illustrations.ReceiptsStackedOnPin}
56+
image={illustrations.ReceiptsStackedOnPin}
5457
contentFitImage="cover"
5558
width={variables.holdEducationModalWidth}
5659
imageWidth={variables.changePolicyEducationModalIconWidth}

‎src/components/BlockingViews/FullPageErrorView.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import {View} from 'react-native';
33
import type {StyleProp, TextStyle} from 'react-native';
4-
import * as Illustrations from '@components/Icon/Illustrations';
4+
import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
55
import useThemeStyles from '@hooks/useThemeStyles';
66
import variables from '@styles/variables';
77
import BlockingView from './BlockingView';
@@ -33,6 +33,7 @@ type FullPageErrorViewProps = {
3333
// eslint-disable-next-line rulesdir/no-negated-variables
3434
function FullPageErrorView({testID, children = null, shouldShow = false, title = '', subtitle = '', shouldForceFullScreen = false, subtitleStyle}: FullPageErrorViewProps) {
3535
const styles = useThemeStyles();
36+
const illustrations = useMemoizedLazyIllustrations(['BrokenMagnifyingGlass'] as const);
3637

3738
if (shouldShow) {
3839
return (
@@ -42,7 +43,7 @@ function FullPageErrorView({testID, children = null, shouldShow = false, title =
4243
testID={testID}
4344
>
4445
<BlockingView
45-
icon={Illustrations.BrokenMagnifyingGlass}
46+
icon={illustrations.BrokenMagnifyingGlass}
4647
iconWidth={variables.errorPageIconWidth}
4748
iconHeight={variables.errorPageIconHeight}
4849
title={title}

‎src/components/BlockingViews/FullPageNotFoundView.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react';
22
import {View} from 'react-native';
33
import type {StyleProp, TextStyle} from 'react-native';
44
import HeaderWithBackButton from '@components/HeaderWithBackButton';
5-
import * as Illustrations from '@components/Icon/Illustrations';
5+
import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
66
import useLocalize from '@hooks/useLocalize';
77
import useResponsiveLayout from '@hooks/useResponsiveLayout';
88
import useThemeStyles from '@hooks/useThemeStyles';
@@ -85,6 +85,7 @@ function FullPageNotFoundView({
8585
const styles = useThemeStyles();
8686
const {isMediumScreenWidth, isLargeScreenWidth} = useResponsiveLayout();
8787
const {translate} = useLocalize();
88+
const illustrations = useMemoizedLazyIllustrations(['ToddBehindCloud'] as const);
8889

8990
if (shouldShow) {
9091
StatsCounter('FullPageNotFoundView');
@@ -100,7 +101,7 @@ function FullPageNotFoundView({
100101
testID={testID}
101102
>
102103
<BlockingView
103-
icon={Illustrations.ToddBehindCloud}
104+
icon={illustrations.ToddBehindCloud}
104105
iconWidth={variables.modalTopIconWidth}
105106
iconHeight={variables.modalTopIconHeight}
106107
title={translate(titleKey)}

‎src/components/BookTravelButton.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import type {ReactElement} from 'react';
44
import React, {useCallback, useEffect, useState} from 'react';
55
import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
66
import useEnvironment from '@hooks/useEnvironment';
7+
import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
78
import useLocalize from '@hooks/useLocalize';
89
import useOnyx from '@hooks/useOnyx';
910
import usePermissions from '@hooks/usePermissions';
@@ -23,7 +24,6 @@ import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue';
2324
import Button from './Button';
2425
import ConfirmModal from './ConfirmModal';
2526
import DotIndicatorMessage from './DotIndicatorMessage';
26-
import {RocketDude} from './Icon/Illustrations';
2727
import RenderHTML from './RenderHTML';
2828

2929
type BookTravelButtonProps = {
@@ -49,6 +49,7 @@ const navigateToAcceptTerms = (domain: string, isUserValidated?: boolean) => {
4949
function BookTravelButton({text, shouldRenderErrorMessageBelowButton = false, setShouldScrollToBottom}: BookTravelButtonProps) {
5050
const styles = useThemeStyles();
5151
const StyleUtils = useStyleUtils();
52+
const illustrations = useMemoizedLazyIllustrations(['RocketDude'] as const);
5253
const {translate} = useLocalize();
5354
const {environmentURL} = useEnvironment();
5455
const phoneErrorMethodsRoute = `${environmentURL}/${ROUTES.SETTINGS_CONTACT_METHODS.getRoute(Navigation.getActiveRoute())}`;
@@ -189,7 +190,7 @@ function BookTravelButton({text, shouldRenderErrorMessageBelowButton = false, se
189190
titleContainerStyles={styles.mb2}
190191
onConfirm={hidePreventionModal}
191192
onCancel={hidePreventionModal}
192-
image={RocketDude}
193+
image={illustrations.RocketDude}
193194
imageStyles={StyleUtils.getBackgroundColorStyle(colors.ice600)}
194195
isVisible={isPreventionModalVisible}
195196
prompt={translate('travel.blockedFeatureModal.message')}
@@ -203,7 +204,7 @@ function BookTravelButton({text, shouldRenderErrorMessageBelowButton = false, se
203204
titleContainerStyles={styles.mb2}
204205
onConfirm={hideVerificationModal}
205206
onCancel={hideVerificationModal}
206-
image={RocketDude}
207+
image={illustrations.RocketDude}
207208
imageStyles={StyleUtils.getBackgroundColorStyle(colors.ice600)}
208209
isVisible={isVerificationModalVisible}
209210
prompt={translate('travel.verifyCompany.message')}

‎src/components/ContactPermissionModal/index.native.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, {useEffect, useState} from 'react';
22
import {InteractionManager} from 'react-native';
33
import {RESULTS} from 'react-native-permissions';
44
import ConfirmModal from '@components/ConfirmModal';
5-
import * as Illustrations from '@components/Icon/Illustrations';
5+
import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
66
import useLocalize from '@hooks/useLocalize';
77
import useOnyx from '@hooks/useOnyx';
88
import useThemeStyles from '@hooks/useThemeStyles';
@@ -17,6 +17,7 @@ function ContactPermissionModal({onDeny, onGrant, onFocusTextInput}: ContactPerm
1717

1818
const styles = useThemeStyles();
1919
const {translate} = useLocalize();
20+
const illustrations = useMemoizedLazyIllustrations(['ToddWithPhones'] as const);
2021

2122
useEffect(() => {
2223
if (hasDeniedContactImportPrompt) {
@@ -77,7 +78,7 @@ function ContactPermissionModal({onDeny, onGrant, onFocusTextInput}: ContactPerm
7778
title={translate('contact.importContactsTitle')}
7879
titleContainerStyles={[styles.mt2, styles.mb0]}
7980
titleStyles={[styles.textHeadline]}
80-
iconSource={Illustrations.ToddWithPhones}
81+
iconSource={illustrations.ToddWithPhones}
8182
iconFill={false}
8283
iconWidth={176}
8384
iconHeight={178}

‎src/components/DeeplinkWrapper/DeeplinkRedirectLoadingIndicator.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,11 @@ import {emailSelector} from '@selectors/Session';
22
import React from 'react';
33
import {View} from 'react-native';
44
import Icon from '@components/Icon';
5+
// eslint-disable-next-line no-restricted-imports
56
import * as Expensicons from '@components/Icon/Expensicons';
6-
import * as Illustrations from '@components/Icon/Illustrations';
77
import Text from '@components/Text';
88
import TextLink from '@components/TextLink';
9+
import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
910
import useLocalize from '@hooks/useLocalize';
1011
import useOnyx from '@hooks/useOnyx';
1112
import useTheme from '@hooks/useTheme';
@@ -22,6 +23,7 @@ function DeeplinkRedirectLoadingIndicator({openLinkInBrowser}: DeeplinkRedirectL
2223
const {translate} = useLocalize();
2324
const theme = useTheme();
2425
const styles = useThemeStyles();
26+
const illustrations = useMemoizedLazyIllustrations(['RocketBlue'] as const);
2527
const [currentUserLogin] = useOnyx(ONYXKEYS.SESSION, {selector: emailSelector, canBeMissing: true});
2628
return (
2729
<View style={styles.deeplinkWrapperContainer}>
@@ -30,7 +32,7 @@ function DeeplinkRedirectLoadingIndicator({openLinkInBrowser}: DeeplinkRedirectL
3032
<Icon
3133
width={200}
3234
height={164}
33-
src={Illustrations.RocketBlue}
35+
src={illustrations.RocketBlue}
3436
/>
3537
</View>
3638
<Text style={[styles.textHeadline, styles.textXXLarge]}>{translate('deeplinkWrapper.launching')}</Text>

‎src/components/EmptySelectionListContent.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import React from 'react';
22
import {View} from 'react-native';
33
import type {TupleToUnion} from 'type-fest';
4+
import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
45
import useLocalize from '@hooks/useLocalize';
56
import useThemeStyles from '@hooks/useThemeStyles';
67
import variables from '@styles/variables';
78
import CONST from '@src/CONST';
89
import BlockingView from './BlockingViews/BlockingView';
9-
import * as Illustrations from './Icon/Illustrations';
1010
import ScrollView from './ScrollView';
1111
import Text from './Text';
1212

@@ -24,6 +24,7 @@ function isContentType(contentType: unknown): contentType is ContentType {
2424

2525
function EmptySelectionListContent({contentType}: EmptySelectionListContentProps) {
2626
const styles = useThemeStyles();
27+
const illustrations = useMemoizedLazyIllustrations(['ToddWithPhones'] as const);
2728
const {translate} = useLocalize();
2829

2930
if (!isContentType(contentType)) {
@@ -36,7 +37,7 @@ function EmptySelectionListContent({contentType}: EmptySelectionListContentProps
3637
<ScrollView contentContainerStyle={[styles.flexGrow1]}>
3738
<View style={[styles.flex1, styles.overflowHidden, styles.minHeight65]}>
3839
<BlockingView
39-
icon={Illustrations.ToddWithPhones}
40+
icon={illustrations.ToddWithPhones}
4041
iconWidth={variables.emptySelectionListIconWidth}
4142
iconHeight={variables.emptySelectionListIconHeight}
4243
title={translate(`emptyList.${translationKeyContentType}.title`)}

‎src/components/FocusModeNotification.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import React from 'react';
22
import {View} from 'react-native';
33
import useEnvironment from '@hooks/useEnvironment';
4+
import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
45
import useLocalize from '@hooks/useLocalize';
56
import useStyleUtils from '@hooks/useStyleUtils';
67
import useThemeStyles from '@hooks/useThemeStyles';
78
import colors from '@styles/theme/colors';
89
import ConfirmModal from './ConfirmModal';
9-
import {ThreeLeggedLaptopWoman} from './Icon/Illustrations';
1010
import RenderHTML from './RenderHTML';
1111

1212
type FocusModeNotificationProps = {
@@ -16,6 +16,7 @@ type FocusModeNotificationProps = {
1616
function FocusModeNotification({onClose}: FocusModeNotificationProps) {
1717
const styles = useThemeStyles();
1818
const StyleUtils = useStyleUtils();
19+
const illustrations = useMemoizedLazyIllustrations(['ThreeLeggedLaptopWoman'] as const);
1920
const {environmentURL} = useEnvironment();
2021
const {translate} = useLocalize();
2122
const priorityModePageUrl = `${environmentURL}/settings/preferences/priority-mode`;
@@ -34,7 +35,7 @@ function FocusModeNotification({onClose}: FocusModeNotificationProps) {
3435
</View>
3536
}
3637
isVisible
37-
image={ThreeLeggedLaptopWoman}
38+
image={illustrations.ThreeLeggedLaptopWoman}
3839
imageStyles={StyleUtils.getBackgroundColorStyle(colors.pink800)}
3940
titleStyles={[styles.textHeadline, styles.mbn3]}
4041
/>

0 commit comments

Comments
 (0)