[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 contributors@expensify.com 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>

[jeremy-croff]

Contributor details
Your Expensify account email: jeremycroff@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/~0110b241a714ae65fe

[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