Web - Features - Feature row in left side bar appears with delay after the page opens on the right

[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.61-0 Reproducible in staging?: y Reproducible in production?: n Issue reported by: Applause - Internal Team Issue found when executing PR: https://github.com/Expensify/App/pull/38546

Action Performed:

1. Go to staging.new.expensify.com
2. Go to Profile > Workspaces > Collect workspace.
3. Go to More features.
4. Toggle on any feature.

Expected Result:

The feature row in the left side bar will appear simultaneously with the feature page on the right.

Actual Result:

The feature row in the left side bar appears with delay after the feature page opens on the right.

Workaround:

n/a

Platforms:

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

• [ ] Android: Native
• [ ] Android: mWeb Chrome
• [ ] iOS: Native
• [ ] iOS: mWeb Safari
• [x] MacOS: Chrome / Safari
• [ ] MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

https://github.com/Expensify/App/assets/93399543/eefa4ea0-7bb4-4b5e-9bb2-2a3bd7e2a80e

View all open jobs on GitHub

[melvin-bot[bot]]

Triggered auto assignment to @stitesExpensify (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[kbecciv]

We think that this bug might be related to #wave-collect - Release 1

[github-actions[bot]]

:wave: Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[mountiny]

Related to more features page, taking over

[mountiny]

Do we have been back and forth on this one when developing https://github.com/Expensify/App/pull/38546

This is just how the animation works at the moment. I think its fine, curious for more opinions from @Expensify/design if we want to make any changes to this.

I would give this some time in the app, so we can feel it out before we make any further changes. cc @allroundexperts @rojiphil @allroundexperts

[dannymcclain]

I would give this some time in the app, so we can feel it out before we make any further changes.

I think I agree with you. This whole interaction has been pretty tricky. Maybe we should live with it for a minute before changing things up.

[shawnborton]

Yeah, that's fair. That being said, seeing it in this context makes me think we should try to make the whole thing feel slightly more "snappy" - right now it feels so slow and delayed that the difference between the row animating and the content pane already being there feels odd. So yeah, perhaps we just speed up some timing and breathe a little life into it?

[allroundexperts]

That'd require your (design teams) back and forth input. As far as dev work is concerned, It's just switching / fine tuning the timing till we have an agreement.

[dannymcclain]

So yeah, perhaps we just speed up some timing and breathe a little life into it?

@shawnborton Totally game for that—do you wanna do some timing prototypes or something like that in Slack so we can just report back with the final timing?

[allroundexperts]

Can you guys do this for all platforms? The timing would be different for each platform.

[dubielzyk-expensify]

do you wanna do some timing prototypes or something like that in Slack so we can just report back with the final timing?

Let's do it. I got a prototype for this interaction. I think there's a big difference in how this feels on mobile vs desktop. I'll start a thread

[mountiny]

Thank, making this weekly and assigned @allroundexperts to polish this once we decide the exact behaviour

[dubielzyk-expensify]

We've had a chat and here's where we ended up:

1. On desktop, turning a toggle ON should not navigate to the page, but play the left-hand navigation animation:

https://github.com/Expensify/App/assets/145416827/a73a3511-565b-4596-acdb-e352454512fc

2. On mobile, We should remove or drastically reduce the delay

https://github.com/Expensify/App/assets/145416827/a87d0284-116d-441c-a7c9-ba9d2c427a20

3. Tweak all animations:

Here are the timings I'm working with to ensure the above results you see in the video (which is basically what we want):

• Delay on navigating on mobile after turning toggle ON: 100ms
• Below you can see an illustration of how the animation works:

Hopefully that makes it clear, but let me know if you got any questions 😄

(Worth noting that when we say desktop we refer to the screensizes where you have the navigation showing on the left hand side. Mobile refers to where things collapses in showing one view at a time.)

[shawnborton]

Love it, thanks for laying this out so clearly Jon!

[mountiny]

@allroundexperts will you be able to tackle these?

[allroundexperts]

Yep. Will have a PR up tomorrow.

[mountiny]

Perfect, thanks!

[allroundexperts]

PR: https://github.com/Expensify/App/pull/40369

[melvin-bot[bot]]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[melvin-bot[bot]]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot[bot]]

The solution for this issue has been :rocket: deployed to production :rocket: in version 1.4.67-7 and is now subject to a 7-day regression period :calendar:. Here is the list of pull requests that resolve this issue:

• https://github.com/Expensify/App/pull/40369

If no regressions arise, payment will be issued on 2024-05-06. :confetti_ball:

For reference, here are some details about the assignees on this issue:

• @allroundexperts requires payment through NewDot Manual Requests

[allroundexperts]

This got reverted https://github.com/Expensify/App/pull/41176. There was an issue on native iOS that we were unable to catch. I'll create a new PR soon.

[sobitneupane]

@mountiny I reviewed the PR. Can you please assign me?

[allroundexperts]

@sobitneupane Please review the new PR.

https://github.com/Expensify/App/pull/42026

[melvin-bot[bot]]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot[bot]]

The solution for this issue has been :rocket: deployed to production :rocket: in version 1.4.77-11 and is now subject to a 7-day regression period :calendar:. Here is the list of pull requests that resolve this issue:

• https://github.com/Expensify/App/pull/42026

If no regressions arise, payment will be issued on 2024-06-06. :confetti_ball:

For reference, here are some details about the assignees on this issue:

• @sobitneupane requires payment through NewDot Manual Requests
• @allroundexperts requires payment through NewDot Manual Requests

[melvin-bot[bot]]

Issue is ready for payment but no BZ is assigned. @MitchExpensify you are the lucky winner! Please verify the payment summary looks correct and complete the checklist. Thanks!

[melvin-bot[bot]]

Payment Summary

Upwork Job

• Reviewer: @sobitneupane owed $250 via NewDot
• Reviewer: @allroundexperts owed $250 via NewDot

BugZero Checklist (@MitchExpensify)

• [x] I have verified the correct assignees and roles are listed above and updated the neccesary manual offers
• [x] I have verified that there are no duplicate or incorrect contracts on Upwork for this job (https://www.upwork.com/ab/applicants//hired)
• [x] I have paid out the Upwork contracts or cancelled the ones that are incorrect
• [x] I have verified the payment summary above is correct

[MitchExpensify]

Closing as all payments will be issued via NewDot

[JmillsExpensify]

$250 approved for @sobitneupane