frontend/components/skeleton/Skeleton.vue

<template>
    <div v-for="index of lines" :class="[
            'duration-200 animate-pulse bg-dark-100 [&:not(:first-child)]:mt-2',
            shape === 'circle' ? 'rounded-full' : 'rounded',
            ['text', 'content'].includes(type) && 'h-[1em]',
            props.class
        ]" v-if="enabled" :style="{
            width: getWidth(index, lines),
        }">
    </div>
    <slot v-else />
</template>

<script lang="ts" setup>
const props = withDefaults(
    defineProps<{
        enabled: boolean;
        shape?: "circle" | "rect";
        type?: "text" | "content";
        minWidth?: number;
        maxWidth?: number;
        widthUnit?: "px" | "%";
        class?: string;
    }>(),
    {
        shape: "rect",
        type: "text",
        widthUnit: "px",
    },
);

const isContent = computed(() => props.type === "content");
const isText = computed(() => props.type === "text");
const isWidthSpecified = computed(() => props.minWidth && props.maxWidth);
const calculatedWidth = computed(
    () =>
        Math.random() * ((props.maxWidth ?? 0) - (props.minWidth ?? 0)) +
        (props.minWidth ?? 0),
);

const getWidth = (index: number, lines: number) => {
    if (isWidthSpecified.value) {
        if (isContent.value)
            return index === lines
                ? `${calculatedWidth.value}${props.widthUnit}`
                : "100%";
        return `${calculatedWidth.value}${props.widthUnit}`;
    }
    return undefined;
};

const lines = isContent.value ? Math.ceil(Math.random() * 5) : 1;
</script>