[HOLD for payment 2024-10-08] [$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 contributors@expensify.com 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): applausetester+kh010901@applause.expensifail.com
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