Performance Profiler: use fade in and out animation for tips

[gcsecsey]

Related to https://github.com/Automattic/dotcom-forge/issues/9108
Follow-up to #95401

Proposed Changes

• Update the tip update animation

Why are these changes being made?

• Discussion on Performance Profiler: animate loading screen tips #95401

Testing Instructions

• Go to /speed-test and start a new test
• Check that the tips on the loading screen are using a fade in and fade out animation when updated

Before

CleanShot.2024-10-15.at.17.12.39.mp4

After

CleanShot.2024-10-17.at.14.55.05.mp4

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-122113

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-122113&env=jetpack

Automattic for Agencies live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-122113&env=a8c-for-agencies

[matticbot]

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

• notifications
• wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug update/animate-tips on your sandbox.

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Sections (~65 bytes removed 📉 [gzipped])

name                  parsed_size           gzip_size
performance-profiler       -189 B  (-0.1%)      -65 B  (-0.1%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[epeicher]

Thanks for doing this follow-up! I like this more-subtle animation. Changes LGTM!

[epeicher]

👍

[matt-west]

Looks great! Thanks @gcsecsey