Lottie VS react-content-loader

Lottie still has a lot of support (backed by Airbnb) and just got a big performance upgrade on iOS. However, there are competitors cropping up (like Rive) with the aim to be more lightweight and not tied to After Effects.

Lottie - After Effects vector animations

When I wrote my app which needed Lottie animations, I found LottieXamarin library, but that only works with Xamarin.Forms not with MAUI. I tried to update it, however I've run into multiple issues and at the same time I've realised only older Lottie versions can be binded, because from March of 2019, Lottie is a Swift library, which means it can't be binded easily.

It's probably made with Adobe AE or similar, and exported in Lottie format (SVG-data like + assets) to be loaded and rendered with the Lottie library for iOS (https://github.com/airbnb/lottie-ios) which I presume already comes with SwiftUI-compatible API.

The HN thread also mentions Lottie from AirBnB and IconVG from Not-an-official-Google-product.

Lottie for Web, Android, iOS, React Native, and Windows

I think there might be one but not sure how up to date it is: https://github.com/airbnb/lottie-ios/tree/lottie/objectiveC

What's great about is that you can design your loading screens on their site: https://skeletonreact.com/

React Content Loader - SVG-Powered component to easily create placeholder loadings (like Facebook’s cards loading).

This is a Vue port for react-content-loader.

TL;DR; You can reduce the number of queries you make on listing pages by loading content as it gets displayed. Use react-intersection-observer to detect when an element becomes visible and react-content-loader to display a contentful placeholder loader.

I use https://github.com/danilowoz/react-content-loader can create skeletons with svgs. might sound confusing at first but it works well, is performant and does the job. https://skeletonreact.com/ Firstly check this website out see if they already have what you need in their presets

I eventually ended up combining react-intersection-observer and react-content-loader to create a progressive loading experience where elements get loaded as they become visible to users.

The current UX trend is to use some kind of a placeholder animation while loading pieces of UI. react-content-loader is a popular npm package for this use case. It is customizable, supports react and react-native, has some bundled presets, and actually supports SVG animation out of the box.