@furystack/shades-common-components/esm/components/skeleton.js

import { Shade } from '@furystack/shades';
import { promisifyAnimation } from '../utils/promisify-animation.js';
export const Skeleton = Shade({
    shadowDomName: 'shade-skeleton',
    style: {
        opacity: '0',
        display: 'inline-block',
        background: 'linear-gradient(-45deg, rgba(128,128,128,0.1), rgba(128,128,128,0.3), rgba(128,128,128,0.1))',
        backgroundSize: '400% 400%',
        width: '100%',
        height: '100%',
        minHeight: '1em',
    },
    render: ({ element, props }) => {
        const { delay = 1500 } = props;
        setTimeout(() => {
            void promisifyAnimation(element, [{ opacity: 0 }, { opacity: 1 }], {
                fill: 'forwards',
                duration: 300,
                easing: 'ease-out',
                delay,
            }).then(() => {
                void promisifyAnimation(element, [{ backgroundPosition: '0% 50%' }, { backgroundPosition: '100% 50%' }, { backgroundPosition: '0% 50%' }], {
                    duration: 10000,
                    iterations: Infinity,
                });
            });
        });
        return null;
    },
});
//# sourceMappingURL=skeleton.js.map