react-content-loader VS react-native-skeleton-placeholder

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.

A word of warning about https://github.com/chramos/react-native-skeleton-placeholder … v4 has a serious performance issue on Android in my experience, and v5 has a masking library conflict with React Navigation that I couldn’t resolve. I ended up removing it altogether… YMMV

Hi, i was asked to implement dnyamic skeleton loader to entire app instead of activity indicator. But packages i found are not performant and hard to use. You need to give a view as same as the component you need to mask. And also need at least one state to control. package: https://github.com/chramos/react-native-skeleton-placeholder usage: