rooks VS react-content-loader

I re-read relevant documentation many times and am very aware of what purity means. I guess what's throwing me off is that every hook library uses such implementation of usePrevious: * react-hookz * ahooks * rooks

Feel free to use these modern react hooks you can find more custom hooks in the react-use package and Github rooks.

rooks - Essential React custom hooks ⚓ to super charge your components!

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.