@tractorzoom/equipment-card/src/equipment-card-skeleton.js

Equipment Details Card

import Box from '@material-ui/core/Box';
import Card from '@material-ui/core/Card';
import Divider from '@material-ui/core/Divider';
import PropTypes from 'prop-types';
import React from 'react';
import Skeleton from '@material-ui/lab/Skeleton';
import useStyles from './styles';

const EquipmentCardSkeleton = (props) => {
    const classes = useStyles();

    const placeholderImg =
        'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzUwIiBoZWlnaHQ9IjIzMyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiLz4=';

    return (
        <div className={classes.cardHolder} style={{ ...props.style }}>
            <Card className={classes.root} variant='outlined'>
                <Skeleton height='100%' style={{ maxWidth: '100%' }} variant='rect'>
                    <div className={classes.cardImageHolder}>
                        <img
                            alt
                            aria-hidden='true'
                            className={classes.skeletonImage}
                            role='presentation'
                            src={placeholderImg}
                        />
                    </div>
                </Skeleton>

                <Box className={classes.cardContent}>
                    <Skeleton height={16} width='80%' />
                    <Box display='flex' flexDirection='row' justifyContent='space-between'>
                        <Skeleton height={32} style={{ marginTop: 8 }} width='50%' />
                        <Skeleton height={32} style={{ marginTop: 8 }} width='20%' />
                    </Box>
                    <Skeleton height={16} style={{ marginBottom: 16 }} width='30%' />
                    <Divider className={classes.divider} />
                    <Skeleton height={15} style={{ marginTop: 8 }} width='50%' />
                    <Skeleton height={15} width='30%' />
                </Box>
            </Card>
        </div>
    );
};

EquipmentCardSkeleton.propTypes = {
    style: PropTypes.object,
};

export default EquipmentCardSkeleton;