[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 [email protected] 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 👍

[muas19]

Proposal

[Updated] #34763 (comment) With Screenshot

[sobitneupane]

I am working partially this week. I will try to review the proposals before weekend.

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[greg-schroeder]

Let us know if you need help or could use a re-assignment on this one @sobitneupane!

[DylanDylann]

I can take over this issue as C+ contributor if @sobitneupane is unavailable

[sobitneupane]

I am back and will review the proposal by EOD tomorrow.

[greg-schroeder]

Thanks Sobit!

[sobitneupane]

Thanks for the proposal everyone.

Proposal from @ZhenjaHorbach looks good to me. Dynamic maxToRenderPerBatch was implemented by this PR. @ZhenjaHorbach let's look for other component using SectionList which has similar problem.

[melvin-bot]

Triggered auto assignment to @tgolen, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[sobitneupane]

Thank you @tgolen @mountiny for your valuable inputs.

We have discussed above about the @dukenv0307's proposal and all of us believe it is good to make some UX changes in the page. So, we are good to go with @dukenv0307's proposal.

🎀 👀 🎀 C+ reviewed

[melvin-bot]

Current assignee @tgolen is eligible for the choreEngineerContributorManagement assigner, not assigning anyone new.

[melvin-bot]

@tgolen @sobitneupane @greg-schroeder this issue is now 3 weeks old. There is one more week left before this issue breaks WAQ and will need to go internal. What needs to happen to get a PR in review this week? Please create a thread in #expensify-open-source to discuss. Thanks!

[melvin-bot]

📣 @dukenv0307 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[melvin-bot]

@tgolen, @sobitneupane, @greg-schroeder, @dukenv0307 Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[tgolen]

Daily Update:

• A contributor was selected and it is waiting for a PR to be drafted. @dukenv0307 do you think that will be coming soon?

[tgolen]

Daily Update

• @dukenv0307 Do you have an idea of when you can start on a PR for this?

[dukenv0307]

Will raise the PR soon after going back from a national holiday on the 15th.

[melvin-bot]

@tgolen @sobitneupane @greg-schroeder @dukenv0307 this issue is now 4 weeks old and preventing us from maintaining WAQ, can you:

• Decide whether any proposals currently meet our guidelines and can be approved as-is today
• If no proposals meet that standard, please take this issue internal and treat it as one of your highest priorities
• If you have any questions, don't hesitate to start a discussion in #expensify-open-source

Thanks!

[melvin-bot]

Current assignee @sobitneupane is eligible for the Internal assigner, not assigning anyone new.

[dukenv0307]

I'm working on this issue now, will raise PR soon

[greg-schroeder]

This was merged and deployed to prod 2/28, payment date would be 3/6

[greg-schroeder]

@dukenv0307 - $500 - C
@sobitneupane - $500 - C+

[greg-schroeder]

Paid, and Sobit you can make a manual request!

[JmillsExpensify]

$500 approved for @sobitneupane based on summary.