@filerobot/approvals/lib/components/ApprovalsTab/ListView/ListViewSkeleton.js

Asset approvals package for Filerobot

import { Skeleton } from '@scaleflex/ui/core';
import Arrow from '@scaleflex/icons/arrow';
import StyledApprovalStatus from '@filerobot/common/lib/ApprovalStatus/ApprovalStatus.styled';
import StyledApproval from '../../Approval/Approval.styled';
import Styled from './ListView.styled';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
var ListViewSkeleton = function ListViewSkeleton() {
  var ApprovalDescription = function ApprovalDescription() {
    return /*#__PURE__*/_jsxs(StyledApproval.Description, {
      children: [/*#__PURE__*/_jsx(StyledApproval.DescStatus, {
        children: /*#__PURE__*/_jsxs(StyledApprovalStatus.Container, {
          children: [/*#__PURE__*/_jsx(Styled.AvatarSkeleton, {
            width: 16,
            height: 16
          }), /*#__PURE__*/_jsx(Skeleton, {
            width: 150,
            height: 18
          })]
        })
      }), /*#__PURE__*/_jsx(StyledApproval.DescDate, {
        children: /*#__PURE__*/_jsx(Skeleton, {
          width: 220
        })
      })]
    });
  };
  var ApprovalAvatar = function ApprovalAvatar() {
    return /*#__PURE__*/_jsx(Styled.AvatarSkeleton, {
      width: 42,
      height: 42
    });
  };
  var ApproversSection = function ApproversSection() {
    return /*#__PURE__*/_jsxs(StyledApproval.ApproversSectionContainer, {
      children: [/*#__PURE__*/_jsx(ApprovalAvatar, {}), /*#__PURE__*/_jsx(StyledApproval.ApproversSectionArrow, {
        children: /*#__PURE__*/_jsx(Arrow, {
          size: 8
        })
      }), Array(5).fill().map(function (_, index) {
        return /*#__PURE__*/_jsx(ApprovalAvatar, {}, index);
      })]
    });
  };
  var Approval = function Approval() {
    return /*#__PURE__*/_jsxs(StyledApproval.Container, {
      children: [/*#__PURE__*/_jsx(ApprovalDescription, {}), /*#__PURE__*/_jsx(StyledApproval.Message, {
        children: /*#__PURE__*/_jsx(Skeleton, {
          width: 100
        })
      }), /*#__PURE__*/_jsx(StyledApproval.Approvers, {
        children: /*#__PURE__*/_jsx(ApproversSection, {})
      }), /*#__PURE__*/_jsx("div", {
        children: /*#__PURE__*/_jsx(Skeleton, {
          width: 80,
          height: 16
        })
      })]
    });
  };
  return /*#__PURE__*/_jsxs(Styled.Container, {
    children: [/*#__PURE__*/_jsx(Styled.Header, {
      children: /*#__PURE__*/_jsx(Styled.HeaderTitle, {
        children: /*#__PURE__*/_jsx(Skeleton, {
          width: 80
        })
      })
    }), /*#__PURE__*/_jsxs(Styled.Body, {
      children: [/*#__PURE__*/_jsx(Skeleton, {
        height: 40,
        width: "100%"
      }), Array(2).fill().map(function (_, index) {
        return /*#__PURE__*/_jsx(Approval, {}, index);
      })]
    })]
  });
};
export default ListViewSkeleton;