[HOLD for payment 2024-03-06] [$500] Date of birth - Lower portion of year in the list only appears after some delay

[kbecciv]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 1.4.27-1
Reproducible in staging?: y
Reproducible in production?: y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: Applause - Internal team
Slack conversation:

Action Performed:

Precondition: User has not set a birth date.

1. Go to Settings > Profile.
2. Go to Personal details.
3. Go to Date of birth.
4. Click Year.

Expected Result:

The list of years will appear without delay.

Actual Result:

The lower portion of year in the list only appears after some delay.

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6346934_1705606156600.20240118_205138.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~013e5606f3817f8af2
• Upwork Job ID: 1748069670930415616
• Last Price Increase: 2024-01-25
• Automatic offers:
• dukenv0307 | Contributor | 0

[melvin-bot]

Triggered auto assignment to @greg-schroeder (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

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

[melvin-bot]

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

[ZhenjaHorbach]

Proposal

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

Date of birth - Lower portion of year in the list only appears after some delay

What is the root cause of that problem?

The main problem with issue is that we have problem with optimization on this screen
Since the selected year is by default at the end of the list and to show a lot of elements SelectionList needs more time as a result we have empty space

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

To fix this issue we can pass shouldUseDynamicMaxToRenderPerBatch for SelectionList

App/src/components/DatePicker/CalendarPicker/YearPickerModal.js

Lines 74 to 87 in de639e0

	<SelectionList
	shouldDelayFocus
	textInputLabel={translate('yearPickerPage.selectYear')}
	textInputValue={searchText}
	textInputMaxLength={4}
	onChangeText={(text) => setSearchText(text.replace(CONST.REGEX.NON_NUMERIC, '').trim())}
	inputMode={CONST.INPUT_MODE.NUMERIC}
	headerMessage={headerMessage}
	sections={sections}
	onSelectRow={(option) => props.onYearChange(option.value)}
	initiallyFocusedOptionKey={props.currentYear.toString()}
	showScrollIndicator
	shouldStopPropagation
	/>

The same param we use for StateSelectorModal or CountrySelectionPage ( We had the same problem in these places )

Also I think we can check other place where we use SelectionList and enable this param
Or enable this param by default

What alternative solutions did you explore? (Optional)

NA

Before

Screen.Recording.2024-01-19.at.08.30.28.mov

After

Screen.Recording.2024-01-19.at.08.31.06.mov

[muas19]

Proposal

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

Delay to populate the list of years in Date of birth field

What is the root cause of that problem?

When selecting the D.O.B in settings page, we are using a wrong prop variable for minDate and maxDate:
minDate={subYears(new Date(), CONST.DATE_BIRTH.MAX_AGE)} maxDate={subYears(new Date(), CONST.DATE_BIRTH.MIN_AGE)} />
In this file DateOfBirthPage.js

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

We should change the prop types to expect constants as follows:
<InputWrapper ... minDate={CONST.minDate} maxDate={CONST.maxDate} />

What alternative solutions did you explore? (Optional)

N/A

Screenshot:

Screen.Recording.2024-01-22.at.10.09.26.PM.mov

[dukenv0307]

Proposal

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

The lower portion of year in the list only appears after some delay.

What is the root cause of that problem?

The year 2019 is selected by default on this screen, it's the last year in the list so it takes time for the list to render all elements up to that year, causing the blank issue.

We have an UX issue on this page:

1. The list is currently from the furthest years (1874) till the most recent years, this is not ideal because most users of our app is less that 70 years old, means most of them will have to scroll at least half the list to get to their potential years, the youngest users have to scroll almost the entire list to get to their years

2. The default selected option is 2019, which means we're expecting the default user of our app is 5 years old which is not realistic.

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

1. The list should be designed in a way that the most selected items should be on top to minimize user scrolling and unnecessary rendering. This means we need to display the most recent years first, and then the further in the list is further years. We can just reverse the years list to do this (or order from largest to smallest number). We can also add a prop like shouldOrderYearByMostRecent to control this if we want to.

2. According to this discussion, we want to set it to current year, to do that we just need to set MIN_AGE to 0 here, I've tested and the back-end will accept that date.

3. We can add shouldUseDynamicMaxToRenderPerBatch to SelectionList in YearPickerModal to mitigate this problem a little, but this will cause more intensive browser CPU usage when first load the list. So I prefer to also fix the UX issue above that leads to this problem.

What alternative solutions did you explore? (Optional)

NA

[greg-schroeder]

Awaiting proposal review @sobitneupane 👍