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.

[roryabraham]

I also think maybe we should put this on HOLD, consolidate discussion in #28160, and treat that as a tracking issue

[AndrewGable]

On hold

[roryabraham]

#28160 is closed, but I think we can reasonably put this on HOLD for offline image caching, namely #11425

[roryabraham]

I think it would also be good to get @kosmydel to look into this to see if it can be fixed independently of necolas/react-native-web#2442

[roryabraham]

Brought this up in slack: https://expensify.slack.com/archives/C04878MDF34/p1701305502798839

[roryabraham]

@kosmydel provided an exciting update in the thread. I'm going to put this on HOLD for #31196, because both issues share a common solution.

[roryabraham]

Co-assigning myself as I have good context here

[roryabraham]

We've got a WIP PR for this here

[roryabraham]

Prefetching is not working, but for me image caching is not working in production at all. That's still being tracked over here, so I'm putting this on HOLD for that

[kosmydel]

Prefetching is not working, but for me image caching is not working in production at all. That's still being tracked over here, so I'm putting this on HOLD for that

@roryabraham I'm sorry to hear that. I've quickly tested it on the production, and both prefetching and caching work for me:

production.mov

Can you please give me additional information about the method you use to test it?

[kosmydel]

Ok, I probably found out the reason for that. I assume you use Safari, not Chrome. And prefetching is not supported by Safari. It is hidden behind the feature flag.

[roryabraham]

Oh, sorry for the typo @kosmydel – I meant to say that prefetching is now working but online caching was not. Bad mistake to make...

and nope, I'm using Chrome.

[roryabraham]

And I'm now realizing that this issue is indeed fixed – I made yet another mistake because I had disable caching checked in the network tab. Unchecking that fixed this issue too.

Thanks for all your work here @kosmydel, closing this out!

[kosmydel]

Oh, sorry for the typo @kosmydel – I meant to say that prefetching is now working but online caching was not. Bad mistake to make...

and nope, I'm using Chrome.

Oh, thanks for the clarification! Good to know that everything is working!