[charts] Document how to use animated images in charts' overlay

[TheOneTheOnlyJJ]

Summary

MD2_chart_empty_state_animation.mp4

Now that we have support for custom overlays (thanks to #12817 being completed), we could go further and add support for animated image overlays.

The formats supported could be GIFs, animated SVGs, and Lottie files. Feel free to advocate for or against these or any other formats.
Lottie files specifically would be very helpful as they allow for programmatic color changes to the image content, and we could leverage the theme and the new color system from MD3 further down the line, especially if the illustrated default animations would be supported out of the box.
Unfortunately, I could not find these specific animated images online, though it would be very convenient to support them out of the box, as they conform to the MD standards and make for a great user experience when used.

Examples

Official MD2 docs example (the one from above)

Motivation

I am suggesting this because such animations are briefly illustrated and advocated for in the official MD2 docs, in the last paragraph of the Behaviour section of the Data Visualisation page (just above the Dashboards section).

[michelengelen]

Hey @TheOneTheOnlyJJ and thanks for raising this feature request.
Thats an interesting feature... let me add this to the board for the team to estimate.

Not sure if we will provide built in animated images for the empty/loading state, but we could at least support them.

WDYT @alexfauquette ?

[TheOneTheOnlyJJ]

Not sure if we will provide built in animated images for the empty/loading state, but we could at least support them.

Yeah, I do not know of any place where such ready-made assets with favorable licensing agreements could be found freely.

Support would be a great start, and developers looking to use such animations could get them custom made by art creators, thus being able to also have very specific animations that integrate well with the product. This would make the feature an optional step towards very extensive product-specific custom UX.

However, I believe an effort could be made to contact the Material Design team here regarding these specific animation assets seen in the example linked above. Maybe they still have them lying around somewhere in the original format. To be taken into account is the format of the assets, as it would be ideal to have the colors of the image content itself adaptable to the theme colors. Also, note could be taken that one of the animations has dual-tone assets (the person walking with a bag in their hand, which is of a lighter shade of gray compared to the person).
Most likely though, even if the assets still exist and could be provided, licensing problems will arise.
I believe it is worth a try, as the benefits of potentially having these animations as defaults in the library are worth the effort of sending a few e-mails to the MD team.

[alexfauquette]

If you want to get this animation of small stick person doing sport in your chart, It's not planed to add it (even though I admit I's a very funny one)

You can already put a custom overlay so you should be able to render any SVG component inside your chart. So the image component should help.

What we could do is to provide a Skeleton component for the bar chart with similar API to the MUI Skeleton