[Awaiting bugzero checklist and c+ newdot payment][$2000] Empty screen shows for a brief moment in change task assignee modal

[kavimuru]

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

---

Action Performed:

1. Go to any task report
2. Click Assignee field
3. Observe contacts list

Expected Result:

Contacts list shows immediately after skeleton

Actual Result:

Empty list shows for a brief moment before contacts list shows
Note: this doesn't happen in new task flow

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Platforms:

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

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: 1.3.45-2
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
Notes/Photos/Videos: Any additional supporting documentation

bug2.mov

YFCI4302.1.MP4

Expensify/Expensify Issue URL:
Issue reported by: @situchan
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1690261404929219

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0163bd3cb559f30da0
• Upwork Job ID: 1684109952842158080
• Last Price Increase: 2023-08-11
• Automatic offers:
• tienifr | Contributor | 26196168
• situchan | Reporter | 26196170

[melvin-bot]

Triggered auto assignment to @kadiealexander (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

[samh-nl]

Proposal

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

Empty screen shows for a brief moment in change task assignee modal

What is the root cause of that problem?

This problem is due to a combination of two factors:

1. A 200ms delay is added for loading the contacts list due to the search input debouncer:

App/src/pages/tasks/TaskAssigneeSelectorModal.js

Lines 99 to 105 in 8b23658

	useEffect(() => {
	const debouncedSearch = _.debounce(updateOptions, 200);
	debouncedSearch();
	return () => {
	debouncedSearch.cancel();
	};
	}, [updateOptions]);

2. The contacts list is only loaded after the animation transition has ended, adding a delay:

App/src/pages/tasks/TaskAssigneeSelectorModal.js

Line 196 in 8b23658

shouldShowOptions={didScreenTransitionEnd}

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

We should perform two changes:

1. updateOptions() should be called on mount.
2. Remove shouldShowOptions={didScreenTransitionEnd} so that it has its default value of true. Optionally replace with an isUpdatingOptions state that indicates completion of updateOptions().

The same problem seems to be present in TaskShareDestinationSelectorModal, SearchPage and the 2nd cause also in WorkspaceInvitePage.

Fixed result

chrome_LBiMPNYSaq.mp4

What alternative solutions did you explore? (Optional)

N/A

[kadiealexander]

Reproduced:

RPReplay_Final1690358026.MP4

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~0163bd3cb559f30da0

[melvin-bot]

Current assignee @kadiealexander is eligible for the External assigner, not assigning anyone new.

[melvin-bot]

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

[tienifr]

Proposal

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

Empty screen shows for a brief moment in change task assignee modal

What is the root cause of that problem?

When the transition ends we render the options but we have to wait some times (~200ms) to get data, that why we can see the empty page for a brief moment

App/src/pages/tasks/TaskAssigneeSelectorModal.js

Line 196 in 23a8a34

shouldShowOptions={didScreenTransitionEnd}

App/src/pages/tasks/TaskAssigneeSelectorModal.js

Lines 99 to 105 in 23a8a34

	useEffect(() => {
	const debouncedSearch = _.debounce(updateOptions, 200);
	debouncedSearch();
	return () => {
	debouncedSearch.cancel();
	};
	}, [updateOptions]);

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

When we're getting data we should show the skeleton

In order to do that I introduce the new variable const [isLoading, setIsLoading] = React.useState(true); and update it in updateOptions function

        if(isLoading){
            setIsLoading(false)
        }

and here

shouldShowOptions={didScreenTransitionEnd && !isLoading}

Note There're other places (TaskShareDestinationSelectorModal, SearchPage, ...) face this problem so we should to apply the above logic too

Result

Screen.Recording.2023-07-26.at.15.54.27.mov

[meesum1214]

Proposal

This is because state of skeleton is becoming false before the list contacts fetched from API completely. Its state should be false immediately when response arrives from API. Like this

getAllContacts(body)
      .then((res) => {
        setContacts(res.contacts);
        setLoader(false);
      })
      .catch((error) => {
        setLoader(false);
        console.log(error.response.data.message);
      });

About me:
I have 2+ years experience in ReactJS, NextJS, Tailwind CSS, NodeJS, Express, Sequelize, and databases like Postgres, MongoDB, and MySQL. Let's build beautiful and scalable web applications together!

Portfolio:
https://offroaddesertsafari.com/
https://kidzquran.vercel.app/
http://farmacie.agronomics.pk/
https://mintaweb.vercel.app/

Feel free to reach me out.

Best Regards,
Salman Naqvi

Contributor details
Your Expensify account email: salmannaqvi4641@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/salmannaqvi

[melvin-bot]

📣 @meesum1214! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
2. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
3. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[meesum1214]

Contributor details
Your Expensify account email: salmannaqvi461@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/salmannaqvi

[melvin-bot]

⚠️ Missing/invalid email or upwork profile link. Please make sure you add both your Expensify email and Upwork profile link in the format specified.

[sobitneupane]

Thanks for your proposal @samh-nl.

updateOptions() should be called on mount: For this, _.debounce has an immediate argument that should be set to true.

If we do so, updateOptions will be called after each keystroke which is not a wanted situation.

Remove shouldShowOptions={didScreenTransitionEnd} so that it has its default value of true.

I believe didScreenTransitionEnd was added with some intention. So, removing it completely doesn't look like a great idea. If you think didScreenTransitionEnd is not needed. Can you please link the PR where was it added and why it won't be required any longer.

@samh-nl Whenever you update your proposal, please follow the contributing guideline and use the following format:

## Proposal
[Updated](link to proposal)

[sobitneupane]

Thanks for the proposal @tienifr.

Note There're other places (TaskShareDestinationSelectorModal, SearchPage, ...) face this problem so we should to apply the above logic too

Can you please explain what problem TaskShareDestinationSelectorModal and SearchPage` has? I was unable to reproduce. Or I might be missing something.

@tienifr Can you also help me understand why the issue is reproducible here but not in Assignee selection in Create task flow?

[samh-nl]

Concern 1: updateOptions() vs immediate argument
Indeed thanks for spotting, calling updateOptions() inside the useEffect would be the preferred way, and not using the immediate argument of the debouncer because this changes its behavior. In my original post this was the approach used, until I changed it in a later edit.

Concern 2: didScreenTransitionEnd
It seems that the initial PR that created this component already uses it: #17992
I started a thread to gain a better understanding of the rationale behind the usage of this variable.

It's original purpose was to block autofocus until the animation has finished, as autofocus causes a drop in FPS during animation.
However, we're not doing that here. Autofocus is immediately applied: didScreenTransitionEnd does not affect autofocus timing in OptionsSelector and no shouldDelayFocus prop is given.

Perhaps delaying loading the data results in a smoother animation on mobile, I am not sure at this point.

Can you also help me understand why the issue is reproducible here but not in Assignee selection in Create task flow?

Are we sure that it is not reproducible there? It uses the same component and I see the same behavior.

[tienifr]

@sobitneupane

In

App/src/pages/tasks/TaskAssigneeSelectorModal.js

Lines 91 to 96 in 975146f

	setHeaderMessage(OptionsListUtils.getHeaderMessage(recentReports?.length + personalDetails?.length !== 0 || currentUserOption, Boolean(userToInvite), searchValue));
	setFilteredUserToInvite(userToInvite);
	setFilteredRecentReports(recentReports);
	setFilteredPersonalDetails(personalDetails);
	setFilteredCurrentUserOption(currentUserOption);

We call several setState functions. React sends the state update operation (performed by the function returned by useState) to a queue to be processed. So the execution time of these setState functions may depend on the previous one in the queue (come from previous screen) or other aspects.

I tried to calculate the total execution time of these setState functions in /new-task/assignee, and I realized that it's around 150ms at the first time, so we don't see the blank screen. But in /r/:reportID/assignee it's over 800ms that why we can see the empty screen shows for brief moment.

I also tried to calculate the execution time in /new-task/assignee in many different search values and they were so different.

Screen.Recording.2023-07-28.at.13.13.05.mp4

That why we should has isLoading value to check when the function get finished.

I'm so appreciate if someone can give me the more detail reason why this difference. Thanks a lot

[sobitneupane]

@samh-nl

Are we sure that it is not reproducible there? It uses the same component and I see the same behavior.

I am talking about the blank screen being displayed when we navigate to the assignee through the Task Report. We are trying to remove that blank screen.

But when we navigate to the assignee page through the Create Task flow (or Search Page, etc.), than we see the loader screen but not the blank. It's okay to have the loader screen as we have few delays as you mentioned on the proposal.

[sobitneupane]

@tienifr

Thanks for the analysis.

There is still some black area which we are unaware of on the Root Cause. Let's try to dig deeper.

[melvin-bot]

@sobitneupane, @kadiealexander Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[kadiealexander]

Not overdue, will consider bumping the price tomorrow if no additional proposals come through.

[melvin-bot]

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

[pradeepmdk]

@tienifr @sobitneupane @Beamanator @kadiealexander Thank you for everyone considering me as well. is there I am also eligible to get this bonus amount with Contributor?

because I also have the solution #23563 (comment) for this RCA.

[pradeepmdk]

@kadiealexander @Beamanator any updates

[sobitneupane]

@kadiealexander This was deployed to production 2 weeks ago and is ready for payment.

[sobitneupane]

Regression Test Proposal

1. Go to any task report
2. Click Assignee field
3. Verify contacts list shows immediately after skeleton and no blank page (empty screen) is displayed between skeleton and contact list.

Do we agree 👍 or 👎

[sobitneupane]

Requested payment on newDot.

#23563 (comment)

[JmillsExpensify]

@kadiealexander Can you please provide a payment summary?

[kadiealexander]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@sobitneupane] The PR that introduced the bug has been identified. Link to the PR:
• [@sobitneupane] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
• [@sobitneupane] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
• [@sobitneupane] Determine if we should create a regression test for this bug.
• [@sobitneupane] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@kadiealexander] Link the GH issue for creating/updating the regression test once above steps have been agreed upon: https://github.com/Expensify/Expensify/issues/315905

[pradeepmdk]

@kadiealexander could you able to check this

I def think it's fair to award for the RCA, what do you think @kadiealexander ?

#23563 (comment)
#23563 (comment)
because I also have the solution #23563 (comment) for this RCA.

I have the correct RCA and solution but I was not selected but @tienifr has the same solution only the earlier one so he selected it.

[kadiealexander]

@pradeepmdk we don't have a precedence for this, let me ask internally.

[pradeepmdk]

@kadiealexander Thank you.

I need some clarification on selecting the proposal.
I have correct both RCA and the solution but I have multiple solutions (one of them now selected for fixing).
@tienifr has a solution only correctly.

where i am missing in selecting my proposal here?

and due to #23563 (comment) being unclear of ROOT case only we are getting more proposals here

[kadiealexander]

I actually didn't pick the proposals, @sobitneupane could you please take a look at @pradeepmdk's question above?

[pradeepmdk]

#23563 (comment)
After selecting the proposal everybody including me.so I thought I was also part of this. but now I am missing.

I agree that @tienifr posted the solution first. I posted after #23563 (comment) and increased the bounty.

but now I only have both RCA and solution first.

😢

[tienifr]

As we mentioned above #23563 (comment) and #23563 (comment). I also believe we should give the bounty for @pradeepmdk because he found the correct RCA cc @kadiealexander @sobitneupane

[sobitneupane]

Yup. We have agreed on awarding bounty to @pradeepmdk . I am not sure what is the right amount but I vaguely remember paying 25% in such cases.

cc: @kadiealexander

[pradeepmdk]

Where i am missing in selecting my proposal here? #23563 (comment)

Let me know what I am missing in selecting my proposal here

still confusing here
@sobitneupane @Beamanator

#23563 (comment) As per this Root cause is unclear so we are getting more proposals and increasing the bountry.

As per this, I should be treated equally(including bouns) right?

[pradeepmdk]

any update

[kadiealexander]

We are discussing this internally @pradeepmdk, thanks for your patience.

[pradeepmdk]

@kadiealexander thanks for the update.

[kadiealexander]

@pradeepmdk our team has reviewed the situation and we feel it's fair to award you 25% of the contributor bounty for your assistance in determining the root cause of this bug. As you were not materially involved in proposing or implementing the chosen solution, we do not agree that the full 100% would be fair here.

Thanks again for your patience while we discussed this. Please apply here and we will get this paid out to you.

[kadiealexander]

@sobitneupane please don't forget about the first three points in the checklist here. Thanks!

[kadiealexander]

Resurfacing this and updating it since it got buried.

Payouts due:

• Issue Reporter: $250 @situchan
• Contributor: $2000 + $1000 bonus - @tienifr
• Contributor+: $2000 + $1000 bonus - @sobitneupane
• Bonus for RCA help: $500 - @pradeepmdk

Eligible for 50% #urgency bonus? Yes

Upwork job is here.

[pradeepmdk]

@kadiealexander Thank you

As you were not materially involved in proposing or implementing the chosen solution,

I proposed the solution here #23563 (comment) for chosen one.
I have both RCA and Solution.

[kadiealexander]

@pradeepmdk thank you for your additional information, however our decision here is final. I have sent you a contract in Upwork for the payment, please accept and I will ensure you are paid quickly. 😊

[pradeepmdk]

@kadiealexander I agree your decision is final. but it is still weird here because for no reason my RCA and solution were ignored. but no one has given me a solution as to why the proposal was not selected here.

[kadiealexander]

For clarity, @sobitneupane explained here why we preferred @tienifr's solution, even though your RCA was valuable here. I appreciate this was a competitive issue with lots of similar proposals, but ultimately our team reserves the right to choose the solution we believe is best.

[JmillsExpensify]

$3,000 payment for @sobitneupane approved based on BZ summary.