[NoQA] migration: move simple illustrations to lazy loading

src/components/AutoSubmitModal.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback} from 'react';
+import React, {useCallback, useMemo} from 'react';
 import {InteractionManager, View} from 'react-native';
 import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
@@ -14,28 +14,29 @@ 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';
 
-const menuSections = [
-    {
-        icon: Illustrations.PaperAirplane,
-        titleTranslationKey: 'autoSubmitModal.submittedExpensesTitle',
-        descriptionTranslationKey: 'autoSubmitModal.submittedExpensesDescription',
-    },
-    {
-        icon: Illustrations.Pencil,
-        titleTranslationKey: 'autoSubmitModal.pendingExpensesTitle',
-        descriptionTranslationKey: 'autoSubmitModal.pendingExpensesDescription',
-    },
-];
-
 function AutoSubmitModal() {
     const [dismissedASAPSubmitExplanation] = useOnyx(ONYXKEYS.NVP_DISMISSED_ASAP_SUBMIT_EXPLANATION, {canBeMissing: true});
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
-    const illustrations = useMemoizedLazyIllustrations(['ReceiptsStackedOnPin'] as const);
+    const illustrations = useMemoizedLazyIllustrations(['PaperAirplane', 'Pencil', 'ReceiptsStackedOnPin'] as const);
+    const menuSections = useMemo(
+        () => [
+            {
+                icon: illustrations.PaperAirplane,
+                titleTranslationKey: 'autoSubmitModal.submittedExpensesTitle',
+                descriptionTranslationKey: 'autoSubmitModal.submittedExpensesDescription',
+            },
+            {
+                icon: illustrations.Pencil,
+                titleTranslationKey: 'autoSubmitModal.pendingExpensesTitle',
+                descriptionTranslationKey: 'autoSubmitModal.pendingExpensesDescription',
+            },
+        ],
+        [illustrations.PaperAirplane, illustrations.Pencil],
+    );
 
     const onClose = useCallback((willShowAgain: boolean) => {
         // eslint-disable-next-line @typescript-eslint/no-deprecated

src/components/HoldMenuSectionList.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import {View} from 'react-native';
+import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import variables from '@styles/variables';
 import type {TranslationPaths} from '@src/languages/types';
 import type IconAsset from '@src/types/utils/IconAsset';
 import Icon from './Icon';
-import * as Illustrations from './Icon/Illustrations';
 import Text from './Text';
 
 type HoldMenuSection = {
@@ -17,20 +17,20 @@ type HoldMenuSection = {
     titleTranslationKey: TranslationPaths;
 };
 
-const holdMenuSections: HoldMenuSection[] = [
-    {
-        icon: Illustrations.Stopwatch,
-        titleTranslationKey: 'iou.holdIsLeftBehind',
-    },
-    {
-        icon: Illustrations.RealtimeReport,
-        titleTranslationKey: 'iou.unholdWhenReady',
-    },
-];
-
 function HoldMenuSectionList() {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
+    const illustrations = useMemoizedLazyIllustrations(['RealtimeReport', 'Stopwatch'] as const);
+    const holdMenuSections: HoldMenuSection[] = [
+        {
+            icon: illustrations.Stopwatch,
+            titleTranslationKey: 'iou.holdIsLeftBehind',
+        },
+        {
+            icon: illustrations.RealtimeReport,
+            titleTranslationKey: 'iou.unholdWhenReady',
+        },
+    ];
 
     return (
         <>

src/components/HoldOrRejectEducationalModal.tsx

@@ -31,7 +31,7 @@ type HoldOrRejectEducationalModalProps = {
 function HoldOrRejectEducationalModal({onClose, onConfirm}: HoldOrRejectEducationalModalProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
-    const illustrations = useMemoizedLazyIllustrations(['Stopwatch', 'Rules', 'RealtimeReport', 'ThumbsDown', 'ModalHoldOrReject']);
+    const illustrations = useMemoizedLazyIllustrations(['Stopwatch', 'Rules', 'RealtimeReport', 'ThumbsDown', 'ModalHoldOrReject'] as const);
 
     useBeforeRemove(onClose);
 

src/components/Icon/Illustrations.ts

@@ -61,32 +61,8 @@ import LockClosedOrange from '@assets/images/simple-illustrations/simple-illustr
 import LockOpen from '@assets/images/simple-illustrations/simple-illustration__lockopen.svg';
 import Luggage from '@assets/images/simple-illustrations/simple-illustration__luggage.svg';
 import Mailbox from '@assets/images/simple-illustrations/simple-illustration__mailbox.svg';
-import ExpensifyMobileApp from '@assets/images/simple-illustrations/simple-illustration__mobileapp.svg';
-import MoneyIntoWallet from '@assets/images/simple-illustrations/simple-illustration__moneyintowallet.svg';
 import OpenSafe from '@assets/images/simple-illustrations/simple-illustration__opensafe.svg';
-import PalmTree from '@assets/images/simple-illustrations/simple-illustration__palmtree.svg';
-import PaperAirplane from '@assets/images/simple-illustrations/simple-illustration__paperairplane.svg';
 import Pencil from '@assets/images/simple-illustrations/simple-illustration__pencil.svg';
-import PiggyBank from '@assets/images/simple-illustrations/simple-illustration__piggybank.svg';
-import Pillow from '@assets/images/simple-illustrations/simple-illustration__pillow.svg';
-import Profile from '@assets/images/simple-illustrations/simple-illustration__profile.svg';
-import QRCode from '@assets/images/simple-illustrations/simple-illustration__qr-code.svg';
-import RealtimeReport from '@assets/images/simple-illustrations/simple-illustration__realtimereports.svg';
-import ReceiptLocationMarker from '@assets/images/simple-illustrations/simple-illustration__receipt-location-marker.svg';
-import ReceiptPartners from '@assets/images/simple-illustrations/simple-illustration__receipt.svg';
-import ReceiptUpload from '@assets/images/simple-illustrations/simple-illustration__receiptupload.svg';
-import SendMoney from '@assets/images/simple-illustrations/simple-illustration__sendmoney.svg';
-import ShieldYellow from '@assets/images/simple-illustrations/simple-illustration__shield.svg';
-import SplitBill from '@assets/images/simple-illustrations/simple-illustration__splitbill.svg';
-import Stopwatch from '@assets/images/simple-illustrations/simple-illustration__stopwatch.svg';
-import SubscriptionAnnual from '@assets/images/simple-illustrations/simple-illustration__subscription-annual.svg';
-import SubscriptionPPU from '@assets/images/simple-illustrations/simple-illustration__subscription-ppu.svg';
-import TeachersUnite from '@assets/images/simple-illustrations/simple-illustration__teachers-unite.svg';
-import ThumbsDown from '@assets/images/simple-illustrations/simple-illustration__thumbsdown.svg';
-import ThumbsUpStars from '@assets/images/simple-illustrations/simple-illustration__thumbsupstars.svg';
-import Tire from '@assets/images/simple-illustrations/simple-illustration__tire.svg';
-import TrashCan from '@assets/images/simple-illustrations/simple-illustration__trashcan.svg';
-import VirtualCard from '@assets/images/simple-illustrations/simple-illustration__virtualcard.svg';
 import ExpensifyApprovedLogo from '@assets/images/subscription-details__approvedlogo.svg';
 import TurtleInShell from '@assets/images/turtle-in-shell.svg';
 
@@ -100,54 +76,34 @@ export {
     EnvelopeReceipt,
     ExpensifyCardImage,
     Mailbox,
-    ShieldYellow,
     CreditCardsNewGreen,
     LaptopWithSecondScreenAndHourglass,
     LaptopWithSecondScreenSync,
     LaptopWithSecondScreenX,
     LockOpen,
     Luggage,
-    MoneyIntoWallet,
     ConciergeBubble,
-    ThumbsUpStars,
     HeadSet,
     Hourglass,
     CommentBubbles,
-    TrashCan,
-    Profile,
     Puzzle,
-    PalmTree,
     LockClosed,
     Gears,
-    QRCode,
-    RealtimeReport,
     Approval,
     PendingBank,
     House,
     Buildings,
     Alert,
-    TeachersUnite,
     Abacus,
     Binoculars,
-    ReceiptUpload,
-    SplitBill,
-    PiggyBank,
-    Pillow,
     Car,
     Pencil,
     CarIce,
-    ReceiptLocationMarker,
     Lightbulb,
-    Stopwatch,
-    SubscriptionAnnual,
-    SubscriptionPPU,
     ExpensifyApprovedLogo,
-    SendMoney,
     CheckmarkCircle,
     CreditCardEyes,
     LockClosedOrange,
-    VirtualCard,
-    Tire,
     Filters,
     CompanyCardsPendingState,
     VisaCompanyCardDetail,
@@ -168,16 +124,12 @@ export {
     ChaseCompanyCardDetailLarge,
     CitibankCompanyCardDetailLarge,
     MasterCardCompanyCardDetailLarge,
-    ReceiptPartners,
     StripeCompanyCardDetailLarge,
     VisaCompanyCardDetailLarge,
     WellsFargoCompanyCardDetailLarge,
     Flash,
-    ExpensifyMobileApp,
-    ThumbsDown,
     PlaidCompanyCardDetailLarge,
     PlaidCompanyCardDetail,
-    PaperAirplane,
     EmptyShelves,
     BlueShield,
     OpenSafe,

src/components/Icon/chunks/illustrations.chunk.ts

@@ -86,20 +86,39 @@ import LockOpen from '@assets/images/simple-illustrations/simple-illustration__l
 import Luggage from '@assets/images/simple-illustrations/simple-illustration__luggage.svg';
 import MagnifyingGlassMoney from '@assets/images/simple-illustrations/simple-illustration__magnifyingglass-money.svg';
 import Mailbox from '@assets/images/simple-illustrations/simple-illustration__mailbox.svg';
+import ExpensifyMobileApp from '@assets/images/simple-illustrations/simple-illustration__mobileapp.svg';
 import MoneyReceipts from '@assets/images/simple-illustrations/simple-illustration__money-receipts.svg';
+import MoneyIntoWallet from '@assets/images/simple-illustrations/simple-illustration__moneyintowallet.svg';
 import MoneyWings from '@assets/images/simple-illustrations/simple-illustration__moneywings.svg';
+import PalmTree from '@assets/images/simple-illustrations/simple-illustration__palmtree.svg';
+import PaperAirplane from '@assets/images/simple-illustrations/simple-illustration__paperairplane.svg';
 import Pencil from '@assets/images/simple-illustrations/simple-illustration__pencil.svg';
 import PerDiem from '@assets/images/simple-illustrations/simple-illustration__perdiem.svg';
+import PiggyBank from '@assets/images/simple-illustrations/simple-illustration__piggybank.svg';
+import Pillow from '@assets/images/simple-illustrations/simple-illustration__pillow.svg';
+import Profile from '@assets/images/simple-illustrations/simple-illustration__profile.svg';
+import QRCode from '@assets/images/simple-illustrations/simple-illustration__qr-code.svg';
 import RealtimeReport from '@assets/images/simple-illustrations/simple-illustration__realtimereports.svg';
+import ReceiptLocationMarker from '@assets/images/simple-illustrations/simple-illustration__receipt-location-marker.svg';
 import ReceiptWrangler from '@assets/images/simple-illustrations/simple-illustration__receipt-wrangler.svg';
+import ReceiptPartners from '@assets/images/simple-illustrations/simple-illustration__receipt.svg';
 import ReportReceipt from '@assets/images/simple-illustrations/simple-illustration__report-receipt.svg';
 import Rules from '@assets/images/simple-illustrations/simple-illustration__rules.svg';
+import SendMoney from '@assets/images/simple-illustrations/simple-illustration__sendmoney.svg';
 import ShieldYellow from '@assets/images/simple-illustrations/simple-illustration__shield.svg';
+import SplitBill from '@assets/images/simple-illustrations/simple-illustration__splitbill.svg';
 import Stopwatch from '@assets/images/simple-illustrations/simple-illustration__stopwatch.svg';
+import SubscriptionAnnual from '@assets/images/simple-illustrations/simple-illustration__subscription-annual.svg';
+import SubscriptionPPU from '@assets/images/simple-illustrations/simple-illustration__subscription-ppu.svg';
 import Tag from '@assets/images/simple-illustrations/simple-illustration__tag.svg';
+import TeachersUnite from '@assets/images/simple-illustrations/simple-illustration__teachers-unite.svg';
 import ThumbsDown from '@assets/images/simple-illustrations/simple-illustration__thumbsdown.svg';
+import ThumbsUpStars from '@assets/images/simple-illustrations/simple-illustration__thumbsupstars.svg';
+import Tire from '@assets/images/simple-illustrations/simple-illustration__tire.svg';
+import TrashCan from '@assets/images/simple-illustrations/simple-illustration__trashcan.svg';
 import TreasureChest from '@assets/images/simple-illustrations/simple-illustration__treasurechest.svg';
 import CompanyCard from '@assets/images/simple-illustrations/simple-illustration__twocards-horizontal.svg';
+import VirtualCard from '@assets/images/simple-illustrations/simple-illustration__virtualcard.svg';
 import Workflows from '@assets/images/simple-illustrations/simple-illustration__workflows.svg';
 import ExpensifyApprovedLogo from '@assets/images/subscription-details__approvedlogo.svg';
 import TurtleInShell from '@assets/images/turtle-in-shell.svg';
@@ -180,6 +199,25 @@ const Illustrations = {
     CompanyCard,
     ThumbsDown,
     TreasureChest,
+    ExpensifyMobileApp,
+    MoneyIntoWallet,
+    PalmTree,
+    PaperAirplane,
+    PiggyBank,
+    Pillow,
+    Profile,
+    QRCode,
+    ReceiptLocationMarker,
+    ReceiptPartners,
+    SendMoney,
+    SplitBill,
+    SubscriptionAnnual,
+    SubscriptionPPU,
+    TeachersUnite,
+    ThumbsUpStars,
+    Tire,
+    TrashCan,
+    VirtualCard,
     Workflows,
     CarIce,
     BlueShield,

src/components/LocationPermissionModal/index.android.tsx

@@ -2,7 +2,9 @@ import React, {useEffect, useState} from 'react';
 import {Linking} from 'react-native';
 import {RESULTS} from 'react-native-permissions';
 import ConfirmModal from '@components/ConfirmModal';
-import * as Illustrations from '@components/Icon/Illustrations';
+import {loadIllustration} from '@components/Icon/IllustrationLoader';
+import type {IllustrationName} from '@components/Icon/IllustrationLoader';
+import {useMemoizedLazyAsset} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {getLocationPermission, requestLocationPermission} from '@pages/iou/request/step/IOURequestStepScan/LocationPermission';
@@ -15,6 +17,7 @@ function LocationPermissionModal({startPermissionFlow, resetPermissionFlow, onDe
 
     const styles = useThemeStyles();
     const {translate} = useLocalize();
+    const {asset: ReceiptLocationMarker} = useMemoizedLazyAsset(() => loadIllustration('ReceiptLocationMarker' as IllustrationName));
 
     useEffect(() => {
         if (!startPermissionFlow) {
@@ -88,7 +91,7 @@ function LocationPermissionModal({startPermissionFlow, resetPermissionFlow, onDe
             title={translate(hasError ? 'receipt.locationErrorTitle' : 'receipt.locationAccessTitle')}
             titleContainerStyles={[styles.mt2, styles.mb0]}
             titleStyles={[styles.textHeadline]}
-            iconSource={Illustrations.ReceiptLocationMarker}
+            iconSource={ReceiptLocationMarker}
             iconFill={false}
             iconWidth={140}
             iconHeight={120}

src/components/LocationPermissionModal/index.desktop.tsx

@@ -2,8 +2,10 @@ import lodashDebounce from 'lodash/debounce';
 import React, {useCallback, useEffect, useMemo, useState} from 'react';
 import {RESULTS} from 'react-native-permissions';
 import ConfirmModal from '@components/ConfirmModal';
-import * as Illustrations from '@components/Icon/Illustrations';
+import {loadIllustration} from '@components/Icon/IllustrationLoader';
+import type {IllustrationName} from '@components/Icon/IllustrationLoader';
 import ELECTRON_EVENTS from '@desktop/ELECTRON_EVENTS';
+import {useMemoizedLazyAsset} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import getPlatform from '@libs/getPlatform';
@@ -19,6 +21,7 @@ function LocationPermissionModal({startPermissionFlow, resetPermissionFlow, onDe
 
     const styles = useThemeStyles();
     const {translate} = useLocalize();
+    const {asset: ReceiptLocationMarker} = useMemoizedLazyAsset(() => loadIllustration('ReceiptLocationMarker' as IllustrationName));
 
     const isWeb = getPlatform() === CONST.PLATFORM.WEB;
 
@@ -132,7 +135,7 @@ function LocationPermissionModal({startPermissionFlow, resetPermissionFlow, onDe
             title={translate(hasError ? 'receipt.locationErrorTitle' : 'receipt.locationAccessTitle')}
             titleContainerStyles={[styles.mt2, styles.mb0]}
             titleStyles={[styles.textHeadline]}
-            iconSource={Illustrations.ReceiptLocationMarker}
+            iconSource={ReceiptLocationMarker}
             iconFill={false}
             iconWidth={140}
             iconHeight={120}

src/components/LocationPermissionModal/index.tsx

@@ -3,7 +3,9 @@ import React, {useCallback, useEffect, useMemo, useState} from 'react';
 import {Linking} from 'react-native';
 import {RESULTS} from 'react-native-permissions';
 import ConfirmModal from '@components/ConfirmModal';
-import * as Illustrations from '@components/Icon/Illustrations';
+import {loadIllustration} from '@components/Icon/IllustrationLoader';
+import type {IllustrationName} from '@components/Icon/IllustrationLoader';
+import {useMemoizedLazyAsset} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import getPlatform from '@libs/getPlatform';
@@ -19,6 +21,7 @@ function LocationPermissionModal({startPermissionFlow, resetPermissionFlow, onDe
 
     const styles = useThemeStyles();
     const {translate} = useLocalize();
+    const {asset: ReceiptLocationMarker} = useMemoizedLazyAsset(() => loadIllustration('ReceiptLocationMarker' as IllustrationName));
 
     const isWeb = getPlatform() === CONST.PLATFORM.WEB;
 
@@ -144,7 +147,7 @@ function LocationPermissionModal({startPermissionFlow, resetPermissionFlow, onDe
             title={translate(hasError ? 'receipt.locationErrorTitle' : 'receipt.locationAccessTitle')}
             titleContainerStyles={[styles.mt2, styles.mb0]}
             titleStyles={[styles.textHeadline]}
-            iconSource={Illustrations.ReceiptLocationMarker}
+            iconSource={ReceiptLocationMarker}
             iconFill={false}
             iconWidth={140}
             iconHeight={120}