[Demo] Lottie Web

[addyosmani]

A new day and a new demo 🚀 :)

Demo type: Network Status (ECT)
Toggle: Yes
Toggle label: "Slow network on/off"
Default state: Toggle off
Libraries involved: Lottie Web https://airbnb.io/lottie/

Lottie is a library for Android, iOS, Web, and Windows that parses Adobe After Effects animations exported as json with Bodymovin and renders them natively on mobile and on the web

An advantage of using Lottie is saving space. The fact that JSON format uses much less space than PNG sequences has a direct impact on the app download and installation time.

While Lottie is great for desktop and high-end devices, it can have a large JSON payload size. Here's an example where the animation is 265KB of JSON and the Lottie library itself adds another 62KB:

Let's create a demo using https://codepen.io/airnan/full/MPmQQB as a base where we by default we show a screenshot of the animation (first frame). When the toggle is set to on, we will load Lottie and the animation JSON for a nicer experience.

Lottie Web itself and the JSON should only be dynamically loaded as needed, we should avoid including them in the base bundle if you're only loading the image.

Credits:
We should add a link to "Markus Magnusson's Halloween Smashdown" that links to the original CodePen and include the author's name for credit.

cc @anton-karlovskiy

[anton-karlovskiy]

@addyosmani

I think we should consider #65 as the project naming sounds a bit confusing as some projects are mingled with both resource loading and code-splitting, code splitting and animation toggling.
For example, I think this project can be named like react-lottie-network-aware-loading, react-lottie-network-code-splitting, react-lottie-network-animation-toggling.

What are your thoughts?

[addyosmani]

For this specific demo I would use react-lottie-network-aware-loading. I would say we can revisit proposals for renaming once the latest demos are complete.

I agree that the naming scheme needs improvement. Part of this may be that we are trying to include the category / class of optimization inside every single title. Instead, later on, maybe we should look at having a clearer directory structure to solve this. e.g /resource-loading/demo-name, /code-splitting/demo-name etc.

[anton-karlovskiy]

@addyosmani

Yes, I got your points.