[HOLD for payment 2024-02-07] [$500] iOS - back button position on skeleton loader and 'Hmm its not here' page is different

[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.4.29-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/4210614
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. Open the app
2. Login with any user and minimize the app
3. From any other app (eg: Slack, gmail) open any non existing link eg: staging.new.expensify.com/anything
4. Observe that when skeleton loader is displayed, back button position is slightly on right and when 'Hmm its not here' page is displayed, back button position is shifted slightly on left More explanation: https://applause-ts.slack.com/archives/G01CL838B8T/p1705942846594149

Expected Result:

App should keep a constant position for back button on all the pages

Actual Result:

Back button shifts slightly to left when page changes from skeleton loader to 'Hmm its not here' page

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

Bug6350889_1705948641200.iOS_back_button_issue.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~013b2a0aec800ce383
• Upwork Job ID: 1749515068968927232
• Last Price Increase: 2024-01-22
• Automatic offers:
• c3024 | Reviewer | 28120114
• dukenv0307 | Contributor | 28120116

[melvin-bot]

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

[melvin-bot]

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

[jeremy-croff]

Proposal

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

The layout shifts between the loading skeleton and the not found page.

What is the root cause of that problem?

The app uses a common Component. However the loading skeleton does not render this same component, it has it's own implementation where the styling differs.

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

We should update the ReportHeaderSkeletonView styling to match that of HeaderwithBackButton to get a consistent styling.

We should reuse the layout styling so that it's maintaing in one place.

What alternative solutions did you explore? (Optional)

[melvin-bot]

📣 @jeremy-croff! 📣
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. Make sure you've read and understood the contributing guidelines.
2. 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.
3. 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.
4. 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>

[melvin-bot]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[dukenv0307]

Proposal

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

Back button shifts slightly to left when page changes from skeleton loader to 'Hmm its not here' page

What is the root cause of that problem?

Let's see the back button of the header skeleton, it has padding-left is 20px

App/src/components/ReportHeaderSkeletonView.tsx

Line 28 in 616d75f

<View style={[styles.appContentHeaderTitle, !isSmallScreenWidth && styles.pl5]}>

While the back button icon of Not found page is wrapped in a view with 40px. The size of icon is 20x20 and it is in the center so it has 10px space on the left. Additionally, the wrap View of HeaderWithBackbutton has padding-left is 8px so it is 18px from the left margin

That is the root cause of this issue, the back icon of header skeleton is 20px from the left margin while it's 18px for the back icon of HeaderWithBackbutton

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

We should make this space consistent by changing the style of ReportHeaderSkeletonView to match the style of HeaderWithBackbutton. To do that we can use touchableButtonImage style for back icon wrapper as we do in HeaderWithBackbutton and then add pl2 style for the wrap View of skeleton

<View style={[styles.appContentHeader, styles.pl2]}>
            <View style={[styles.appContentHeaderTitle]}>
                {isSmallScreenWidth && (
                    <PressableWithFeedback
                        onPress={onBackButtonPress}
                        style={[styles.touchableButtonImage]}

App/src/components/ReportHeaderSkeletonView.tsx

Line 32 in e159ec7

style={[styles.LHNToggle]}

What alternative solutions did you explore? (Optional)

NA

[c3024]

Proposal here by @dukenv0307 looks good to me.

🎀 👀 🎀 C+ Reviewed

[melvin-bot]

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

[melvin-bot]

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

Offer link
Upwork job

[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 📖

[dukenv0307]

@c3024 The PR is ready for review.

[melvin-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]

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

[melvin-bot]

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

• Change style of header skeleton view to match with HeaderWithBackButton #35126

If no regressions arise, payment will be issued on 2024-02-07. 🎊

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

• @c3024 requires payment automatic offer (Reviewer)
• @dukenv0307 requires payment automatic offer (Contributor)

[melvin-bot]

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:

• [@c3024] The PR that introduced the bug has been identified. Link to the PR:
• [@c3024] 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:
• [@c3024] 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:
• [@c3024] Determine if we should create a regression test for this bug.
• [@c3024] 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.
• [] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[amyevans]

Hmm realizing we've never had a BZ assigned here

[melvin-bot]

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

[c3024]

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:

• [@c3024] The PR that introduced the bug has been identified. Link to the PR: This is a very minute style mismatch of the back arrow when not found page is displayed after a skeleton loading page. No specific PR needs to be held responsible.
• [@c3024] 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: NA
• [@c3024] 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: Not started because it cannot help in identifying this earlier.
• [@c3024] Determine if we should create a regression test for this bug. This is a minor style mismatch that occurs in a rare case. So, regression test is not required.
• [@c3024] 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. NA

[mkhutornyi]

Another regression - #35892

[JmillsExpensify]

@c3024 Do you agree with the regression comment above? If so, then I'll update the payment summary based on that.

[JmillsExpensify]

Quick reminder on the comment above.

[c3024]

Another regression - #35892

@JmillsExpensify

No, I don't think that regression was caused by PRs related to this issue. That was caused by a commit unrelated to this PR. Here is more information about it.

[JmillsExpensify]

Great, thank you! Payment summary as follows:

• Contributor: @dukenv0307 $500
• Contributor+: @c3024 $500

[JmillsExpensify]

All contributor offers paid and no regression test required. Closing this issue out!