src/components/elements/Skeleton.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

const SkeletonList = ({ number }) => (
  <div role="status" className="space-y-5 animate-pulse">
    { Array.from(Array(number), (e, i) => (
      <div className="flex items-center justify-between" key={i}>
        <div>
            <div className="h-2.5 bg-gray-300 rounded-full w-24 mb-2.5"></div>
            <div className="w-32 h-2 bg-gray-200 rounded-full"></div>
        </div>
        <div className="h-2.5 bg-gray-300 rounded-full w-12"></div>
    </div>
    )) }
    <span className="sr-only">Loading...</span>
  </div>
);

export {
  SkeletonList
};