FrontEnd/src/views/common/Skeleton.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

import React from "react";
import classnames from "classnames";
import range from "lodash/range";

import "./Skeleton.css";

export interface SkeletonProps {
  lineNumber?: number;
  className?: string;
  style?: React.CSSProperties;
}

const Skeleton: React.FC<SkeletonProps> = (props) => {
  const { lineNumber: lineNumberProps, className, style } = props;
  const lineNumber = lineNumberProps ?? 3;

  return (
    <div className={classnames(className, "cru-skeleton")} style={style}>
      {range(lineNumber).map((i) => (
        <div
          key={i}
          className={classnames(
            "cru-skeleton-line",
            i === lineNumber - 1 && "last"
          )}
        />
      ))}
    </div>
  );
};

export default Skeleton;