@ubertheme/base/src/components/Skeleton/skeleton.js

UB PWA Base module handles the base components and functions for all PWA modules at Ubertheme.

import React from 'react';
import {arrayOf, shape, number, string } from 'prop-types';
import { mergeClasses } from '@magento/venia-ui/lib/classify';
import defaultClasses from './skeleton.css';
import {useExtraCss} from "../../talons/useExtraCss";

const Skeleton = props => {
    const {
        cssClasses = []
    } = props;

    const classes = mergeClasses(defaultClasses, props.classes);
    //check has specify a root CSS class
    classes.root = props.classes && props.classes.root
            ? defaultClasses[props.classes.root]
            : classes.root;
    //build css classes
    const additionalClasses = cssClasses.join(' ');
    const { classNames } = useExtraCss({classes, additionalClasses});

    let child;
    if (props.parentComponent.toLowerCase() == 'slider') {
        child = (
            <div className={classes.item}>
                <span
                    className={`${classes.pre} ${classes[`pre-${props.id}`]}`}
                />
                <span
                    className={`${classes.title} ${classes[`title-${props.id}`]}`}
                />
                <span
                    className={`${classes.desc} ${classes[`desc-${props.id}`]}`}
                />
                <span
                    className={`${classes.next} ${classes[`next-${props.id}`]}`}
                />
            </div>
        );
    } else {
        child = (
            <span
                className={`${classes.title} ${classes[`title-${props.id}`]}`}
            />
        );
    }

    return (
        <li className={classNames}>
            {child}
        </li>
    );
};

export default Skeleton;

Skeleton.propTypes = {
    id: number,
    parentComponent: string,
    classes: shape({
        root: string
    }),
    cssClasses: arrayOf(string)
};