Facebook like skeleton loader in React

Facebook like skeleton loader in React

You have noticed the loader displayed in facebook and other new websites when content is loading. The loader can be implemented in react application using  react-content-loader

demo:  https://danilowoz.com/create-content-loader/

To install:

npm i react-content-loader --save

yarn add react-content-loader

Usage: 

1. Preset Example 

import ContentLoader, { Facebook } from "react-content-loader";

const MyLoader = () => <ContentLoader />;

const MyFacebookLoader = () => <Facebook />;

2. Custom

import React from "react";

import ContentLoader from "react-content-loader";

const CustomLoader = () => (

  <div style={{ width: "100%", minHeight: "500px" }}>

    <ContentLoader style={{ width: "100%", height: "500px" }}>

      <rect x="65%" y="0" rx="5" ry="5" width="100%" height="30" />

      <rect x="10" y="40" rx="5" ry="5" width="100%" height="40" />

      <rect x="10" y="100" rx="5" ry="5" width="100%" height="30" />

      <rect x="10" y="150" rx="5" ry="5" width="100%" height="30" />

      <rect x="10" y="200" rx="5" ry="5" width="100%" height="30" />

      <rect x="10" y="250" rx="5" ry="5" width="100%" height="30" />

      <rect x="10" y="300" rx="5" ry="5" width="100%" height="30" />

      <rect x="10" y="350" rx="5" ry="5" width="100%" height="30" />

      <rect x="10" y="400" rx="5" ry="5" width="100%" height="30" />

      <rect x="75%" y="450" rx="5" ry="5" width="100%" height="30" />

    </ContentLoader>

  </div>

);

export default CustomLoader;

Note: I have faced issue in providing 100% width for the loader. The above code fixed issue and take 100% width of the container.