[$500] IOU - In request money, all contacts below are displayed only after few seconds

[lanitochka17]

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.3.88-3

Reproducible in staging?: Yes

Reproducible in production?: Yes

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:

1. Launch app
2. Tap request money---manual
3. Enter an amount
4. Tap next and observe contacts below

Expected Result:

In request money, in contacts selection page, all contacts in contacts section below must be displayed immediately without delay

Actual Result:

In request money, in contacts selection page, the contacts below are displayed only after few seconds. Below in contacts section, only 2 contacts are shown and only after few seconds all contacts are displayed

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

Android: Native

Bug6245851_1697920307663.use.mp4

Android: mWeb Chrome

iOS: Native

iOS: mWeb Safari

MacOS: Chrome / Safari

MacOS: Desktop

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~016bc9faaeaf508c70
• Upwork Job ID: 1715849601111867392
• Last Price Increase: 2023-10-21

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~016bc9faaeaf508c70

[melvin-bot]

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

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[melvin-bot]

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

[bernhardoj]

Proposal

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

I see 2 issues here.
First, the list is initially empty when we open the money request participant selection page.
Second, the contact section only shows 2 contacts initially, and after a few seconds, it shows the rest.

What is the root cause of that problem?

For the first issue, the participant list depends on newChatOptions state which initially contains empty data, so we see an empty list first.

App/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js

Lines 90 to 94 in cb5aeb1

	const [newChatOptions, setNewChatOptions] = useState({
	recentReports: [],
	personalDetails: [],
	userToInvite: null,
	});

The data will be populated in this useEffect.

App/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js

Lines 216 to 245 in cb5aeb1

	useEffect(() => {
	const chatOptions = OptionsListUtils.getFilteredOptions(
	reports,
	personalDetails,
	betas,
	searchTerm,
	participants,
	CONST.EXPENSIFY_EMAILS,
	// If we are using this component in the "Request money" flow then we pass the includeOwnedWorkspaceChats argument so that the current user
	// sees the option to request money from their admin on their own Workspace Chat.
	iouType === CONST.IOU.TYPE.REQUEST,
	// We don't want to include any P2P options like personal details or reports that are not workspace chats for certain features.
	!isDistanceRequest,
	false,
	{},
	[],
	false,
	{},
	[],
	true,
	true,
	);
	setNewChatOptions({
	recentReports: chatOptions.recentReports,
	personalDetails: chatOptions.personalDetails,
	userToInvite: chatOptions.userToInvite,
	});
	}, [betas, reports, participants, personalDetails, translate, searchTerm, setNewChatOptions, iouType, isDistanceRequest]);

For the second issue, it's related to the initialNumToRender number we set on the list that is too small (12) to fill the whole screen. This means that our participant list has more than 12 items to be rendered.

App/src/components/OptionsList/BaseOptionsList.js

Line 277 in cb5aeb1

initialNumToRender={12}

Those list item includes the section header and footer, even if we don't set them.

Because the initialNumToRender is 12, we only see the first 12 items initially. Below is an image to show those 12 items.

If you notice, it only sums up to 10. So, where are the other 2 items? Those 2 items are the header and footer of the first section on the list that has empty data.

App/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js

Lines 107 to 117 in cb5aeb1

	const formatResults = OptionsListUtils.formatSectionsFromSearchTerm(
	searchTerm,
	participants,
	newChatOptions.recentReports,
	newChatOptions.personalDetails,
	personalDetails,
	true,
	indexOffset,
	);
	newSections.push(formatResults.section);
	indexOffset = formatResults.newIndexOffset;

Notice that we always push it into the section array without any checking.

The first section is the selected participant which is obviously empty when we haven't selected anyone yet

This issue happens on the new chat page too

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

For the first issue, instead of using both useState and useEffect, we can replace them with useMemo.

const newChatOptions = useMemo(() => {
    const chatOptions = OptionsListUtils.getFilteredOptions(...);
    return {recentReports: chatOptions.recentReports, personalDetails: chatOptions.personalDetails, userToInvite: chatOptions.userToInvite};
}, [betas, reports, participants, personalDetails, translate, searchTerm, iouType, isDistanceRequest]);

For the second issue, either increase the initialNumToRender (to 15 for example) or don't push the section if the data is empty.

+if (participants.length > 0) {
    const formatResults = OptionsListUtils.formatSectionsFromSearchTerm(...);
    newSections.push(formatResults.section);
    indexOffset = formatResults.newIndexOffset;
+}

same solutions applies to NewChatPage

[joekaufmanexpensify]

Going to triage today!

[joekaufmanexpensify]

I'm unable to reproduce this. Opening of contacts is quick for me on android native.

2023-10-23_18-07-29.mp4

[joekaufmanexpensify]

Closing as this isn't consistently reproducible!

[bernhardoj]

@joekaufmanexpensify hi, the issue is still constantly reproducible.

Notice that the list is initially empty and when it's shown, only a few contacts are visible.

This is how it looks after the fix:

Screen.Recording.2023-10-24.at.10.42.22.mov

[bernhardoj]

@joekaufmanexpensify what do you think from my previous comment?

[joekaufmanexpensify]

Got it. I still don't think this warrants doing anything. There's no impact to the user experience here. We just aren't showing all of the contacts in the brief moment before the android keyboard opens. If you close the keyboard, you can still see all contacts.