feat: add loading bar component and integrate it into TV shows and recommendations loading states and cache metadataprovider responsens in backend

web/src/lib/components/ui/progress/index.ts

@@ -0,0 +1,7 @@
+import Root from "./progress.svelte";
+
+export {
+    Root,
+    //
+    Root as Progress,
+};

web/src/lib/components/ui/progress/progress.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+    import {Progress as ProgressPrimitive, type WithoutChildrenOrChild} from "bits-ui";
+    import {cn} from "$lib/utils.js";
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        max = 100,
+        value,
+        ...restProps
+    }: WithoutChildrenOrChild<ProgressPrimitive.RootProps> = $props();
+</script>
+
+<ProgressPrimitive.Root
+        {...restProps}
+        bind:ref
+        class={cn("bg-primary/20 relative h-2 w-full overflow-hidden rounded-full", className)}
+        {value}
+>
+    <div
+            class="bg-primary h-full w-full flex-1 transition-all"
+            style={`transform: translateX(-${100 - (100 * (value ?? 0)) / (max ?? 1)}%)`}
+    ></div>
+</ProgressPrimitive.Root>