diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts index 142b319240f1..80a773e344db 100644 --- a/src/libs/ReportUtils.ts +++ b/src/libs/ReportUtils.ts @@ -1887,14 +1887,29 @@ function getIconsForParticipants(participants: number[], personalDetails: OnyxIn return avatars; } +/** + * Cache the workspace icons + */ +const workSpaceIconsCache = new Map(); + /** * Given a report, return the associated workspace icon. */ function getWorkspaceIcon(report: OnyxInputOrEntry, policy?: OnyxInputOrEntry): Icon { const workspaceName = getPolicyName(report, false, policy); - const policyExpenseChatAvatarSource = allPolicies?.[`${ONYXKEYS.COLLECTION.POLICY}${report?.policyID}`]?.avatarURL - ? allPolicies?.[`${ONYXKEYS.COLLECTION.POLICY}${report?.policyID}`]?.avatarURL - : getDefaultWorkspaceAvatar(workspaceName); + const cacheKey = report?.policyID ?? workspaceName; + const iconFromCache = workSpaceIconsCache.get(cacheKey); + const avatarURL = allPolicies?.[`${ONYXKEYS.COLLECTION.POLICY}${report?.policyID}`]?.avatarURL; + + const isSameAvatarURL = iconFromCache?.icon?.source === avatarURL; + const isDefaultWorkspaceAvatar = !avatarURL && typeof iconFromCache?.icon?.source !== 'string'; + const hasWorkSpaceNameChanged = iconFromCache?.name !== workspaceName; + if (iconFromCache && (isSameAvatarURL || isDefaultWorkspaceAvatar) && !hasWorkSpaceNameChanged) { + return iconFromCache.icon; + } + // `avatarURL` can be an empty string, so we have to use || operator here + // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing + const policyExpenseChatAvatarSource = avatarURL || getDefaultWorkspaceAvatar(workspaceName); const workspaceIcon: Icon = { source: policyExpenseChatAvatarSource ?? '', @@ -1902,6 +1917,7 @@ function getWorkspaceIcon(report: OnyxInputOrEntry, policy?: OnyxInputOr name: workspaceName, id: report?.policyID, }; + workSpaceIconsCache.set(cacheKey, {name: workspaceName, icon: workspaceIcon}); return workspaceIcon; }