adds loaders for trail cards and lists

web/src/lib/components/base/skeleton_card.svelte

@@ -0,0 +1,14 @@
+<div
+    class="skeleton-card relative rounded-2xl sm:w-72 animate-pulse flex flex-col w-80 p-4 bg-menu-background border border-input-border"
+    aria-hidden="true"
+>
+    <!-- Image placeholder -->
+    <div class="h-48 bg-menu-item-background-focus rounded-md"></div>
+
+    <!-- Text placeholders -->
+    <div class="mt-4 space-y-3">
+        <div class="h-4 bg-menu-item-background-focus rounded w-3/4"></div>
+        <div class="h-4 bg-menu-item-background-focus rounded w-full"></div>
+        <div class="h-4 bg-menu-item-background-focus rounded w-1/2"></div>
+    </div>
+</div>

web/src/lib/components/base/skeleton_list_item.svelte

@@ -0,0 +1,16 @@
+<div
+    class="skeleton-list-item animate-pulse flex items-center gap-4 p-4 bg-menu-background rounded-xl border border-input-border basis-full"
+    aria-hidden="true"
+>
+    <!-- Avatar placeholder -->
+    <div class="h-28 w-28 bg-menu-item-background-focus rounded-xl shrink-0"></div>
+
+    <!-- Text placeholders -->
+    <div class="basis-full shrink-0 space-y-2">
+        <div class="h-4 bg-menu-item-background-focus rounded w-1/3"></div>
+        <div class="h-4 bg-menu-item-background-focus rounded w-1/5"></div>
+        <div class="h-4 bg-menu-item-background-focus rounded w-2/3"></div>
+        <div class="h-4 bg-menu-item-background-focus rounded w-1/2"></div>
+
+    </div>
+</div>