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/add-show-card.svelte

@@ -6,6 +6,7 @@
     import {goto} from '$app/navigation';
     import {base} from '$app/paths';
     import type {MetaDataProviderShowSearchResult} from '$lib/types.js';
+    import {toOptimizedURL} from "sveltekit-image-optimize/components";
 
     let loading = $state(false);
     let errorMessage = $state(null);
@@ -47,7 +48,7 @@
         {#if result.poster_path != null}
             <img
                     class="max-h-full max-w-full object-contain  rounded-lg"
-                    src={result.poster_path}
+                    src={toOptimizedURL(result.poster_path)}
                     alt="{result.name}'s Poster Image"
             />
         {:else}

web/src/lib/components/app-sidebar.svelte

@@ -1,9 +1,15 @@
 <script lang="ts" module>
-    import {Settings, LifeBuoy, Send, LayoutPanelLeft, TvIcon} from "lucide-svelte";
+    import {Settings, LifeBuoy, Send, LayoutPanelLeft, TvIcon, Home} from "lucide-svelte";
     import {PUBLIC_VERSION} from '$env/static/public';
 
     const data = {
         navMain: [
+            {
+                title: 'Dashboard',
+                url: '/dashboard',
+                icon: Home,
+                isActive: true
+            },
             {
                 title: 'TV',
                 url: '/dashboard/tv',
@@ -23,6 +29,18 @@
                         url: '/dashboard/tv/requests'
                     }
                 ]
+            },
+            {
+                title: 'Settings',
+                url: '/dashboard/settings',
+                icon: Settings,
+                isActive: true,
+                items: [
+                    {
+                        title: 'Users',
+                        url: '/dashboard/settings#users'
+                    }
+                ]
             }
         ],
         navSecondary: [
@@ -36,18 +54,6 @@
                 url: '#',
                 icon: Send
             }
-        ],
-        projects: [
-            {
-                name: 'Dashboard',
-                url: '/dashboard',
-                icon: LayoutPanelLeft
-            },
-            {
-                name: 'Settings',
-                url: '/dashboard/settings',
-                icon: Settings
-            }
         ]
     };
 </script>
@@ -85,7 +91,7 @@
     </Sidebar.Header>
     <Sidebar.Content>
         <NavMain items={data.navMain}/>
-        <NavProjects projects={data.projects}/>
+        <!--  <NavProjects projects={data.projects}/> -->
         <NavSecondary class="mt-auto" items={data.navSecondary}/>
     </Sidebar.Content>
     <Sidebar.Footer>

web/src/lib/components/loading-bar.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+    import {Progress} from "$lib/components/ui/progress/index.js";
+    import {onMount} from "svelte";
+
+    let value = $state(0);
+
+    onMount(() => {
+        const interval = setInterval(() => {
+            value += 1;
+            if (value >= 100) {
+                value = 0
+                clearInterval(interval);
+
+            }
+        }, 1);
+
+        return () => clearInterval(interval);
+    });
+</script>
+
+<Progress value={value}/>

web/src/lib/components/nav-main.svelte

@@ -22,7 +22,7 @@
 </script>
 
 <Sidebar.Group>
-	<Sidebar.GroupLabel>Platform</Sidebar.GroupLabel>
+	<Sidebar.GroupLabel></Sidebar.GroupLabel>
 	<Sidebar.Menu>
 		{#each items as mainItem (mainItem.title)}
 			<Collapsible.Root open={mainItem.isActive}>

web/src/lib/components/nav-projects.svelte

@@ -23,7 +23,7 @@
 </script>
 
 <Sidebar.Group class="group-data-[collapsible=icon]:hidden">
-	<Sidebar.GroupLabel>Projects</Sidebar.GroupLabel>
+	<Sidebar.GroupLabel><!-- TODO: what to set this label to?? --> </Sidebar.GroupLabel>
 	<Sidebar.Menu>
 		{#each projects as item (item.name)}
 			<Sidebar.MenuItem>

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>