1<script lang="ts">
 2	import { cn, type WithElementRef } from '$lib/components/ui/utils.js';
 3	import { Skeleton } from '$lib/components/ui/skeleton/index.js';
 4	import type { HTMLAttributes } from 'svelte/elements';
 5
 6	let {
 7		ref = $bindable(null),
 8		class: className,
 9		showIcon = false,
10		children,
11		...restProps
12	}: WithElementRef<HTMLAttributes<HTMLElement>> & {
13		showIcon?: boolean;
14	} = $props();
15
16	// Random width between 50% and 90%
17	const width = `${Math.floor(Math.random() * 40) + 50}%`;
18</script>
19
20<div
21	bind:this={ref}
22	data-slot="sidebar-menu-skeleton"
23	data-sidebar="menu-skeleton"
24	class={cn('flex h-8 items-center gap-2 rounded-md px-2', className)}
25	{...restProps}
26>
27	{#if showIcon}
28		<Skeleton class="size-4 rounded-md" data-sidebar="menu-skeleton-icon" />
29	{/if}
30	<Skeleton
31		class="h-4 max-w-(--skeleton-width) flex-1"
32		data-sidebar="menu-skeleton-text"
33		style="--skeleton-width: {width};"
34	/>
35	{@render children?.()}
36</div>