[NoQA] Migrate icons documents & files - business & workspace to lazy loading

__mocks__/Illustrations.ts

@@ -21,6 +21,7 @@ const CreditCardsNew = 'CreditCardsNew';
 const CreditCardsNewGreen = 'CreditCardsNewGreen';
 const InvoiceBlue = 'InvoiceBlue';
 const LaptopWithSecondScreenAndHourglass = 'LaptopWithSecondScreenAndHourglass';
+const RunningTurtle = 'RunningTurtle';
 const LockOpen = 'LockOpen';
 const Luggage = 'Luggage';
 const MoneyIntoWallet = 'MoneyIntoWallet';
@@ -29,6 +30,7 @@ const ConciergeBubble = 'ConciergeBubble';
 const TreasureChest = 'TreasureChest';
 const ThumbsUpStars = 'ThumbsUpStars';
 const Hands = 'Hands';
+const Hand = 'Hand';
 const SmartScan = 'SmartScan';
 const Hourglass = 'Hourglass';
 const CommentBubbles = 'CommentBubbles';
@@ -56,6 +58,9 @@ const Binoculars = 'Binoculars';
 const CompanyCard = 'CompanyCard';
 const ReceiptUpload = 'ReceiptUpload';
 const ExpensifyCardIllustration = 'ExpensifyCardIllustration';
+const ExpensifyCardImage = 'ExpensifyCardImage';
+const MultiScan = 'MultiScan';
+const Shutter = 'Shutter';
 const SplitBill = 'SplitBill';
 const PiggyBank = 'PiggyBank';
 const Pillow = 'Pillow';
@@ -134,6 +139,7 @@ export {
     CreditCardsNewGreen,
     InvoiceBlue,
     LaptopWithSecondScreenAndHourglass,
+    RunningTurtle,
     LockOpen,
     Luggage,
     MoneyIntoWallet,
@@ -142,6 +148,7 @@ export {
     TreasureChest,
     ThumbsUpStars,
     Hands,
+    Hand,
     SmartScan,
     Hourglass,
     CommentBubbles,
@@ -169,6 +176,9 @@ export {
     CompanyCard,
     ReceiptUpload,
     ExpensifyCardIllustration,
+    ExpensifyCardImage,
+    MultiScan,
+    Shutter,
     SplitBill,
     PiggyBank,
     Pillow,

src/components/ApproverSelectionList.tsx

@@ -1,6 +1,7 @@
 import React, {useMemo, useState} from 'react';
 import type {SectionListData} from 'react-native';
 import useDebouncedState from '@hooks/useDebouncedState';
+import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -17,7 +18,6 @@ import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import BlockingView from './BlockingViews/BlockingView';
 import FullPageNotFoundView from './BlockingViews/FullPageNotFoundView';
 import HeaderWithBackButton from './HeaderWithBackButton';
-import * as Illustrations from './Icon/Illustrations';
 import ScreenWrapper from './ScreenWrapper';
 import SelectionList from './SelectionListWithSections';
 import InviteMemberListItem from './SelectionListWithSections/InviteMemberListItem';
@@ -82,6 +82,7 @@ function ApproverSelectionList({
     const [searchTerm, debouncedSearchTerm, setSearchTerm] = useDebouncedState('');
     const [countryCode = CONST.DEFAULT_COUNTRY_CODE] = useOnyx(ONYXKEYS.COUNTRY_CODE, {canBeMissing: false});
     const shouldShowTextInput = shouldShowTextInputProp ?? allApprovers?.length >= CONST.STANDARD_LIST_ITEM_LIMIT;
+    const lazyIllustrations = useMemoizedLazyIllustrations(['TurtleInShell']);
 
     const [selectedMembers, setSelectedMembers] = useState<SelectionListApprover[]>([]);
 
@@ -127,7 +128,7 @@ function ApproverSelectionList({
     const listEmptyContent = useMemo(
         () => (
             <BlockingView
-                icon={Illustrations.TurtleInShell}
+                icon={lazyIllustrations.TurtleInShell}
                 iconWidth={variables.emptyListIconWidth}
                 iconHeight={variables.emptyListIconHeight}
                 title={translate('workflowsPage.emptyContent.title')}
@@ -137,7 +138,7 @@ function ApproverSelectionList({
                 contentFitImage="contain"
             />
         ),
-        [translate, listEmptyContentSubtitle, styles.textSupporting, styles.pb10],
+        [translate, listEmptyContentSubtitle, styles.textSupporting, styles.pb10, lazyIllustrations],
     );
 
     return (

src/components/CardPreview.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import {View} from 'react-native';
-import ExpensifyCardImage from '@assets/images/expensify-card.svg';
+import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
 import useOnyx from '@hooks/useOnyx';
 import useThemeStyles from '@hooks/useThemeStyles';
 import variables from '@styles/variables';
@@ -10,6 +10,7 @@ import Text from './Text';
 
 function CardPreview() {
     const styles = useThemeStyles();
+    const lazyIllustrations = useMemoizedLazyIllustrations(['ExpensifyCardImage']);
 
     const [privatePersonalDetails] = useOnyx(ONYXKEYS.PRIVATE_PERSONAL_DETAILS, {canBeMissing: true});
     const [session] = useOnyx(ONYXKEYS.SESSION, {canBeMissing: true});
@@ -21,7 +22,7 @@ function CardPreview() {
         <View style={styles.walletCard}>
             <ImageSVG
                 contentFit="contain"
-                src={ExpensifyCardImage}
+                src={lazyIllustrations.ExpensifyCardImage}
                 pointerEvents="none"
                 height={variables.cardPreviewHeight}
                 width={variables.cardPreviewWidth}

src/components/Icon/Illustrations.ts

@@ -23,10 +23,8 @@ import WellsFargoCompanyCardDetailLarge from '@assets/images/companyCards/large/
 import PendingBank from '@assets/images/companyCards/pending-bank.svg';
 import CompanyCardsPendingState from '@assets/images/companyCards/pendingstate_laptop-with-hourglass-and-cards.svg';
 import Computer from '@assets/images/computer.svg';
-import EmptyCardState from '@assets/images/emptystate__expensifycard.svg';
 import ExpensifyCardImage from '@assets/images/expensify-card.svg';
 import LaptopOnDeskWithCoffeeAndKey from '@assets/images/laptop-on-desk-with-coffee-and-key.svg';
-import LaptopWithSecondScreenAndHourglass from '@assets/images/laptop-with-second-screen-and-hourglass.svg';
 import LaptopWithSecondScreenSync from '@assets/images/laptop-with-second-screen-sync.svg';
 import LaptopWithSecondScreenX from '@assets/images/laptop-with-second-screen-x.svg';
 import Abracadabra from '@assets/images/product-illustrations/abracadabra.svg';
@@ -83,16 +81,12 @@ import Tire from '@assets/images/simple-illustrations/simple-illustration__tire.
 import TrashCan from '@assets/images/simple-illustrations/simple-illustration__trashcan.svg';
 import TreasureChest from '@assets/images/simple-illustrations/simple-illustration__treasurechest.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';
 
 export {
     Abracadabra,
     BrokenMagnifyingGlass,
     Computer,
-    EmptyCardState,
     EmptyStateExpenses,
-    ExpensifyCardImage,
     PaymentHands,
     MagicCode,
     MagnifyingGlassReceipt,
@@ -105,7 +99,6 @@ export {
     ToddInCar,
     ShieldYellow,
     BrokenCompanyCardBankConnection,
-    LaptopWithSecondScreenAndHourglass,
     LaptopWithSecondScreenSync,
     LaptopWithSecondScreenX,
     MoneyIntoWallet,
@@ -128,12 +121,12 @@ export {
     PiggyBank,
     Pillow,
     Pencil,
+    ExpensifyCardImage,
     CarIce,
     ReceiptLocationMarker,
     Stopwatch,
     SubscriptionAnnual,
     SubscriptionPPU,
-    ExpensifyApprovedLogo,
     SendMoney,
     FolderWithPapers,
     VirtualCard,
@@ -143,7 +136,6 @@ export {
     VisaCompanyCardDetail,
     MasterCardCompanyCardDetail,
     AmexCardCompanyCardDetail,
-    TurtleInShell,
     BankOfAmericaCompanyCardDetail,
     BrexCompanyCardDetail,
     CapitalOneCompanyCardDetail,

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

@@ -3,17 +3,27 @@
 import type {SvgProps} from 'react-native-svg';
 import CompanyCardsEmptyState from '@assets/images/companyCards/emptystate__card-pos.svg';
 import PendingBank from '@assets/images/companyCards/pending-bank.svg';
+import CompanyCardsPendingState from '@assets/images/companyCards/pendingstate_laptop-with-hourglass-and-cards.svg';
 // Other assets
 import Computer from '@assets/images/computer.svg';
-import ExpensifyCardImage from '@assets/images/expensify-card.svg';
+// Educational Illustrations
+import MultiScan from '@assets/images/educational-illustration__multi-scan.svg';
 // Expensify Card
+import EmptyCardState from '@assets/images/emptystate__expensifycard.svg';
+import ExpensifyCardImage from '@assets/images/expensify-card.svg';
 import ExpensifyCardIllustration from '@assets/images/expensifyCard/cardIllustration.svg';
+// Other Images
+import Hand from '@assets/images/hand.svg';
+import LaptopWithSecondScreenAndHourglass from '@assets/images/laptop-with-second-screen-and-hourglass.svg';
 import LaptopWithSecondScreenSync from '@assets/images/laptop-with-second-screen-sync.svg';
 import LaptopWithSecondScreenX from '@assets/images/laptop-with-second-screen-x.svg';
 // Product Illustrations
 import ModalHoldOrReject from '@assets/images/product-illustrations/modal-hold-or-reject.svg';
 import TeleScope from '@assets/images/product-illustrations/telescope.svg';
 import ToddBehindCloud from '@assets/images/product-illustrations/todd-behind-cloud.svg';
+import ReceiptUpload from '@assets/images/receipt-upload.svg';
+import RunningTurtle from '@assets/images/running-turtle.svg';
+import Shutter from '@assets/images/shutter.svg';
 // Simple Illustrations - Bucket 3 (Common)
 import Puzzle from '@assets/images/simple-illustrations/emptystate__puzzlepieces.svg';
 import Abacus from '@assets/images/simple-illustrations/simple-illustration__abacus.svg';
@@ -70,16 +80,21 @@ import Tag from '@assets/images/simple-illustrations/simple-illustration__tag.sv
 import ThumbsDown from '@assets/images/simple-illustrations/simple-illustration__thumbsdown.svg';
 import CompanyCard from '@assets/images/simple-illustrations/simple-illustration__twocards-horizontal.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';
 
 // Create the illustrations object with all imported illustrations
 const Illustrations = {
     // Company Cards
     CompanyCardsEmptyState,
+    CompanyCardsPendingState,
     PendingBank,
 
     // Other assets
     Computer,
+    EmptyCardState,
     ExpensifyCardImage,
+    LaptopWithSecondScreenAndHourglass,
     LaptopWithSecondScreenSync,
     LaptopWithSecondScreenX,
 
@@ -92,7 +107,18 @@ const Illustrations = {
     Telescope: TeleScope, // Alias for consistency
     ToddBehindCloud,
 
-    // Simple Illustrations - Original
+    // Educational Illustrations
+    MultiScan,
+
+    // Other Images
+    Hand,
+    ReceiptUpload,
+    RunningTurtle,
+    Shutter,
+    ExpensifyApprovedLogo,
+    TurtleInShell,
+
+    // Simple Illustrations
     Accounting,
     Building,
     Coins,
@@ -117,8 +143,6 @@ const Illustrations = {
     BlueShield,
     Pencil,
     Luggage,
-
-    // Simple Illustrations - Bucket 3 (Common)
     Puzzle,
     Abacus,
     Alert,

src/libs/CardUtils.ts

@@ -2,7 +2,6 @@ import {fromUnixTime, isBefore} from 'date-fns';
 import groupBy from 'lodash/groupBy';
 import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
 import type {ValueOf} from 'type-fest';
-import ExpensifyCardImage from '@assets/images/expensify-card.svg';
 import type {LocaleContextProps} from '@components/LocaleContextProvider';
 import type IllustrationsType from '@styles/theme/illustrations/types';
 import * as Illustrations from '@src/components/Icon/Illustrations';
@@ -312,11 +311,11 @@ function getCardFeedIcon(cardFeed: CompanyCardFeed | typeof CONST.EXPENSIFY_CARD
         [CONST.COMPANY_CARD.FEED_BANK_NAME.STRIPE]: Illustrations.StripeCompanyCardDetailLarge,
         [CONST.COMPANY_CARD.FEED_BANK_NAME.CSV]: illustrations.GenericCSVCompanyCardLarge,
         [CONST.COMPANY_CARD.FEED_BANK_NAME.PEX]: illustrations.GenericCompanyCardLarge,
-        [CONST.EXPENSIFY_CARD.BANK]: ExpensifyCardImage,
+        [CONST.EXPENSIFY_CARD.BANK]: Illustrations.ExpensifyCardImage,
     };
 
     if (cardFeed.startsWith(CONST.EXPENSIFY_CARD.BANK)) {
-        return ExpensifyCardImage;
+        return Illustrations.ExpensifyCardImage;
     }
 
     if (feedIcons[cardFeed]) {

src/pages/home/report/ReportDetailsExportPage.tsx

@@ -3,11 +3,11 @@ import type {ValueOf} from 'type-fest';
 import ConfirmationPage from '@components/ConfirmationPage';
 import ConfirmModal from '@components/ConfirmModal';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
-import * as Illustrations from '@components/Icon/Illustrations';
 import ScreenWrapper from '@components/ScreenWrapper';
 import UserListItem from '@components/SelectionListWithSections/UserListItem';
 import type {SelectorType} from '@components/SelectionScreen';
 import SelectionScreen from '@components/SelectionScreen';
+import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -31,13 +31,14 @@ function ReportDetailsExportPage({route}: ReportDetailsExportPageProps) {
     const connectionName = route?.params?.connectionName;
     const reportID = route.params.reportID;
     const backTo = route.params.backTo;
-    const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`);
-    const [reportActions] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`);
+    const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`, {canBeMissing: true});
+    const [reportActions] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`, {canBeMissing: true});
     const policyID = report?.policyID;
 
     const {translate} = useLocalize();
     const [modalStatus, setModalStatus] = useState<ExportType | null>(null);
     const styles = useThemeStyles();
+    const lazyIllustrations = useMemoizedLazyIllustrations(['LaptopWithSecondScreenAndHourglass']);
 
     const iconToDisplay = getIntegrationIcon(connectionName);
     const canBeExported = canBeExportedUtil(report);
@@ -89,7 +90,7 @@ function ReportDetailsExportPage({route}: ReportDetailsExportPageProps) {
                     onBackButtonPress={() => Navigation.goBack(ROUTES.REPORT_WITH_ID_DETAILS.getRoute(reportID, backTo))}
                 />
                 <ConfirmationPage
-                    illustration={Illustrations.LaptopWithSecondScreenAndHourglass}
+                    illustration={lazyIllustrations.LaptopWithSecondScreenAndHourglass}
                     heading={translate('workspace.export.notReadyHeading')}
                     description={translate('workspace.export.notReadyDescription')}
                     shouldShowButton

src/pages/iou/ReceiptDropUI.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import {View} from 'react-native';
-import ReceiptUpload from '@assets/images/receipt-upload.svg';
 import DragAndDropConsumer from '@components/DragAndDrop/Consumer';
 import ImageSVG from '@components/ImageSVG';
 import Text from '@components/Text';
+import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
@@ -19,12 +19,13 @@ type ReceiptDropUIProps = {
 function ReceiptDropUI({onDrop, receiptImageTopPosition}: ReceiptDropUIProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
+    const lazyIllustrations = useMemoizedLazyIllustrations(['ReceiptUpload']);
     return (
         <DragAndDropConsumer onDrop={onDrop}>
             <View style={[styles.fileDropOverlay, styles.w100, styles.h100, styles.justifyContentCenter, styles.alignItemsCenter]}>
                 <View style={receiptImageTopPosition ? [styles.pAbsolute, styles.fileUploadImageWrapper(receiptImageTopPosition)] : undefined}>
                     <ImageSVG
-                        src={ReceiptUpload}
+                        src={lazyIllustrations.ReceiptUpload}
                         contentFit="contain"
                         width={CONST.RECEIPT.ICON_SIZE}
                         height={CONST.RECEIPT.ICON_SIZE}