[Ready for payment][$500] Chat - Skeleton in the header is not aligned with skeleton in the chat

[izarutskaya]

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: v.1.4-37.0
Reproducible in staging?: Y
Reproducible in production?: N
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. Log out if logged in.
2. Log in to staging.new.expensify.com
3. Note that skeleton in the header.

Expected Result:

The skeleton in the header has the same alignment to the left as the skeleton in the chat.

Actual Result:

The skeleton in the header has extra margin on the left compared to the skeleton in the header.

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

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01455b0defb7af246c
• Upwork Job ID: 1754825370662596608
• Last Price Increase: 2024-02-06
• Automatic offers:
• bernhardoj | Contributor | 0

Issue Owner

Current Issue Owner: @thesahindia

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01455b0defb7af246c

[melvin-bot]

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

[melvin-bot]

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

[github-actions]

👋 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.

[melvin-bot]

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

[izarutskaya]

We think that this bug might be related to #vip-vsb
CC @quinthar

[bernhardoj]

Proposal

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

The header skeleton has extra left space.

What is the root cause of that problem?

The extra space is coming from the padding style here.

App/src/pages/home/HeaderView.js

Lines 239 to 241 in ff23077

	<View style={[styles.appContentHeaderTitle, !isSmallScreenWidth && styles.pl5]}>
	{isLoading ? (
	<ReportHeaderSkeletonView onBackButtonPress={props.onNavigationMenuButtonClicked} />

Previously, the padding is only added if the header is not loading, but after the ideal nav, specifically this commit, the loading condition is removed.

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

Add the padding only if the header is not loading.

!isSmallScreenWidth && !isLoading && styles.pl5

[ZhenjaHorbach]

Looks like a regression from this PR
#35643

[rlinoz]

Demoting, not a blocker.

[eucool]

Proposal

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

Skeleton in the header is not aligned with skeleton in the chat

What is the root cause of that problem?

We apply padding to the element even if it is still loading:

App/src/pages/home/HeaderView.js

Lines 238 to 242 in ff23077

	<View style={[styles.appContentHeader]}>
	<View style={[styles.appContentHeaderTitle, !isSmallScreenWidth && styles.pl5]}>
	{isLoading ? (
	<ReportHeaderSkeletonView onBackButtonPress={props.onNavigationMenuButtonClicked} />
	) : (

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

Add one more extra condition in style prop !isLoading and then padding will only apply when the screen has fully loaded

What alternative solutions did you explore? (Optional)

N/A

As mentioned by @ZhenjaHorbach this is a regression from #35643

[askavyblr]

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

Skeleton in the header is not aligned with skeleton in the chat

What is the root cause of that problem?

Need to reduce padding at a time of loading

What changes do you think we should make in order to solve the problem?
File : HeaderView.js
At line no 239 need to reduce padding

What alternative solutions did you explore? (Optional)
N/A

[melvin-bot]

📣 @askavyblr! 📣
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]

📣 @bernhardoj 🎉 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 📖

[bernhardoj]

PR is ready

cc: @thesahindia

[melvin-bot]

This issue has not been updated in over 15 days. @rlinoz, @bernhardoj, @kadiealexander, @thesahindia eroding to Monthly issue.

P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!

[rlinoz]

huumm the PR is in production already, the automation wasn't triggered I guess

@kadiealexander can you handle the payment on this one, please?

[bernhardoj]

@kadiealexander bump for the payment

[kadiealexander]

Sorry guys, this one slipped through the cracks!

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

• [@thesahindia] The PR that introduced the bug has been identified. Link to the PR:
• [@thesahindia] 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:
• [@thesahindia] 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:
• [@thesahindia] Determine if we should create a regression test for this bug.
• [@thesahindia] 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:

[kadiealexander]

Payment Summary

Upwork Job

• Reviewer: @thesahindia owed $500 via NewDot
• Contributor: @bernhardoj owed 500 via Upwork

BugZero Checklist (@kadiealexander)

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

[thesahindia]

It was caused by #33280. It was a big PR so not sure if we could have prevented this.

I don't think we need a specific test case for this.

[kadiealexander]

Payment summary for Newdot payer here.

[JmillsExpensify]

$500 approved for @thesahindia

[bernhardoj]

@kadiealexander hey, sorry, but I was checking my upwork and saw I haven't gotten paid for this one yet. The upwork offer link from this comment leads to this offer which I ended the contract just now because I don't work on #38935, so I thought it's an offer error.

I also see there is this old offer which is the correct one. Can you please recheck?

[kadiealexander]

Sorry about that @bernhardoj! I've paid this for you.

[bernhardoj]

Thanks!