import React from 'react';
import { makeStyles } from '@material-ui/core';
import clsx from 'clsx';
import Skeleton from '@material-ui/lab/Skeleton';
import { LayoutUnit } from '../../../layout/LayoutUnit';
import PropTypes from 'prop-types'; // import PropTypes
const useStyles = makeStyles((theme) => ({
    root: {}
}));
export const TimelinePreloaderNode = (props) => {
    const { children, shortView } = props;
    const classes = useStyles(props);
    const { className, longView } = props;
    return (React.createElement("div", { className: clsx(classes.root, className) }, shortView && (React.createElement("div", { style: { marginRight: 100, marginBottom: 40 } }, React.createElement(LayoutUnit, { unit: "nudge" }), React.createElement("div", { style: { display: 'flex', justifyContent: 'center' } }, React.createElement(Skeleton, { variant: "circle", width: 30, height: 30 })), React.createElement(LayoutUnit, { unit: "nudge" }), React.createElement("div", { style: { display: 'flex', justifyContent: 'center' } }, React.createElement(Skeleton, { variant: "rect", width: 1, height: 25 })), React.createElement(Skeleton, { variant: "text" }), React.createElement(Skeleton, { variant: "text" }), React.createElement(LayoutUnit, { unit: "sm" }), React.createElement(Skeleton, { variant: "rect", width: 80, height: 6 }))), longView && (React.createElement("div", null, React.createElement(Skeleton, { variant: "rect", width: 800, height: 45 })))));
};
// Define propTypes
TimelinePreloaderNode.propTypes = {
    children: PropTypes.node,
    shortView: PropTypes.bool,
    longView: PropTypes.bool,
    className: PropTypes.string
};
//# sourceMappingURL=TimelinePreloaderNode.js.map