skeleton

//创建骨架屏组件
// Skeleton.js
import React from 'react';
import PropTypes from 'prop-types';
import './Skeleton.css';

const Skeleton = ({ width, height, borderRadius }) => {
  const style = {
    width: width || '100%',
    height: height || '20px',
    borderRadius: borderRadius || '4px',
  };

  return <div className="skeleton" style={style}></div>;
};

Skeleton.propTypes = {
  width: PropTypes.string,
  height: PropTypes.string,
  borderRadius: PropTypes.string,
};

export default Skeleton;


//使用组件
// ContentLoader.js
import React, { useState, useEffect } from 'react';
import Skeleton from './Skeleton';

const ContentLoader = () => {
  const [loading, setLoading] = useState(true);
  const [data, setData] = useState(null);

  useEffect(() => {
    // 模拟数据加载
    setTimeout(() => {
      setData({
        title: 'Loaded Content',
        description: 'This is the loaded content description.',
      });
      setLoading(false);
    }, 3000);
  }, []);

  return (
    <div>
      {loading ? (
        <div>
          <Skeleton width="60%" height="30px" />
          <Skeleton width="80%" height="20px" />
          <Skeleton width="100%" height="20px" />
        </div>
      ) : (
        <div>
          <h1>{data.title}</h1>
          <p>{data.description}</p>
        </div>
      )}
    </div>
  );
};

export default ContentLoader;