[No QA] Migrate product illustrations to lazy loading

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

@@ -5,7 +5,7 @@ import AttachmentCarouselPager from '@components/Attachments/AttachmentCarousel/
 import type {AttachmentCarouselPagerHandle} from '@components/Attachments/AttachmentCarousel/Pager';
 import type {AttachmentSource} from '@components/Attachments/types';
 import BlockingView from '@components/BlockingViews/BlockingView';
-import * as Illustrations from '@components/Icon/Illustrations';
+import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {canUseTouchScreen as canUseTouchScreenUtil} from '@libs/DeviceCapabilities';
@@ -30,6 +30,7 @@ function AttachmentCarouselView({
     const {translate} = useLocalize();
     const canUseTouchScreen = canUseTouchScreenUtil();
     const styles = useThemeStyles();
+    const illustrations = useMemoizedLazyIllustrations(['ToddBehindCloud'] as const);
     const [activeAttachmentID, setActiveAttachmentID] = useState<AttachmentSource>(attachmentID ?? source);
 
     const pagerRef = useRef<AttachmentCarouselPagerHandle>(null);
@@ -80,7 +81,7 @@ function AttachmentCarouselView({
         >
             {page === -1 ? (
                 <BlockingView
-                    icon={Illustrations.ToddBehindCloud}
+                    icon={illustrations.ToddBehindCloud}
                     iconWidth={variables.modalTopIconWidth}
                     iconHeight={variables.modalTopIconHeight}
                     title={translate('notFound.notHere')}

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

@@ -13,8 +13,8 @@ import type {UpdatePageProps} from '@components/Attachments/AttachmentCarousel/t
 import useCarouselContextEvents from '@components/Attachments/AttachmentCarousel/useCarouselContextEvents';
 import type {Attachment, AttachmentSource} from '@components/Attachments/types';
 import BlockingView from '@components/BlockingViews/BlockingView';
-import * as Illustrations from '@components/Icon/Illustrations';
 import {useFullScreenContext} from '@components/VideoPlayerContexts/FullScreenContext';
+import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -62,6 +62,7 @@ function AttachmentCarouselView({
 }: AttachmentCarouselViewProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
+    const illustrations = useMemoizedLazyIllustrations(['ToddBehindCloud'] as const);
     const canUseTouchScreen = canUseTouchScreenUtil();
     const {isFullScreenRef} = useFullScreenContext();
     const isPagerScrolling = useSharedValue(false);
@@ -239,7 +240,7 @@ function AttachmentCarouselView({
         >
             {page === -1 ? (
                 <BlockingView
-                    icon={Illustrations.ToddBehindCloud}
+                    icon={illustrations.ToddBehindCloud}
                     iconWidth={variables.modalTopIconWidth}
                     iconHeight={variables.modalTopIconHeight}
                     title={translate('notFound.notHere')}

src/components/AutoSubmitModal.tsx

@@ -1,5 +1,6 @@
 import React, {useCallback} from 'react';
 import {InteractionManager, View} from 'react-native';
+import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
 import useStyleUtils from '@hooks/useStyleUtils';
@@ -12,6 +13,7 @@ import type {TranslationPaths} from '@src/languages/types';
 import ONYXKEYS from '@src/ONYXKEYS';
 import FeatureTrainingModal from './FeatureTrainingModal';
 import Icon from './Icon';
+// eslint-disable-next-line no-restricted-imports
 import * as Illustrations from './Icon/Illustrations';
 import Text from './Text';
 
@@ -33,6 +35,7 @@ function AutoSubmitModal() {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
+    const illustrations = useMemoizedLazyIllustrations(['ReceiptsStackedOnPin'] as const);
 
     const onClose = useCallback((willShowAgain: boolean) => {
         // eslint-disable-next-line @typescript-eslint/no-deprecated
@@ -50,7 +53,7 @@ function AutoSubmitModal() {
             title={translate('autoSubmitModal.title')}
             description={translate('autoSubmitModal.description')}
             confirmText={translate('common.buttonConfirm')}
-            image={Illustrations.ReceiptsStackedOnPin}
+            image={illustrations.ReceiptsStackedOnPin}
             contentFitImage="cover"
             width={variables.holdEducationModalWidth}
             imageWidth={variables.changePolicyEducationModalIconWidth}

src/components/BlockingViews/FullPageErrorView.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {View} from 'react-native';
 import type {StyleProp, TextStyle} from 'react-native';
-import * as Illustrations from '@components/Icon/Illustrations';
+import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
 import useThemeStyles from '@hooks/useThemeStyles';
 import variables from '@styles/variables';
 import BlockingView from './BlockingView';
@@ -33,6 +33,7 @@ type FullPageErrorViewProps = {
 // eslint-disable-next-line rulesdir/no-negated-variables
 function FullPageErrorView({testID, children = null, shouldShow = false, title = '', subtitle = '', shouldForceFullScreen = false, subtitleStyle}: FullPageErrorViewProps) {
     const styles = useThemeStyles();
+    const illustrations = useMemoizedLazyIllustrations(['BrokenMagnifyingGlass'] as const);
 
     if (shouldShow) {
         return (
@@ -42,7 +43,7 @@ function FullPageErrorView({testID, children = null, shouldShow = false, title =
                     testID={testID}
                 >
                     <BlockingView
-                        icon={Illustrations.BrokenMagnifyingGlass}
+                        icon={illustrations.BrokenMagnifyingGlass}
                         iconWidth={variables.errorPageIconWidth}
                         iconHeight={variables.errorPageIconHeight}
                         title={title}

src/components/BlockingViews/FullPageNotFoundView.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import {View} from 'react-native';
 import type {StyleProp, TextStyle} from 'react-native';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
-import * as Illustrations from '@components/Icon/Illustrations';
+import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -85,6 +85,7 @@ function FullPageNotFoundView({
     const styles = useThemeStyles();
     const {isMediumScreenWidth, isLargeScreenWidth} = useResponsiveLayout();
     const {translate} = useLocalize();
+    const illustrations = useMemoizedLazyIllustrations(['ToddBehindCloud'] as const);
 
     if (shouldShow) {
         StatsCounter('FullPageNotFoundView');
@@ -100,7 +101,7 @@ function FullPageNotFoundView({
                     testID={testID}
                 >
                     <BlockingView
-                        icon={Illustrations.ToddBehindCloud}
+                        icon={illustrations.ToddBehindCloud}
                         iconWidth={variables.modalTopIconWidth}
                         iconHeight={variables.modalTopIconHeight}
                         title={translate(titleKey)}

src/components/BookTravelButton.tsx

@@ -4,6 +4,7 @@ import type {ReactElement} from 'react';
 import React, {useCallback, useEffect, useState} from 'react';
 import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
 import useEnvironment from '@hooks/useEnvironment';
+import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
 import usePermissions from '@hooks/usePermissions';
@@ -23,7 +24,6 @@ import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue';
 import Button from './Button';
 import ConfirmModal from './ConfirmModal';
 import DotIndicatorMessage from './DotIndicatorMessage';
-import {RocketDude} from './Icon/Illustrations';
 import RenderHTML from './RenderHTML';
 
 type BookTravelButtonProps = {
@@ -49,6 +49,7 @@ const navigateToAcceptTerms = (domain: string, isUserValidated?: boolean) => {
 function BookTravelButton({text, shouldRenderErrorMessageBelowButton = false, setShouldScrollToBottom}: BookTravelButtonProps) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
+    const illustrations = useMemoizedLazyIllustrations(['RocketDude'] as const);
     const {translate} = useLocalize();
     const {environmentURL} = useEnvironment();
     const phoneErrorMethodsRoute = `${environmentURL}/${ROUTES.SETTINGS_CONTACT_METHODS.getRoute(Navigation.getActiveRoute())}`;
@@ -189,7 +190,7 @@ function BookTravelButton({text, shouldRenderErrorMessageBelowButton = false, se
                 titleContainerStyles={styles.mb2}
                 onConfirm={hidePreventionModal}
                 onCancel={hidePreventionModal}
-                image={RocketDude}
+                image={illustrations.RocketDude}
                 imageStyles={StyleUtils.getBackgroundColorStyle(colors.ice600)}
                 isVisible={isPreventionModalVisible}
                 prompt={translate('travel.blockedFeatureModal.message')}
@@ -203,7 +204,7 @@ function BookTravelButton({text, shouldRenderErrorMessageBelowButton = false, se
                 titleContainerStyles={styles.mb2}
                 onConfirm={hideVerificationModal}
                 onCancel={hideVerificationModal}
-                image={RocketDude}
+                image={illustrations.RocketDude}
                 imageStyles={StyleUtils.getBackgroundColorStyle(colors.ice600)}
                 isVisible={isVerificationModalVisible}
                 prompt={translate('travel.verifyCompany.message')}

src/components/ContactPermissionModal/index.native.tsx

@@ -2,7 +2,7 @@ import React, {useEffect, useState} from 'react';
 import {InteractionManager} from 'react-native';
 import {RESULTS} from 'react-native-permissions';
 import ConfirmModal from '@components/ConfirmModal';
-import * as Illustrations from '@components/Icon/Illustrations';
+import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -17,6 +17,7 @@ function ContactPermissionModal({onDeny, onGrant, onFocusTextInput}: ContactPerm
 
     const styles = useThemeStyles();
     const {translate} = useLocalize();
+    const illustrations = useMemoizedLazyIllustrations(['ToddWithPhones'] as const);
 
     useEffect(() => {
         if (hasDeniedContactImportPrompt) {
@@ -77,7 +78,7 @@ function ContactPermissionModal({onDeny, onGrant, onFocusTextInput}: ContactPerm
             title={translate('contact.importContactsTitle')}
             titleContainerStyles={[styles.mt2, styles.mb0]}
             titleStyles={[styles.textHeadline]}
-            iconSource={Illustrations.ToddWithPhones}
+            iconSource={illustrations.ToddWithPhones}
             iconFill={false}
             iconWidth={176}
             iconHeight={178}

src/components/DeeplinkWrapper/DeeplinkRedirectLoadingIndicator.tsx

@@ -2,10 +2,11 @@ import {emailSelector} from '@selectors/Session';
 import React from 'react';
 import {View} from 'react-native';
 import Icon from '@components/Icon';
+// eslint-disable-next-line no-restricted-imports
 import * as Expensicons from '@components/Icon/Expensicons';
-import * as Illustrations from '@components/Icon/Illustrations';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
+import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
 import useTheme from '@hooks/useTheme';
@@ -22,6 +23,7 @@ function DeeplinkRedirectLoadingIndicator({openLinkInBrowser}: DeeplinkRedirectL
     const {translate} = useLocalize();
     const theme = useTheme();
     const styles = useThemeStyles();
+    const illustrations = useMemoizedLazyIllustrations(['RocketBlue'] as const);
     const [currentUserLogin] = useOnyx(ONYXKEYS.SESSION, {selector: emailSelector, canBeMissing: true});
     return (
         <View style={styles.deeplinkWrapperContainer}>
@@ -30,7 +32,7 @@ function DeeplinkRedirectLoadingIndicator({openLinkInBrowser}: DeeplinkRedirectL
                     <Icon
                         width={200}
                         height={164}
-                        src={Illustrations.RocketBlue}
+                        src={illustrations.RocketBlue}
                     />
                 </View>
                 <Text style={[styles.textHeadline, styles.textXXLarge]}>{translate('deeplinkWrapper.launching')}</Text>

src/components/EmptySelectionListContent.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import {View} from 'react-native';
 import type {TupleToUnion} from 'type-fest';
+import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import BlockingView from './BlockingViews/BlockingView';
-import * as Illustrations from './Icon/Illustrations';
 import ScrollView from './ScrollView';
 import Text from './Text';
 
@@ -24,6 +24,7 @@ function isContentType(contentType: unknown): contentType is ContentType {
 
 function EmptySelectionListContent({contentType}: EmptySelectionListContentProps) {
     const styles = useThemeStyles();
+    const illustrations = useMemoizedLazyIllustrations(['ToddWithPhones'] as const);
     const {translate} = useLocalize();
 
     if (!isContentType(contentType)) {
@@ -36,7 +37,7 @@ function EmptySelectionListContent({contentType}: EmptySelectionListContentProps
         <ScrollView contentContainerStyle={[styles.flexGrow1]}>
             <View style={[styles.flex1, styles.overflowHidden, styles.minHeight65]}>
                 <BlockingView
-                    icon={Illustrations.ToddWithPhones}
+                    icon={illustrations.ToddWithPhones}
                     iconWidth={variables.emptySelectionListIconWidth}
                     iconHeight={variables.emptySelectionListIconHeight}
                     title={translate(`emptyList.${translationKeyContentType}.title`)}

src/components/FocusModeNotification.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import {View} from 'react-native';
 import useEnvironment from '@hooks/useEnvironment';
+import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
 import colors from '@styles/theme/colors';
 import ConfirmModal from './ConfirmModal';
-import {ThreeLeggedLaptopWoman} from './Icon/Illustrations';
 import RenderHTML from './RenderHTML';
 
 type FocusModeNotificationProps = {
@@ -16,6 +16,7 @@ type FocusModeNotificationProps = {
 function FocusModeNotification({onClose}: FocusModeNotificationProps) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
+    const illustrations = useMemoizedLazyIllustrations(['ThreeLeggedLaptopWoman'] as const);
     const {environmentURL} = useEnvironment();
     const {translate} = useLocalize();
     const priorityModePageUrl = `${environmentURL}/settings/preferences/priority-mode`;
@@ -34,7 +35,7 @@ function FocusModeNotification({onClose}: FocusModeNotificationProps) {
                 </View>
             }
             isVisible
-            image={ThreeLeggedLaptopWoman}
+            image={illustrations.ThreeLeggedLaptopWoman}
             imageStyles={StyleUtils.getBackgroundColorStyle(colors.pink800)}
             titleStyles={[styles.textHeadline, styles.mbn3]}
         />

src/components/HoldSubmitterEducationalModal.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import useBeforeRemove from '@hooks/useBeforeRemove';
+import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import FeatureTrainingModal from './FeatureTrainingModal';
 import HoldMenuSectionList from './HoldMenuSectionList';
-import * as Illustrations from './Icon/Illustrations';
 
 type HoldSubmitterEducationalModalProps = {
     /** Method to trigger when pressing outside of the popover menu to close it */
@@ -19,6 +19,7 @@ type HoldSubmitterEducationalModalProps = {
 function HoldSubmitterEducationalModal({onClose, onConfirm}: HoldSubmitterEducationalModalProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
+    const illustrations = useMemoizedLazyIllustrations(['HoldExpense'] as const);
 
     useBeforeRemove(onClose);
 
@@ -27,7 +28,7 @@ function HoldSubmitterEducationalModal({onClose, onConfirm}: HoldSubmitterEducat
             title={translate('iou.holdEducationalTitle')}
             description={translate('iou.whatIsHoldExplain')}
             confirmText={translate('common.buttonConfirm')}
-            image={Illustrations.HoldExpense}
+            image={illustrations.HoldExpense}
             contentFitImage="cover"
             width={variables.holdEducationModalWidth}
             illustrationAspectRatio={CONST.ILLUSTRATION_ASPECT_RATIO}