import React from 'react';
import Accordion from '@mui/material/Accordion';
import AccordionSummary from '@mui/material/AccordionSummary';
import AccordionDetails from '@mui/material/AccordionDetails';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import Skeleton from '@mui/material/Skeleton';
import { SkeletonChangeItemEditorLoader } from '../ChangeItemEditor';
import styles from './EntityChangesGroup.module.css';
export var SkeletonEntityChangesGroupLoader = function () {
    return (React.createElement(Accordion, { className: styles.entityGroup, classes: { disabled: styles.skeletonEntityGroupDisabled }, defaultExpanded: true, disabled: true },
        React.createElement(AccordionSummary, { expandIcon: React.createElement(ExpandMoreIcon, null), className: styles.entityHeader, classes: {
                content: styles.accordionContent
            } },
            React.createElement(Skeleton, { variant: "text", width: "150px", height: 30 })),
        React.createElement(AccordionDetails, { className: styles.attributesList }, Array.from({ length: 3 }).map(function (_, index) { return (React.createElement(SkeletonChangeItemEditorLoader, { key: "change-list-item-loader-".concat(index) })); }))));
};
