Replace Lottie animations in Account tab with static images on Web #76336
Conversation
melvin-bot
bot
requested review from
ahmedGaber93,
dubielzyk-expensify and
heyjennahay
|
@dubielzyk-expensify @ahmedGaber93 One of you needs to copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button] |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
| import type UseSaveTheWorldSectionIllustration from './types'; | ||
|
|
||
| const useSaveTheWorldSectionIllustration: UseSaveTheWorldSectionIllustration = () => { | ||
| return { |
There was a problem hiding this comment.
❌ PERF-4 (docs)
The object returned from this hook creates a new reference on every render, causing unnecessary re-renders of the Section component that receives these props.
Wrap the return value in useMemo:
import {useMemo} from 'react';
import LottieAnimations from '@components/LottieAnimations';
import type UseSaveTheWorldSectionIllustration from './types';
const useSaveTheWorldSectionIllustration: UseSaveTheWorldSectionIllustration = () => {
return useMemo(() => ({
illustration: LottieAnimations.SaveTheWorld,
}), []);
};
| const illustrations = useMemoizedLazyIllustrations(['SaveTheWorldScale'] as const); | ||
| const styles = useThemeStyles(); | ||
|
|
||
| return { |
There was a problem hiding this comment.
❌ PERF-4 (docs)
The object returned from this hook creates a new reference on every render, causing unnecessary re-renders of the Section component that receives these props.
Wrap the return value in useMemo:
return useMemo(() => ({
illustration: illustrations.SaveTheWorldScale,
illustrationStyle: styles.saveTheWorldStaticIllustration,
}), [illustrations.SaveTheWorldScale, styles.saveTheWorldStaticIllustration]);
| import type UseAboutSectionIllustration from './types'; | ||
|
|
||
| const useAboutSectionIllustration: UseAboutSectionIllustration = () => { | ||
| return { |
There was a problem hiding this comment.
❌ PERF-4 (docs)
The object returned from this hook creates a new reference on every render, causing unnecessary re-renders of the Section component that receives these props.
Wrap the return value in useMemo:
import {useMemo} from 'react';
import LottieAnimations from '@components/LottieAnimations';
import type UseAboutSectionIllustration from './types';
const useAboutSectionIllustration: UseAboutSectionIllustration = () => {
return useMemo(() => ({
illustration: LottieAnimations.Coin,
}), []);
};
| const illustrations = useMemoizedLazyIllustrations(['TiltedCoinExpensify'] as const); | ||
| const styles = useThemeStyles(); | ||
|
|
||
| return { |
There was a problem hiding this comment.
❌ PERF-4 (docs)
The object returned from this hook creates a new reference on every render, causing unnecessary re-renders of the Section component that receives these props.
Wrap the return value in useMemo:
return useMemo(() => ({
illustration: illustrations.TiltedCoinExpensify,
illustrationStyle: styles.aboutStaticIllustration,
}), [illustrations.TiltedCoinExpensify, styles.aboutStaticIllustration]);
| import type UsePreferencesSectionIllustration from './types'; | ||
|
|
||
| const usePreferencesSectionIllustration: UsePreferencesSectionIllustration = () => { | ||
| return { |
There was a problem hiding this comment.
❌ PERF-4 (docs)
The object returned from this hook creates a new reference on every render, causing unnecessary re-renders of the Section component that receives these props.
Wrap the return value in useMemo:
import {useMemo} from 'react';
import LottieAnimations from '@components/LottieAnimations';
import type UsePreferencesSectionIllustration from './types';
const usePreferencesSectionIllustration: UsePreferencesSectionIllustration = () => {
return useMemo(() => ({
illustration: LottieAnimations.PreferencesDJ,
}), []);
};
| const illustrations = useMemoizedLazyIllustrations(['DjBoothReferenceHands'] as const); | ||
| const styles = useThemeStyles(); | ||
|
|
||
| return { |
There was a problem hiding this comment.
❌ PERF-4 (docs)
The object returned from this hook creates a new reference on every render, causing unnecessary re-renders of the Section component that receives these props.
Wrap the return value in useMemo:
return useMemo(() => ({
illustration: illustrations.DjBoothReferenceHands,
illustrationStyle: styles.preferencesStaticIllustration,
}), [illustrations.DjBoothReferenceHands, styles.preferencesStaticIllustration]);
| import type UseSecuritySettingsSectionIllustration from './types'; | ||
|
|
||
| const useSecuritySettingsSectionIllustration: UseSecuritySettingsSectionIllustration = () => { | ||
| return { |
There was a problem hiding this comment.
❌ PERF-4 (docs)
The object returned from this hook creates a new reference on every render, causing unnecessary re-renders of the Section component that receives these props.
Wrap the return value in useMemo:
import {useMemo} from 'react';
import LottieAnimations from '@components/LottieAnimations';
import type UseSecuritySettingsSectionIllustration from './types';
const useSecuritySettingsSectionIllustration: UseSecuritySettingsSectionIllustration = () => {
return useMemo(() => ({
illustration: LottieAnimations.Safe,
}), []);
};
| const illustrations = useMemoizedLazyIllustrations(['Safe'] as const); | ||
| const styles = useThemeStyles(); | ||
|
|
||
| return { |
There was a problem hiding this comment.
❌ PERF-4 (docs)
The object returned from this hook creates a new reference on every render, causing unnecessary re-renders of the Section component that receives these props.
Wrap the return value in useMemo:
return useMemo(() => ({
illustration: illustrations.Safe,
illustrationStyle: styles.securitySettingsStaticIllustration,
}), [illustrations.Safe, styles.securitySettingsStaticIllustration]);
| import type UseTroubleshootSectionIllustration from './types'; | ||
|
|
||
| const useTroubleshootSectionIllustration: UseTroubleshootSectionIllustration = () => { | ||
| return { |
There was a problem hiding this comment.
❌ PERF-4 (docs)
The object returned from this hook creates a new reference on every render, causing unnecessary re-renders of the Section component that receives these props.
Wrap the return value in useMemo:
import {useMemo} from 'react';
import LottieAnimations from '@components/LottieAnimations';
import type UseTroubleshootSectionIllustration from './types';
const useTroubleshootSectionIllustration: UseTroubleshootSectionIllustration = () => {
return useMemo(() => ({
illustration: LottieAnimations.Desk,
}), []);
};
| const illustrations = useMemoizedLazyIllustrations(['WorkspaceScene'] as const); | ||
| const styles = useThemeStyles(); | ||
|
|
||
| return { |
There was a problem hiding this comment.
❌ PERF-4 (docs)
The object returned from this hook creates a new reference on every render, causing unnecessary re-renders of the Section component that receives these props.
Wrap the return value in useMemo:
return useMemo(() => ({
illustration: illustrations.WorkspaceScene,
illustrationStyle: styles.troubleshootStaticIllustration,
}), [illustrations.WorkspaceScene, styles.troubleshootStaticIllustration]);
| import type UseWalletSectionIllustration from './types'; | ||
|
|
||
| const useWalletSectionIllustration: UseWalletSectionIllustration = () => { | ||
| const styles = useThemeStyles(); |
There was a problem hiding this comment.
❌ PERF-4 (docs)
The object returned from this hook creates a new reference on every render, causing unnecessary re-renders of the Section component that receives these props.
Wrap the return value in useMemo:
import {useMemo} from 'react';
const useWalletSectionIllustration: UseWalletSectionIllustration = () => {
const styles = useThemeStyles();
return useMemo(() => ({
illustration: LottieAnimations.BankVault,
illustrationStyle: styles.walletLottieIllustration,
}), [styles.walletLottieIllustration]);
};
| const illustrations = useMemoizedLazyIllustrations(['BigVault'] as const); | ||
| const styles = useThemeStyles(); | ||
|
|
||
| return { |
There was a problem hiding this comment.
❌ PERF-4 (docs)
The object returned from this hook creates a new reference on every render, causing unnecessary re-renders of the Section component that receives these props.
Wrap the return value in useMemo:
return useMemo(() => ({
illustration: illustrations.BigVault,
illustrationStyle: styles.walletStaticIllustration,
}), [illustrations.BigVault, styles.walletStaticIllustration]);
Codecov Report✅ Changes either increased or maintained existing code coverage, great job!
|
|
Tested this locally desktop and mobile and it looks great! 👏 |
2 participants
Explanation of Change
This PR replaces the Lottie animations in Accout tab with static images on Web, with the purpose of lowering down the memory / cpu usage that is very high when using Lottie animations and impacts user's experience.
Fixed Issues
$ #76166
PROPOSAL:
Tests
Native
Web / mWeb
Offline tests
N/A
QA Steps
Same as Tests.
PR Author Checklist
### Fixed Issuessection aboveTestssectionOffline stepssectionQA stepssectioncanBeMissingparam foruseOnyxtoggleReportand notonIconClick)src/languages/*files and using the translation methodSTYLE.md) were followedAvatar, I verified the components usingAvatarare working as expected)StyleUtils.getBackgroundAndBorderStyle(theme.componentBG))npm run compress-svg)Avataris modified, I verified thatAvataris working as expected in all cases)Designlabel and/or tagged@Expensify/designso the design team can review the changes.ScrollViewcomponent to make it scrollable when more elements are added to the page.mainbranch was merged into this PR after a review, I tested again and verified the outcome was still expected according to theTeststeps.Screenshots/Videos
Android: Native
Screen.Recording.2025-11-30.at.13.01.43-compressed.mov
Android: mWeb Chrome
Screen.Recording.2025-11-30.at.13.04.31-compressed.mov
iOS: Native
Screen.Recording.2025-11-30.at.13.06.00-compressed.mov
iOS: mWeb Safari
Screen.Recording.2025-11-30.at.13.07.43-compressed.mov
MacOS: Chrome / Safari
Screen.Recording.2025-11-30.at.13.10.12-compressed.mov
Screen.Recording.2025-11-30.at.13.12.58-compressed.mov