[$125] iOS&Android - Profile - No skeleton placeholder on avatar while app is loading

[IuliiaHerets]

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: 9.0.38-0
Reproducible in staging?: Y
Reproducible in production?: Y
Issue was found when executing this PR: #48517
Email or phone of affected tester (no customers): [email protected]
Issue reported by: Applause Internal Team

Action Performed:

1. Launch New Expensify app.
2. Go to Account settings > Troubleshoot.
3. Tap Clear cache and restart.
4. Tap Reset and refresh.
5. Go to Profile while app is loading (or go offline after reset and refresh app if the app loads too fast).

Expected Result:

There will be skeleton placeholder on avatar while app is loading (mweb behavior).

Actual Result:

There is no skeleton placeholder on avatar while app is loading.

Workaround:

Unknown

Platforms:

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6608915_1726753452025.ScreenRecording_09-19-2024_21-40-26_1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021838053262759557407
• Upwork Job ID: 1838053262759557407
• Last Price Increase: 2024-09-23
• Automatic offers:
• suneox | Reviewer | 104110948
• abzokhattab | Contributor | 104110949

Issue Owner

Current Issue Owner: @suneox

[melvin-bot]

Triggered auto assignment to @greg-schroeder (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[IuliiaHerets]

@greg-schroeder FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[abzokhattab]

Proposal

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

iOS&Android - Profile - No skeleton placeholder on avatar while app is loading

What is the root cause of that problem?

the height of the SkeletonViewContentLoader is set, however the width is not set:

App/src/components/AvatarSkeleton.tsx

Lines 15 to 21 in ad3bf76

	return (
	<SkeletonViewContentLoader
	animate
	height={avatarSize}
	backgroundColor={theme.skeletonLHNIn}
	foregroundColor={theme.skeletonLHNOut}

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

add

            width={avatarSize}

POC:

What alternative solutions did you explore? (Optional)

[melvin-bot]

⚠️ Could not update price automatically because there is no linked Upwork Job ID. The BZ team member will need to update the price manually in Upwork.

[melvin-bot]

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

[melvin-bot]

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

[kaushiktd]

Proposal

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

iOS&Android - Profile - No skeleton placeholder on avatar while app is loading

What is the root cause of that problem?

For SkeletonViewContentLoader in react-content-loader, the width property is required for the skeleton to load. However, the width property is not set here.

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

You need to add width property to SkeletonViewContentLoader component. You can set custom width here.

ScreenShot

https://drive.google.com/file/d/1RTV-6YVzYawYKzlt7lhDVrmUtQJwA6uD/view?usp=sharing

[suneox]

@abzokhattab proposal LGTM

🎀 👀 🎀 C+ reviewed

[melvin-bot]

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

[melvin-bot]

📣 @suneox 🎉 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]

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

[MarioExpensify]

@abzokhattab proposal looks good, please move forward! Thanks @suneox

[melvin-bot]

@suneox, @greg-schroeder, @abzokhattab, @MarioExpensify Whoops! This issue is 2 days overdue. Let's get this updated quick!

[suneox]

@abzokhattab Could you please provide an ETA for the PR?

[abzokhattab]

Thanks !! The PR will be ready today or around tomorrow.

[greg-schroeder]

Thanks for the update @abzokhattab!

[abzokhattab]

The PR is ready.

[greg-schroeder]

Nice! Merged and on staging - awaiting deploy to prod