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

Common UI components for FuryStack Shades

import { Shade, createComponent } from '@furystack/shades';
import { cssVariableTheme } from '../services/css-variable-theme.js';
import { promisifyAnimation } from '../utils/promisify-animation.js';
export const Skeleton = Shade({
    customElementName: 'shade-skeleton',
    render: ({ props, useRef }) => {
        const wrapperRef = useRef('wrapper');
        const { delay = 1500 } = props;
        setTimeout(() => {
            const el = wrapperRef.current;
            if (!el)
                return;
            void promisifyAnimation(el, [{ opacity: 0 }, { opacity: 1 }], {
                fill: 'forwards',
                duration: 300,
                easing: 'ease-out',
                delay,
            }).then(() => {
                void promisifyAnimation(el, [{ backgroundPosition: '0% 50%' }, { backgroundPosition: '100% 50%' }, { backgroundPosition: '0% 50%' }], {
                    duration: 10000,
                    iterations: Infinity,
                });
            });
        });
        return (createComponent("div", { ref: wrapperRef, style: {
                opacity: '0',
                display: 'inline-block',
                background: `linear-gradient(-45deg, color-mix(in srgb, ${cssVariableTheme.text.secondary} 10%, transparent), color-mix(in srgb, ${cssVariableTheme.text.secondary} 30%, transparent), color-mix(in srgb, ${cssVariableTheme.text.secondary} 10%, transparent))`,
                backgroundSize: '400% 400%',
                width: '100%',
                height: '100%',
                minHeight: '1em',
            } }));
    },
});
//# sourceMappingURL=skeleton.js.map