working on the frontend

web/src/lib/components/ui/sidebar/sidebar-menu-skeleton.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+    import {Skeleton} from "$lib/components/ui/skeleton/index.js";
+    import {cn} from "$lib/utils.js";
+    import type {WithElementRef} from "bits-ui";
+    import type {HTMLAttributes} from "svelte/elements";
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        showIcon = false,
+        children,
+        ...restProps
+    }: WithElementRef<HTMLAttributes<HTMLElement>> & {
+        showIcon?: boolean;
+    } = $props();
+
+    // Random width between 50% and 90%
+    const width = `${Math.floor(Math.random() * 40) + 50}%`;
+</script>
+
+<div
+        {...restProps}
+        bind:this={ref}
+        class={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
+        data-sidebar="menu-skeleton"
+>
+    {#if showIcon}
+        <Skeleton class="size-4 rounded-md" data-sidebar="menu-skeleton-icon"/>
+    {/if}
+    <Skeleton
+            class="h-4 max-w-[var(--skeleton-width)] flex-1"
+            data-sidebar="menu-skeleton-text"
+            style="--skeleton-width: {width};"
+    />
+    {@render children?.()}
+</div>