Skeleton Loader Webcomponent
As a frontend developer I tend to provide users clear feedback on their actions. Whether it's posts loading or filling the form - user's actions should have direct answer from your web application.
So, spinners were always to the rescue for this.
And they are still doing their job well for a lot of cases, when the user has to wait for server's response. Most of the time their look stunning and naturally show that something is going to be done soon. But they have their downsides, especially when the user has to wait for more than 300-500 ms.
Spinners and loaders have traditionally been the way to tell users
that content is going to take a while to load. While this approach is great, it’s quickly becoming obsolete in modern development. Skeleton screens are becoming the perfect replacement for traditional loaders
because they focus on progress rather than wait times, hence reducing loading-time frustration… -- #Smashing Magazine - Implementing Skeleton Screens In React
Skeleton screens give the user more information what's going to be soon by it's shape and animation, hence decrease loading-time frustration. It's a little trick which works really cool for both - users and developers.
I always liked that approach and decided to create a webcomponent, which could be used across different web apps written in react/angular/...whatever and old static websites.
And here it is - skeleton-webcomponent-loader
The idea of the plugin - is to provide a simple set of elements to create a skeleton. - Modern/Young/Sunshine.
So, there are 3 variants of skeleton-elements there: default (reactangle with a small border-radius), rectangle and circle.
All of them are highly customizable by inline props/attributes (width/height/animation/count etc.) or css custom properties.
More examples of usage and frameworks integrations (plain html/js/react/angular) could be found on Skeleton Webcomponent Loader's Homepage.
Happy Coding! 👨💻👨💻👨💻 What do you think about this plugin? How it could be improved?