Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

perf: fix significant memory consumption on web and desktop #41898

Merged
merged 5 commits into from
May 10, 2024
Merged

perf: fix significant memory consumption on web and desktop #41898

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
14c14f6
perf: avoid rendering null as FlashList render item which causes the …
hurali97 May 9, 2024
81f1f5a
perf: allow freezing the first screen on web and desktop. Without thi…
hurali97 May 9, 2024
140a02e
refactor: use dedicated platform files for platform dependent code
hurali97 May 10, 2024
3695e88
feat: add comments for why we need to render a placeholder view
hurali97 May 10, 2024
456fe95
feat: add descriptive comments for shouldSetScreenBlurred function
hurali97 May 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 8 additions & 7 deletions src/components/LHNOptionsList/OptionRowLHN.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,13 +51,19 @@ function OptionRowLHN({reportID, isFocused = false, onSelectRow = () => {}, opti
}, []),
);

const isInFocusMode = viewMode === CONST.OPTION_MODE.COMPACT;
const sidebarInnerRowStyle = StyleSheet.flatten<ViewStyle>(
isInFocusMode
? [styles.chatLinkRowPressable, styles.flexGrow1, styles.optionItemAvatarNameWrapper, styles.optionRowCompact, styles.justifyContentCenter]
: [styles.chatLinkRowPressable, styles.flexGrow1, styles.optionItemAvatarNameWrapper, styles.optionRow, styles.justifyContentCenter],
);

if (!optionItem) {
return null;
return <View style={sidebarInnerRowStyle} />;
hurali97 marked this conversation as resolved.
Show resolved Hide resolved
}

const hasBrickError = optionItem.brickRoadIndicator === CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR;
const shouldShowGreenDotIndicator = !hasBrickError && ReportUtils.requiresAttentionFromCurrentUser(optionItem, optionItem.parentReportAction);
const isInFocusMode = viewMode === CONST.OPTION_MODE.COMPACT;
const textStyle = isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText;
const textUnreadStyle = optionItem?.isUnread && optionItem.notificationPreference !== CONST.REPORT.NOTIFICATION_PREFERENCE.MUTE ? [textStyle, styles.sidebarLinkTextBold] : [textStyle];
const displayNameStyle = [styles.optionDisplayName, styles.optionDisplayNameCompact, styles.pre, textUnreadStyle, style];
Expand All @@ -66,11 +72,6 @@ function OptionRowLHN({reportID, isFocused = false, onSelectRow = () => {}, opti
: [textStyle, styles.optionAlternateText, styles.textLabelSupporting, style];

const contentContainerStyles = isInFocusMode ? [styles.flex1, styles.flexRow, styles.overflowHidden, StyleUtils.getCompactContentContainerStyles()] : [styles.flex1];
const sidebarInnerRowStyle = StyleSheet.flatten<ViewStyle>(
isInFocusMode
? [styles.chatLinkRowPressable, styles.flexGrow1, styles.optionItemAvatarNameWrapper, styles.optionRowCompact, styles.justifyContentCenter]
: [styles.chatLinkRowPressable, styles.flexGrow1, styles.optionItemAvatarNameWrapper, styles.optionRow, styles.justifyContentCenter],
);
const hoveredBackgroundColor = !!styles.sidebarLinkHover && 'backgroundColor' in styles.sidebarLinkHover ? styles.sidebarLinkHover.backgroundColor : theme.sidebar;
const focusedBackgroundColor = styles.sidebarLinkActive.backgroundColor;

Expand Down
9 changes: 4 additions & 5 deletions src/libs/Navigation/FreezeWrapper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import {useIsFocused, useNavigation, useRoute} from '@react-navigation/native';
import React, {useEffect, useRef, useState} from 'react';
import {Freeze} from 'react-freeze';
import {Platform} from 'react-native';
import type ChildrenProps from '@src/types/utils/ChildrenProps';

type FreezeWrapperProps = ChildrenProps & {
Expand All @@ -27,11 +28,9 @@ function FreezeWrapper({keepVisible = false, children}: FreezeWrapperProps) {
// if the screen is more than 1 screen away from the current screen, freeze it,
// we don't want to freeze the screen if it's the previous screen because the freeze placeholder
// would be visible at the beginning of the back animation then
if ((navigation.getState()?.index ?? 0) - (screenIndexRef.current ?? 0) > 1) {
setIsScreenBlurred(true);
} else {
setIsScreenBlurred(false);
}
const navigationIndex = (navigation.getState()?.index ?? 0) - (screenIndexRef.current ?? 0);
const shouldSetScreenBlurred = Platform.OS === 'android' || Platform.OS === 'ios' ? navigationIndex > 1 : navigationIndex >= 1;
hurali97 marked this conversation as resolved.
Show resolved Hide resolved
setIsScreenBlurred(shouldSetScreenBlurred);
});
return () => unsubscribe();
}, [isFocused, isScreenBlurred, navigation]);
Expand Down
Loading