Skip to content

perf: bottom bar switching and search #64995

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

Merged
mountiny merged 4 commits into from
Jun 27, 2025
Merged

perf: bottom bar switching and search #64995

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8dc2476
perf: bottom tabs
martasudol Jun 26, 2025
f2984be
perf: bottom tabs
martasudol Jun 26, 2025
2d92dea
perf: bottom tabs
martasudol Jun 26, 2025
ff26b84
perf: bottom tabs
martasudol Jun 26, 2025
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
4 changes: 2 additions & 2 deletions src/components/AccountSwitcher.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ function AccountSwitcher({isScreenFocused}: AccountSwitcherProps) {
const {isOffline} = useNetwork();
const {shouldUseNarrowLayout} = useResponsiveLayout();
const [account] = useOnyx(ONYXKEYS.ACCOUNT, {canBeMissing: true});
const [session] = useOnyx(ONYXKEYS.SESSION, {canBeMissing: false});
const [accountID] = useOnyx(ONYXKEYS.SESSION, {canBeMissing: false, selector: (onyxSession) => onyxSession?.accountID});

@rushatgabhane rushatgabhane Jun 27, 2025 •
edited
Loading

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Did we get a 1s improvement in time to render?

The changes look good to me!

I'm wondering if we should make this as a recommendation to prefer selecting data if you need less than ~3 keys from an onyx object that changes a lot (eg: session, account)

@mountiny mountiny Jun 27, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

+1, lets make sure we capture these ideas and make them into best practices, better yet, custom eslint rules @adhorodyski

const buttonRef = useRef<HTMLDivElement>(null);
const {windowHeight} = useWindowDimensions();

Expand Down Expand Up @@ -230,7 +230,7 @@ function AccountSwitcher({isScreenFocused}: AccountSwitcherProps) {
style={[styles.textLabelSupporting, styles.mt1, styles.w100]}
numberOfLines={1}
>
AccountID: {session?.accountID}
AccountID: {accountID}
</Text>
)}
</View>
Expand Down
2 changes: 1 addition & 1 deletion src/components/Search/FilterDropdowns/DropdownButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,7 +140,7 @@ function DropdownButton({label, value, viewportOffsetTop, PopoverComponent}: Dro
height: CONST.POPOVER_DROPDOWN_MIN_HEIGHT,
}}
>
{PopoverComponent({closeOverlay: toggleOverlay})}
{isOverlayVisible && <PopoverComponent closeOverlay={toggleOverlay} />}
</PopoverWithMeasuredContent>
</>
);
Expand Down
12 changes: 6 additions & 6 deletions src/components/Search/FilterDropdowns/UserSelectPopup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,13 +41,13 @@ function UserSelectPopup({value, closeOverlay, onChange}: UserSelectPopupProps)
const personalDetails = usePersonalDetails();
const {windowHeight} = useWindowDimensions();
const {shouldUseNarrowLayout} = useResponsiveLayout();
const [session] = useOnyx(ONYXKEYS.SESSION, {canBeMissing: true});
const [accountID] = useOnyx(ONYXKEYS.SESSION, {canBeMissing: true, selector: (onyxSession) => onyxSession?.accountID});

const [searchTerm, debouncedSearchTerm, setSearchTerm] = useDebouncedState('');
const [isSearchingForReports] = useOnyx(ONYXKEYS.IS_SEARCHING_FOR_REPORTS, {initWithStoredValues: false, canBeMissing: true});
const [selectedOptions, setSelectedOptions] = useState<Option[]>(() => {
return value.reduce<OptionData[]>((acc, accountID) => {
const participant = personalDetails?.[accountID];
return value.reduce<OptionData[]>((acc, id) => {
const participant = personalDetails?.[id];
if (!participant) {
return acc;
}
Expand Down Expand Up @@ -90,17 +90,17 @@ function UserSelectPopup({value, closeOverlay, onChange}: UserSelectPopupProps)
}))
.sort((a, b) => {
// Put the current user at the top of the list
if (a.accountID === session?.accountID) {
if (a.accountID === accountID) {
return -1;
}
if (b.accountID === session?.accountID) {
if (b.accountID === accountID) {
return 1;
}
return 0;
});

return [...(personalDetailList ?? []), ...(recentReports ?? [])];
}, [cleanSearchTerm, options.personalDetails, options.reports, selectedOptions, session?.accountID]);
}, [cleanSearchTerm, options.personalDetails, options.reports, selectedOptions, accountID]);

const {sections, headerMessage} = useMemo(() => {
const newSections: Section[] = [
Expand Down
8 changes: 4 additions & 4 deletions src/components/Search/SearchPageHeader/SearchFiltersBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ function SearchFiltersBar({queryJSON, headerButtonsOptions}: SearchFiltersBarPro
const {shouldUseNarrowLayout} = useResponsiveLayout();
const {selectedTransactions, setExportMode, isExportMode, shouldShowExportModeOption, shouldShowFiltersBarLoading} = useSearchContext();

const [session] = useOnyx(ONYXKEYS.SESSION, {canBeMissing: true});
const [email] = useOnyx(ONYXKEYS.SESSION, {canBeMissing: true, selector: (onyxSession) => onyxSession?.email});
const [userCardList] = useOnyx(ONYXKEYS.CARD_LIST, {canBeMissing: true});
const [reports] = useOnyx(ONYXKEYS.COLLECTION.REPORT, {canBeMissing: false});
const [allPolicies] = useOnyx(ONYXKEYS.COLLECTION.POLICY, {canBeMissing: true});
Expand All @@ -67,16 +67,16 @@ function SearchFiltersBar({queryJSON, headerButtonsOptions}: SearchFiltersBarPro
const [policyCategories] = useOnyx(ONYXKEYS.COLLECTION.POLICY_CATEGORIES, {canBeMissing: true});
const [workspaceCardFeeds] = useOnyx(ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST, {canBeMissing: true});
const [selectionMode] = useOnyx(ONYXKEYS.MOBILE_SELECTION_MODE, {canBeMissing: true});
const [currentSearchResults] = useOnyx(`${ONYXKEYS.COLLECTION.SNAPSHOT}${hash}`, {canBeMissing: true});
const [searchResultsErrors] = useOnyx(`${ONYXKEYS.COLLECTION.SNAPSHOT}${hash}`, {canBeMissing: true, selector: (data) => data?.errors});

const taxRates = getAllTaxRates();
const allCards = useMemo(() => mergeCardListWithWorkspaceFeeds(workspaceCardFeeds ?? CONST.EMPTY_OBJECT, userCardList), [userCardList, workspaceCardFeeds]);
const selectedTransactionsKeys = useMemo(() => Object.keys(selectedTransactions ?? {}), [selectedTransactions]);

const hasErrors = Object.keys(currentSearchResults?.errors ?? {}).length > 0 && !isOffline;
const hasErrors = Object.keys(searchResultsErrors ?? {}).length > 0 && !isOffline;
const shouldShowSelectedDropdown = headerButtonsOptions.length > 0 && (!shouldUseNarrowLayout || (!!selectionMode && selectionMode.isEnabled));

const typeOptions = useMemo(() => getTypeOptions(allPolicies, session?.email), [allPolicies, session?.email]);
const typeOptions = useMemo(() => getTypeOptions(allPolicies, email), [allPolicies, email]);

const filterFormValues = useMemo(() => {
return buildFilterFormValuesFromQuery(queryJSON, policyCategories, policyTagsLists, currencyList, personalDetails, allCards, reports, taxRates);
Expand Down
2 changes: 1 addition & 1 deletion src/pages/home/sidebar/FloatingActionButtonAndPopover.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ function FloatingActionButtonAndPopover({onHideCreateMenu, onShowCreateMenu, isT
const {translate} = useLocalize();
const [isLoading = false] = useOnyx(ONYXKEYS.IS_LOADING_APP, {canBeMissing: true});
const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {canBeMissing: true});
const [session] = useOnyx(ONYXKEYS.SESSION, {canBeMissing: false});
const [session] = useOnyx(ONYXKEYS.SESSION, {canBeMissing: false, selector: (onyxSession) => ({email: onyxSession?.email, accountID: onyxSession?.accountID})});
const [quickAction] = useOnyx(ONYXKEYS.NVP_QUICK_ACTION_GLOBAL_CREATE, {canBeMissing: true});
const [quickActionReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${quickAction?.chatReportID}`, {canBeMissing: true});
const [reportNameValuePairs] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS}${quickActionReport?.reportID}`, {canBeMissing: true});
Expand Down
Loading