[HOLD for payment 2024-01-03] Settings - Animation in Settings is not smooth: background comes first then the animation

[lanitochka17]

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:

Action Performed:

1. Navigate to staging.new.expensify.com
2. Refresh the page
3. Click Settings
4. Click on the section that will bring up animation like Workspaces, Preferences and Security

Expected Result:

The animation will come out smoothly

Actual Result:

The background color comes first, then followed by the animation

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

Bug6271559_1699638735653.20231111_014337.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01b4567a2bafc6c5c0
• Upwork Job ID: 1733080116631719936
• Last Price Increase: 2023-12-08

[melvin-bot]

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

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

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

Current assignee @puneetlath is eligible for the Engineering assigner, not assigning anyone new.

[ishpaul777]

might be related to #29975 or #30901

cc @kosmydel

[puneetlath]

Asked @kosmydel to take a look in Slack as well.

[kosmydel]

Hey, thanks for reporting it!

This issue is related to the migration of animation files from the app bundle to the assets.
Animations are no longer stored in the application code (reducing the bundle size and TTI). Instead, they are loaded when they are needed. It results in a little delay in loading. It is especially visible on the web, as the assets (just like any other image) are fetched through the internet.

I pointed this out here before it was reviewed and merged.

In my opinion, it is not a regression, as this was expected to happen. If we want to fix it, we have to discuss how to handle it.

cc @roryabraham

[puneetlath]

This is not a deploy blocker. Discussion options in this thread: https://expensify.slack.com/archives/C04878MDF34/p1699646294012999

[roryabraham]

Chatting about this in slack here – for some reason we're always getting cache misses on .lottie assets in s3/cloudfront. I think we can continue to look into that but it should not be a deploy blocker. I tend to agree that this is expected behavior.

The other thing we could potentially do is preload lottie assets at some earlier time, but I think it would be smart to try and fix cloudfront / browser caching for lottie assets before we investigate a more complex preloading solution

[roryabraham]

Suggesting that we put this on HOLD and consolidate discussion in #28160

[kosmydel]

I'm coming with an update. The PR with the patch is almost ready for review.

However, I learned we could use PreloadWebpackPlugin instead of the FontPreloadPlugin. It supports every type of asset and supports both preloading and prefetching. The changes would look more or less like in this commit. I haven't tested it thoroughly yet, as I don't know if this is what we want.

Please let me know if we should apply a patch to the already used library or if should we change the library.

cc @roryabraham, @blazejkustra

[robertjchen]

Having reviewed our caching on the server-side, it appears that the settings currently in place are correct and already have the intended effect 👍

[roryabraham]

@kosmydel It looks like https://www.npmjs.com/package/preload-webpack-plugin hasn't been published for 6 years, so I doubt it's compatible with webpack 5. So let's continue with the patch in the library we're already using

[kosmydel]

Having reviewed our caching on the server-side, it appears that the settings currently in place are correct and already have the intended effect 👍

Good to know! It works much better now!

@kosmydel It looks like https://www.npmjs.com/package/preload-webpack-plugin hasn't been published for 6 years, so I doubt it's compatible with Webpack 5. So let's continue with the patch in the library we're already using

@roryabraham Oh, I haven't linked it. I meant a fork of this plugin, maintained by vuejs: @vue/preload-webpack-plugin (it has >350k weekly downloads). I quickly tested it yesterday, and it worked with our current version of the Webpack.

Please let me know if this changes anything.

[kosmydel]

I've made the PR with the patch ready for review. Please let me know if we change our mind and want to use the other library.

[roryabraham]

Oh, @vue/preload-webpack-plugin looks good. Sorry for the confusion

[roryabraham]

Left some comments on the PR

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.4.17-8 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• feat: lottie animations prefetching #32789

If no regressions arise, payment will be issued on 2024-01-03. 🎊

After the hold period is over and BZ checklist items are completed, please complete any of the applicable payments for this issue, and check them off once done.

• External issue reporter
• Contributor that fixed the issue
• Contributor+ that helped on the issue and/or PR

For reference, here are some details about the assignees on this issue:

• @kosmydel does not require payment (Contractor)

[melvin-bot]

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:

• [@puneetlath / @roryabraham] The PR that introduced the bug has been identified. Link to the PR:
• [@puneetlath / @roryabraham] 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:
• [@puneetlath / @roryabraham] 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:
• [@kosmydel] Determine if we should create a regression test for this bug.
• [@kosmydel] 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.
• [@puneetlath] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[puneetlath]

Looks like we don't need any payments here and I don't think a regression test makes sense for this either, so I'm going to go ahead and close this out. Thanks y'all!