Merge pull request Expensify#75533 from TaduJR/fix-Migrate-simple-illustrations-common-to-lazy-loading

Author: mollfpr

src/components/Icon/Illustrations.ts

@@ -52,39 +52,9 @@ import ToddBehindCloud from '@assets/images/product-illustrations/todd-behind-cl
 import ToddInCar from '@assets/images/product-illustrations/todd-in-car.svg';
 import ToddWithPhones from '@assets/images/product-illustrations/todd-with-phones.svg';
 import RunningTurtle from '@assets/images/running-turtle.svg';
-import Puzzle from '@assets/images/simple-illustrations/emptystate__puzzlepieces.svg';
-import Abacus from '@assets/images/simple-illustrations/simple-illustration__abacus.svg';
-import Alert from '@assets/images/simple-illustrations/simple-illustration__alert.svg';
-import Approval from '@assets/images/simple-illustrations/simple-illustration__approval.svg';
-import Binoculars from '@assets/images/simple-illustrations/simple-illustration__binoculars.svg';
 import BlueShield from '@assets/images/simple-illustrations/simple-illustration__blueshield.svg';
-import Buildings from '@assets/images/simple-illustrations/simple-illustration__buildings.svg';
 import CarIce from '@assets/images/simple-illustrations/simple-illustration__car-ice.svg';
-import Car from '@assets/images/simple-illustrations/simple-illustration__car.svg';
-import PinkCar from '@assets/images/simple-illustrations/simple-illustration__car_pink.svg';
-import ChatBubbles from '@assets/images/simple-illustrations/simple-illustration__chatbubbles.svg';
-import CheckmarkCircle from '@assets/images/simple-illustrations/simple-illustration__checkmarkcircle.svg';
-import CommentBubbles from '@assets/images/simple-illustrations/simple-illustration__commentbubbles.svg';
-import ConciergeBubble from '@assets/images/simple-illustrations/simple-illustration__concierge-bubble.svg';
-import CreditCardEyes from '@assets/images/simple-illustrations/simple-illustration__creditcardeyes.svg';
-import CreditCardsNewGreen from '@assets/images/simple-illustrations/simple-illustration__creditcards--green.svg';
-import EmailAddress from '@assets/images/simple-illustrations/simple-illustration__email-address.svg';
-import EmptyShelves from '@assets/images/simple-illustrations/simple-illustration__empty-shelves.svg';
-import Encryption from '@assets/images/simple-illustrations/simple-illustration__encryption.svg';
-import EnvelopeReceipt from '@assets/images/simple-illustrations/simple-illustration__envelopereceipt.svg';
-import Filters from '@assets/images/simple-illustrations/simple-illustration__filters.svg';
-import Flash from '@assets/images/simple-illustrations/simple-illustration__flash.svg';
-import Gears from '@assets/images/simple-illustrations/simple-illustration__gears.svg';
-import HeadSet from '@assets/images/simple-illustrations/simple-illustration__headset.svg';
-import Hourglass from '@assets/images/simple-illustrations/simple-illustration__hourglass.svg';
-import House from '@assets/images/simple-illustrations/simple-illustration__house.svg';
-import Lightbulb from '@assets/images/simple-illustrations/simple-illustration__lightbulb.svg';
-import LockClosed from '@assets/images/simple-illustrations/simple-illustration__lockclosed.svg';
-import LockClosedOrange from '@assets/images/simple-illustrations/simple-illustration__lockclosed_orange.svg';
-import LockOpen from '@assets/images/simple-illustrations/simple-illustration__lockopen.svg';
-import Luggage from '@assets/images/simple-illustrations/simple-illustration__luggage.svg';
 import MagnifyingGlassReceipt from '@assets/images/simple-illustrations/simple-illustration__magnifyingglass-receipt.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';
@@ -118,20 +88,14 @@ import TurtleInShell from '@assets/images/turtle-in-shell.svg';
 
 export {
     Abracadabra,
-    Encryption,
     BrokenMagnifyingGlass,
-    ChatBubbles,
-    PinkCar,
     Computer,
-    EmailAddress,
     EmptyCardState,
     EmptyStateExpenses,
-    EnvelopeReceipt,
     ExpensifyCardImage,
     PaymentHands,
     MagicCode,
     MagnifyingGlassReceipt,
-    Mailbox,
     MushroomTopHat,
     RocketBlue,
     RocketDude,
@@ -141,61 +105,39 @@ export {
     ToddInCar,
     ShieldYellow,
     BrokenCompanyCardBankConnection,
-    CreditCardsNewGreen,
     LaptopWithSecondScreenAndHourglass,
     LaptopWithSecondScreenSync,
     LaptopWithSecondScreenX,
-    LockOpen,
-    Luggage,
     MoneyIntoWallet,
-    ConciergeBubble,
     TreasureChest,
     ThumbsUpStars,
     Hands,
-    HeadSet,
     SmartScan,
-    Hourglass,
-    CommentBubbles,
     TrashCan,
     Profile,
-    Puzzle,
     PalmTree,
-    LockClosed,
-    Gears,
     QRCode,
     RealtimeReport,
     HoldExpense,
     ReceiptFairy,
-    Approval,
     PendingBank,
     ThreeLeggedLaptopWoman,
-    House,
-    Buildings,
-    Alert,
     TeachersUnite,
-    Abacus,
-    Binoculars,
     ReceiptUpload,
     SplitBill,
     PiggyBank,
     Pillow,
-    Car,
     Pencil,
     CarIce,
     ReceiptLocationMarker,
-    Lightbulb,
     Stopwatch,
     SubscriptionAnnual,
     SubscriptionPPU,
     ExpensifyApprovedLogo,
     SendMoney,
-    CheckmarkCircle,
-    CreditCardEyes,
-    LockClosedOrange,
     FolderWithPapers,
     VirtualCard,
     Tire,
-    Filters,
     RunningTurtle,
     CompanyCardsPendingState,
     VisaCompanyCardDetail,
@@ -220,7 +162,6 @@ export {
     StripeCompanyCardDetailLarge,
     VisaCompanyCardDetailLarge,
     WellsFargoCompanyCardDetailLarge,
-    Flash,
     ExpensifyMobileApp,
     ModalHoldOrReject,
     ThumbsDown,
@@ -229,7 +170,6 @@ export {
     ReceiptsStackedOnPin,
     PaperAirplane,
     CardReplacementSuccess,
-    EmptyShelves,
     BlueShield,
     OpenSafe,
     LaptopOnDeskWithCoffeeAndKey,

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

@@ -14,18 +14,48 @@ import LaptopWithSecondScreenX from '@assets/images/laptop-with-second-screen-x.
 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';
-// Simple Illustrations - Core ones that are actually used
+// 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';
+// Simple Illustrations - Original core ones
 import Accounting from '@assets/images/simple-illustrations/simple-illustration__accounting.svg';
+import Alert from '@assets/images/simple-illustrations/simple-illustration__alert.svg';
+import Approval from '@assets/images/simple-illustrations/simple-illustration__approval.svg';
+import Binoculars from '@assets/images/simple-illustrations/simple-illustration__binoculars.svg';
 import BlueShield from '@assets/images/simple-illustrations/simple-illustration__blueshield.svg';
 import Building from '@assets/images/simple-illustrations/simple-illustration__building.svg';
+import Buildings from '@assets/images/simple-illustrations/simple-illustration__buildings.svg';
 import CarIce from '@assets/images/simple-illustrations/simple-illustration__car-ice.svg';
+import Car from '@assets/images/simple-illustrations/simple-illustration__car.svg';
+import PinkCar from '@assets/images/simple-illustrations/simple-illustration__car_pink.svg';
+import ChatBubbles from '@assets/images/simple-illustrations/simple-illustration__chatbubbles.svg';
+import CheckmarkCircle from '@assets/images/simple-illustrations/simple-illustration__checkmarkcircle.svg';
 import Coins from '@assets/images/simple-illustrations/simple-illustration__coins.svg';
+import CommentBubbles from '@assets/images/simple-illustrations/simple-illustration__commentbubbles.svg';
+import ConciergeBubble from '@assets/images/simple-illustrations/simple-illustration__concierge-bubble.svg';
 import CreditCardsNew from '@assets/images/simple-illustrations/simple-illustration__credit-cards.svg';
+import CreditCardEyes from '@assets/images/simple-illustrations/simple-illustration__creditcardeyes.svg';
+import CreditCardsNewGreen from '@assets/images/simple-illustrations/simple-illustration__creditcards--green.svg';
+import EmailAddress from '@assets/images/simple-illustrations/simple-illustration__email-address.svg';
+import EmptyShelves from '@assets/images/simple-illustrations/simple-illustration__empty-shelves.svg';
+import Encryption from '@assets/images/simple-illustrations/simple-illustration__encryption.svg';
+import EnvelopeReceipt from '@assets/images/simple-illustrations/simple-illustration__envelopereceipt.svg';
+import Filters from '@assets/images/simple-illustrations/simple-illustration__filters.svg';
+import Flash from '@assets/images/simple-illustrations/simple-illustration__flash.svg';
 import FolderOpen from '@assets/images/simple-illustrations/simple-illustration__folder-open.svg';
+import Gears from '@assets/images/simple-illustrations/simple-illustration__gears.svg';
 import HandCard from '@assets/images/simple-illustrations/simple-illustration__handcard.svg';
+import HeadSet from '@assets/images/simple-illustrations/simple-illustration__headset.svg';
+import Hourglass from '@assets/images/simple-illustrations/simple-illustration__hourglass.svg';
+import House from '@assets/images/simple-illustrations/simple-illustration__house.svg';
 import InvoiceBlue from '@assets/images/simple-illustrations/simple-illustration__invoice.svg';
+import Lightbulb from '@assets/images/simple-illustrations/simple-illustration__lightbulb.svg';
+import LockClosed from '@assets/images/simple-illustrations/simple-illustration__lockclosed.svg';
+import LockClosedOrange from '@assets/images/simple-illustrations/simple-illustration__lockclosed_orange.svg';
+import LockOpen from '@assets/images/simple-illustrations/simple-illustration__lockopen.svg';
 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 MoneyReceipts from '@assets/images/simple-illustrations/simple-illustration__money-receipts.svg';
 import MoneyWings from '@assets/images/simple-illustrations/simple-illustration__moneywings.svg';
 import Pencil from '@assets/images/simple-illustrations/simple-illustration__pencil.svg';
@@ -34,6 +64,7 @@ import RealtimeReport from '@assets/images/simple-illustrations/simple-illustrat
 import ReceiptWrangler from '@assets/images/simple-illustrations/simple-illustration__receipt-wrangler.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 ShieldYellow from '@assets/images/simple-illustrations/simple-illustration__shield.svg';
 import Stopwatch from '@assets/images/simple-illustrations/simple-illustration__stopwatch.svg';
 import Tag from '@assets/images/simple-illustrations/simple-illustration__tag.svg';
 import ThumbsDown from '@assets/images/simple-illustrations/simple-illustration__thumbsdown.svg';
@@ -61,7 +92,7 @@ const Illustrations = {
     Telescope: TeleScope, // Alias for consistency
     ToddBehindCloud,
 
-    // Simple Illustrations
+    // Simple Illustrations - Original
     Accounting,
     Building,
     Coins,
@@ -86,8 +117,38 @@ const Illustrations = {
     BlueShield,
     Pencil,
     Luggage,
-    // Legacy aliases for compatibility
-    Car: CompanyCard, // Fallback for Car illustration requests
+
+    // Simple Illustrations - Bucket 3 (Common)
+    Puzzle,
+    Abacus,
+    Alert,
+    Approval,
+    Binoculars,
+    Buildings,
+    Car,
+    PinkCar,
+    ChatBubbles,
+    CheckmarkCircle,
+    CommentBubbles,
+    ConciergeBubble,
+    CreditCardEyes,
+    CreditCardsNewGreen,
+    EmailAddress,
+    EmptyShelves,
+    Encryption,
+    EnvelopeReceipt,
+    Filters,
+    Flash,
+    Gears,
+    HeadSet,
+    Hourglass,
+    House,
+    Lightbulb,
+    LockClosed,
+    LockClosedOrange,
+    LockOpen,
+    Mailbox,
+    ShieldYellow,
 };
 
 /**

src/components/OnboardingHelpDropdownButton.tsx

@@ -2,6 +2,7 @@ import {accountIDSelector} from '@selectors/Session';
 import {addMinutes} from 'date-fns';
 import React from 'react';
 import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
+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 type {ReportNameValuePairs} from '@src/types/onyx';
 import ButtonWithDropdownMenu from './ButtonWithDropdownMenu';
 import type {DropdownOption, OnboardingHelpType} from './ButtonWithDropdownMenu/types';
 import {CalendarSolid, Close, Monitor} from './Icon/Expensicons';
-import * as Illustrations from './Icon/Illustrations';
 
 type OnboardingHelpButtonProps = {
     /** The ID of onboarding chat report */
@@ -51,6 +51,8 @@ function OnboardingHelpDropdownButton({reportID, shouldUseNarrowLayout, shouldSh
     const currentUserPersonalDetails = useCurrentUserPersonalDetails();
     const userTimezone = currentUserPersonalDetails?.timezone?.selected ? currentUserPersonalDetails?.timezone.selected : CONST.DEFAULT_TIME_ZONE.selected;
 
+    const illustrations = useMemoizedLazyIllustrations(['HeadSet'] as const);
+
     if (!reportID || !accountID) {
         return null;
     }
@@ -84,7 +86,7 @@ function OnboardingHelpDropdownButton({reportID, shouldUseNarrowLayout, shouldSh
             )} ${DateUtils.getZoneAbbreviation(new Date(latestScheduledCall.eventTime), userTimezone)}`,
             descriptionTextStyle: [styles.themeTextColor, styles.ml2],
             displayInDefaultIconColor: true,
-            icon: Illustrations.HeadSet,
+            icon: illustrations.HeadSet,
             iconWidth: variables.avatarSizeLargeNormal,
             iconHeight: variables.avatarSizeLargeNormal,
             wrapperStyle: [styles.mb3, styles.pl4, styles.pr5, styles.pt3, styles.pb6, styles.borderBottom],

src/libs/SubscriptionUtils.ts

@@ -2,9 +2,7 @@ import {differenceInSeconds, fromUnixTime, isAfter, isBefore} from 'date-fns';
 import {fromZonedTime} from 'date-fns-tz';
 import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
 import Onyx from 'react-native-onyx';
-import type {SvgProps} from 'react-native-svg';
 import type {ValueOf} from 'type-fest';
-import * as Illustrations from '@components/Icon/Illustrations';
 import type {LocalizedTranslate} from '@components/LocaleContextProvider';
 import type {PreferredCurrency} from '@hooks/usePreferredCurrency';
 import type {PersonalPolicyTypeExcludedProps} from '@pages/settings/Subscription/SubscriptionPlan/SubscriptionPlanCard';
@@ -13,6 +11,7 @@ import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {BillingGraceEndPeriod, BillingStatus, Fund, FundList, IntroSelected, Policy, StripeCustomerID} from '@src/types/onyx';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
+import type IconAsset from '@src/types/utils/IconAsset';
 import {convertToShortDisplayString} from './CurrencyUtils';
 import {getOwnedPaidPolicies, isPolicyOwner} from './PolicyUtils';
 
@@ -44,10 +43,15 @@ type SubscriptionPlanInfo = {
     subtitle: string;
     note: string | undefined;
     benefits: string[];
-    src: React.FC<SvgProps>;
+    src: IconAsset;
     description: string;
 };
 
+type SubscriptionPlanIllustrations = {
+    Mailbox: IconAsset;
+    ShieldYellow: IconAsset;
+};
+
 let currentUserAccountID = -1;
 Onyx.connect({
     key: ONYXKEYS.SESSION,
@@ -555,6 +559,7 @@ function getSubscriptionPlanInfo(
     preferredCurrency: PreferredCurrency,
     isFromComparisonModal: boolean,
     hasTeam2025Pricing: boolean,
+    illustrations: Record<'Mailbox' | 'ShieldYellow', IconAsset>,
 ): SubscriptionPlanInfo {
     const priceValue = getSubscriptionPrice(subscriptionPlan, preferredCurrency, privateSubscriptionType, hasTeam2025Pricing);
     const price = convertToShortDisplayString(priceValue, preferredCurrency);
@@ -587,7 +592,7 @@ function getSubscriptionPlanInfo(
                 translate('subscription.yourPlan.collect.benefit7'),
                 translate('subscription.yourPlan.collect.benefit8'),
             ],
-            src: Illustrations.Mailbox,
+            src: illustrations.Mailbox,
             description: translate('subscription.yourPlan.collect.description'),
         };
     }
@@ -606,7 +611,7 @@ function getSubscriptionPlanInfo(
             translate('subscription.yourPlan.control.benefit7'),
             translate('subscription.yourPlan.control.benefit8'),
         ],
-        src: Illustrations.ShieldYellow,
+        src: illustrations.ShieldYellow,
         description: translate('subscription.yourPlan.control.description'),
     };
 }
@@ -634,3 +639,5 @@ export {
     getSubscriptionPlanInfo,
     getSubscriptionPrice,
 };
+
+export type {SubscriptionPlanIllustrations};

src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx

@@ -1,5 +1,5 @@
 import {useIsFocused} from '@react-navigation/native';
-import React, {useCallback, useImperativeHandle, useRef} from 'react';
+import React, {useCallback, useImperativeHandle, useMemo, useRef} from 'react';
 import {InteractionManager, View} from 'react-native';
 import {ScrollView} from 'react-native-gesture-handler';
 import FormHelpMessage from '@components/FormHelpMessage';
@@ -9,6 +9,7 @@ import type {MenuItemProps} from '@components/MenuItem';
 import MenuItemList from '@components/MenuItemList';
 import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
+import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useOnboardingMessages from '@hooks/useOnboardingMessages';
 import useOnyx from '@hooks/useOnyx';
@@ -39,17 +40,21 @@ function getOnboardingChoices(customChoices: OnboardingPurpose[]) {
     return selectableOnboardingChoices.filter((choice) => customChoices.includes(choice));
 }
 
-const menuIcons = {
-    [CONST.ONBOARDING_CHOICES.EMPLOYER]: Illustrations.ReceiptUpload,
-    [CONST.ONBOARDING_CHOICES.MANAGE_TEAM]: Illustrations.Abacus,
-    [CONST.ONBOARDING_CHOICES.PERSONAL_SPEND]: Illustrations.PiggyBank,
-    [CONST.ONBOARDING_CHOICES.CHAT_SPLIT]: Illustrations.SplitBill,
-    [CONST.ONBOARDING_CHOICES.LOOKING_AROUND]: Illustrations.Binoculars,
-};
-
 function BaseOnboardingPurpose({shouldUseNativeStyles, shouldEnableMaxHeight, route}: BaseOnboardingPurposeProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
+    const illustrations = useMemoizedLazyIllustrations(['Abacus', 'Binoculars'] as const);
+
+    const menuIcons = useMemo(
+        () => ({
+            [CONST.ONBOARDING_CHOICES.EMPLOYER]: Illustrations.ReceiptUpload,
+            [CONST.ONBOARDING_CHOICES.MANAGE_TEAM]: illustrations.Abacus,
+            [CONST.ONBOARDING_CHOICES.PERSONAL_SPEND]: Illustrations.PiggyBank,
+            [CONST.ONBOARDING_CHOICES.CHAT_SPLIT]: Illustrations.SplitBill,
+            [CONST.ONBOARDING_CHOICES.LOOKING_AROUND]: illustrations.Binoculars,
+        }),
+        [illustrations.Abacus, illustrations.Binoculars],
+    );
     const {onboardingIsMediumOrLargerScreenWidth} = useResponsiveLayout();
     const [account] = useOnyx(ONYXKEYS.ACCOUNT, {canBeMissing: true});
     const {onboardingMessages} = useOnboardingMessages();