[$125] Migrate simple illustrations (less frequent) to lazy loading

[mollfpr]

Background

We're migrating all icons and illustrations to use lazy loading to improve app startup performance by reducing the main bundle size. This is part of a larger initiative tracked in #74599.

What needs to be done

Migrate the following icons and illustrations to use the lazy loading system:

Icons/Illustrations to migrate:

• ExpensifyMobileApp
• MoneyIntoWallet
• PalmTree
• PaperAirplane
• PiggyBank
• Pillow
• Profile
• QRCode
• RealtimeReport
• ReceiptLocationMarker
• ReceiptPartners
• ReceiptUpload (simple version)
• SendMoney
• ShieldYellow
• SplitBill
• Stopwatch
• SubscriptionAnnual
• SubscriptionPPU
• TeachersUnite
• ThumbsDown
• ThumbsUpStars
• Tire
• TrashCan
• TreasureChest
• VirtualCard

Note: BlueShield, CarIce, and Pencil are duplicates — already in the chunk and should be consolidated.

Migration Guide

Please follow the comprehensive migration guide here:
https://github.com/Expensify/App/blob/main/contributingGuides/LAZY_ICONS_AND_ILLUSTRATIONS.md

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021990254421061916696
• Upwork Job ID: 1990254421061916696
• Last Price Increase: 2025-11-17
• Automatic offers:
• samranahm | Contributor | 109498545

[samranahm]

Is this open for external contributors, I'm open to take this one.

[abbasifaizan70]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Migrate 23 icons and illustrations to lazy loading to reduce the main bundle size and improve app startup performance. These assets are currently imported directly in Illustrations.ts, causing them to be bundled and loaded at startup even when not immediately needed.

What is the root cause of that problem?

Static imports in Illustrations.ts cause webpack to bundle all SVG assets into the main bundle. This increases initial bundle size, startup time, and memory usage. Lazy loading splits these assets into a separate chunk that only loads when needed.

What changes do you think we should make in order to solve the problem?

This migration will strictly follow the step-by-step process outlined in contributingGuides/LAZY_ICONS_AND_ILLUSTRATIONS.md:

1. Add to lazy chunk file: Add all 23 icons/illustrations to src/components/Icon/chunks/illustrations.chunk.ts:

   • Add SVG imports
   • Add to Illustrations object
   • Add cases to getIllustration() switch statement

2. Remove from main file: Remove imports and exports from src/components/Icon/Illustrations.ts.

3. Update components: Find all components using these illustrations (via npm run check-lazy-loading or grep) and replace direct imports with useMemoizedLazyIllustrations hook (for multiple) or useMemoizedLazyAsset with loadIllustration (for single), following the migration patterns shown in the guide.

Icons/illustrations to migrate (alphabetically):

• Abracadabra
• BrokenCompanyCardBankConnection
• BrokenMagnifyingGlass
• CardReplacementSuccess
• EmptyStateExpenses
• FolderWithPapers
• Hands
• HoldExpense
• MagicCode
• ModalHoldOrReject
• MushroomTopHat
• PaymentHands
• ReceiptFairy
• ReceiptsStackedOnPin
• RocketBlue
• RocketDude
• SewerDino
• SmartScan
• ThreeLeggedLaptopWoman
• ToddBehindCloud
• ToddInCar
• ToddWithPhones

What alternative solutions did you explore? (Optional)

Keeping assets in the main bundle doesn't solve the performance issue. Manual dynamic imports would work but are error-prone. The centralized lazy loading system provides better consistency and type safety.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~021990254421061916696

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @akinwale (External)

[melvin-bot]

Triggered auto assignment to @heyjennahay (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.