Skeleton Loading Pages with React
We’ve all been there.
You click a button expecting the next page to instantly fill your screen with content, only to be met with a dreaded loading icon — seconds become minutes as you frantically reload the page in a bid to get what you asked for.
My point being, nobody likes to wait…
In an aim to mitigate this torture emerged a clever visual illusion that seems to reduce the perceived loading time. Introducing skeleton loading pages — which are essentially a blank version of the page where information is gradually loaded.
Skeleton loading screens are widely used across pretty much all your favourite websites:
The user is instantly greeted with the skeleton as it pulses with grey shapes which mimic the page layout. The content requested replaces the placeholders as they become available, until the skeleton’s job is done — creating the illusion of an instant transition.
Skeleton pages in React
There are some packages out there that you can use, for example React Loading Skeleton. However, this will add dependencies to your codebase and are not as…
