import React from 'react';
import { makeStyles } from '@material-ui/core';
import Skeleton from '@material-ui/lab/Skeleton';
import { LayoutUnit } from '../../layout/LayoutUnit';
const useStyles = makeStyles((theme) => ({
    root: {},
    nodeWrapper: {
        display: 'flex'
    }
}));
export const NodeLoader = ({ loading, nodesRequested = [1] }) => {
    const classes = useStyles();
    const singleNode = [1, 2, 3, 4];
    const NodeElement = () => {
        return (React.createElement("div", { className: classes.nodeWrapper }, React.createElement("div", null, React.createElement(Skeleton, { variant: "circle", width: 20, height: 20 })), React.createElement("div", { style: { marginLeft: 8, width: '100%' } }, React.createElement(Skeleton, { height: 20, variant: "rect", width: "100%" }))));
    };
    const NodeGroup = ({ indent }) => {
        return (React.createElement("div", null, React.createElement("div", { style: { marginLeft: indent } }, React.createElement(NodeElement, null)), React.createElement(LayoutUnit, { unit: "xxs" })));
    };
    const singleNodeGroup = loading && (React.createElement("div", null, singleNode.map((item, index) => {
        return React.createElement(NodeGroup, { indent: index * 8 });
    })));
    return (React.createElement("div", null, nodesRequested &&
        nodesRequested.map((item) => {
            return (React.createElement("div", { className: classes.root }, singleNodeGroup, " ", React.createElement(LayoutUnit, { unit: "xxs" })));
        })));
};
//# sourceMappingURL=NodeLoader.js.map