Skip to content

Manjula Dube

Manage loading 🌀state while your content loads 📝 in React

react, javascript2 min read

Often we need to show a placeholder skeleton, before our actual content loads. We can also term this as loading state before our actual contents loads on the page. Today I want to show you how we can create simple “placeholders” to show while the content loads. This is done by almost all the web applications in order to improve the experience of our users.



Here's a solution to create skeleton for your loading state. React Place Moulder uses existing component structure to render loading skeletons with very minimal code changes. React place moulder is more of a philosophy rather than actual package. This is an amazing npm package developed by my friend Vihang Patel.

Installation





How it works

  • Class name stensil is required to be added to render the dom element that is being loaded.
  • Create a dummy data or Schema exactly how your app would pass to the component
  • To render loading state of the list, use StencilList HOC, or to show loading state of individual component, use Stencil HOC. See props table for accepted props.

~ Lets get started with each of the components ~


StencilList
proptype
data*objectdata is dummy or representational data which will be used to determine the dummy space occupied by the DOM element
lengthnumberNumber of repetitive skeletons required to fill in the placeholder list
schema*objectIf data is not provided, provide schema of the props required by Component.
ComponentReactComponentComponent for which we want to generate skeleton on the fly
Stencil
proptype
ChildrenReactComponentComponent on which loading state is required

Available selectors to achieve desired result. Add required class name along with other classes where you want to show loading state.


Override or extend styles
  • To override or extend visuals, extend below classes or create some custom class and use it in your application:
Selector ClassDescription
stensilTo get loading state
stensil-ignoreTo ignore the component in the loading state. Won't show stencil over there
stensil-darkDark background, useful in image loaders
stensil-svgTo get the exact shape of the SVG as a stencil loader
stensil-paraTo show the paragraph, can be used where there is short description used
Creating custom classes 👇
  • Note You can have your own classes to override visuals in loading behaviour.
  • For that wrap your css under the `.enable-stensil` selector and just use it in your application.
createObjectFromSchema - method
  • Takes object schema as an argument and returns dummy component props JSON. It supports nested object structure as well.

Example

  1. Import StencilList, Stencil, createObjectFromSchema as per your usecase

  1. To render loading state of the sample card, add stensil-dark class name to the appropriate dom element.



  1. Invoke HOC when the data is being loaded. Pass wData as a prop to the StencilList component. Remember wData is similar in struture to the actual data.`.


  1. Provide data or schema. Remember here data takes precedence over schema.
  • Where integer value against each prop indicate average length to show the stencil. This is customizable.

For example wData looks something like this 👇

Alternatively you can use schema and pass it as a prop 👇

As you can see, creating a friendly interface while waiting for our content is not very difficult and surely helps to improve the impression that users have when visiting our page because they do not see blank pieces waiting to be filled and instead have an excellent user experience.

Checkout the repo for more details

Also checkout some real life that you could use in your projects examples

Thankyou for reading ❤️