mWeb - The animation is not loading at all when use is offline

[kbecciv]

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.3.98.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:

Issue found when executing PR #30901

Action Performed:

1. Go to staging.new.expensify.com
2. Log in with any account
3. Disable the internet
4. Tab on Fab menu
5. Tap Save the world
6. Noticed - no animation is loaded
7. Tap on avatar
8. Tap on WS
9. Noticed - no animation is loaded
10. Go to Setting - Security
11. Noticed - no animation is loaded

Expected Result:

The animation is loading when user is offline

Actual Result:

The animation is not loading at all when use is offline

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

Screen_Recording_20231111_111412_Chrome.1.mp4

View all open jobs on GitHub

[kbecciv]

Issue is not reproducible on production

Screen_Recording_20231111_114023_Chrome.mp4

[OSBotify]

👋 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 @AndrewGable (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[kosmydel]

Hey,

it is related to this PR. As the animations were moved from the bundle to the assets, we don't load them on the app initialization to reduce TTI and bundle size. The animations are loaded as soon as the network is available. It is similar behavior to displaying an image.

[AndrewGable]

So @roryabraham - Is this expected now?

[roryabraham]

I think so, but TBH we didn't really discuss it broadly. I don't think we need to block deploy on this but should probably have a conversation about it. Maybe we can inline the .lottie assets using asset/inline instead of asset/resource?

[roryabraham]

Just changing asset/resource to asset/inline doesn't work out-of-the-box, so more research will be needed to try to preload / inline lottie assets.

[roryabraham]

I'd say this is a weekly, TBD if it's really a problem we need to solve or not. Some thoughts:

• It might be even less of a problem when we get offline browser-level image caching set up
• Maybe we could get an SVG snapshot of each animation that's inlined in the HTML and display that while the lottie animation is loading
• Or maybe we can find a way to either inline or preload .lottie assets. If we could preload them like fonts when the page loads that could be a good way to address the problem
• Someday we could also look at setting up service workers in our app to build better cross-session browser caching of all assets.

I think if we get good caching and potentially also preload .lottie assets like we do for our web fonts, we could eliminate most scenarios where a user could possibly see this type of bug or similar bugs where there's a delay before the animation loads.