How to create a Dynamic Skeleton loading component for a ReactJS application-CodePudding

I'm trying to use react-loading-skeleton package like below

import React from 'react';
import Skeleton from 'react-loading-skeleton';

function SkeletonComponent() {
  return (
    <div
      style={{
        display: 'inline-block',
        width: '300px',
        height: '180px',
        borderRadius: '8px',
        background: 'antiquewhite',
        textAlign: 'center',
        margin: '8px',
      }}
    >
      <Skeleton height={30} width={20} circle={true} />
      <h2>
        <Skeleton type='circle' />
      </h2>
      <h3>
        <Skeleton />
      </h3>
      <h4>
        <Skeleton />
      </h4>
    </div>
  );
}

export default SkeletonComponent;

So how i should use skeleton component for whole page instead of each HTML elements

CodePudding user response：

welcome to Stackoverflow. What's the error you are getting here? Please follow this example, i had this thing implemented once from here https://codesandbox.io/s/3xwil?file=/src/App.tsx:498-506

CodePudding user response：

In the react-loading-skeleton page

function BlogPost(props) {
    return (
        <div>
            <h1>{props.title || <Skeleton />}</h1>
            {props.body || <Skeleton count={10} />}
        </div>
    )
}

Try this