reworking carousel on dashboard

web/src/lib/components/add-show-card.svelte

@@ -33,7 +33,7 @@
 	}
 </script>
 
-<Card.Root class="col-span-full h-full overflow-x-hidden sm:col-span-1">
+<Card.Root class="col-span-full flex h-full flex-col overflow-x-hidden sm:col-span-1">
 	<Card.Header>
 		<Card.Title class="flex h-12 items-center leading-tight">
 			{result.name}
@@ -45,10 +45,10 @@
 		>{result.overview !== '' ? result.overview : 'No overview available'}</Card.Description
 		>
 	</Card.Header>
-	<Card.Content class="flex h-96 w-full items-center justify-center">
+	<Card.Content class="flex flex-1 items-center justify-center">
 		{#if result.poster_path != null}
 			<img
-					class="max-h-full max-w-full rounded-lg object-contain"
+					class="h-full w-full rounded-lg object-contain"
 					src={result.poster_path}
 					alt="{result.name}'s Poster Image"
 			/>

web/src/lib/components/recommended-shows-carousel.svelte

@@ -12,21 +12,22 @@
 		align: 'start',
 		loop: true
 	}}
+        class="max-w-[80vw]"
         plugins={[
 		Autoplay({
-			delay: 4000,
+			delay: 5000,
 			stopOnInteraction: false,
 			stopOnMouseEnter: true,
-			playOnInit: true
+			playOnInit: true,
+			stopOnFocusIn: true
 		})
 	]}
 >
-    <Carousel.Content class="-ml-1">
+
+    <Carousel.Content>
         {#each shows as show}
-            <Carousel.Item class="pl-1 md:basis-1/2 lg:basis-1/3">
-                <div class="p-1">
-                    <AddShowCard result={show}/>
-                </div>
+            <Carousel.Item class="md:basis-1/2 md:max-w-[40vw] xl:max-w-[20vw]">
+                <AddShowCard result={show}/>
             </Carousel.Item>
         {/each}
     </Carousel.Content>

web/src/routes/dashboard/+page.svelte

@@ -7,8 +7,26 @@
     import {base} from '$app/paths';
     import {page} from '$app/state';
     import type {MetaDataProviderShowSearchResult} from '$lib/types';
+	import {onMount} from 'svelte';
+	import {env} from "$env/dynamic/public";
+
+	const apiUrl = env.PUBLIC_API_URL;
+	let recommendedShows: any[] = [];
+	let loading = true;
+
+	onMount(async () => {
+		const res = await fetch(apiUrl + '/tv/recommended', {
+			headers: {
+				'Content-Type': 'application/json',
+				'Accept': 'application/json',
+			},
+			credentials: 'include',
+			method: 'GET'
+		});
+		recommendedShows = await res.json();
+		loading = false;
+	});
 
-	let recommendedShows: Promise<MetaDataProviderShowSearchResult[]> = page.data.tvRecommendations;
 </script>
 
 <header class="flex h-16 shrink-0 items-center gap-2">
@@ -34,16 +52,17 @@
 	</h1>
 	<div class="min-h-[100vh] flex-1 items-center justify-center rounded-xl p-4 md:min-h-min">
         <div
-                class="mx-auto max-w-[80vw] sm:max-w-[200px] md:max-w-[500px] lg:max-w-[750px] xl:max-w-[1200px]"
+				class="mx-auto max-w-[70vw] md:max-w-[80vw]"
         >
-			<h3 class="my-4 scroll-m-20 text-center text-2xl font-semibold tracking-tight">
+			<h3 class="my-4 text-center text-2xl font-semibold ">
 				Trending Shows
 			</h3>
-			{#await recommendedShows}
-                <LoadingBar/>
-			{:then recommendations}
-                <RecommendedShowsCarousel shows={recommendations}/>
-			{/await}
+			{#if loading}
+				<LoadingBar/>
+			{:else}
+
+				<RecommendedShowsCarousel shows={recommendedShows}/>
+			{/if}
 		</div>
 	</div>
 

web/src/routes/dashboard/+page.ts

@@ -1,16 +0,0 @@
-import {env} from '$env/dynamic/public';
-import type {PageLoad} from './$types';
-
-const apiUrl = env.PUBLIC_API_URL;
-
-export const load: PageLoad = async ({fetch}) => {
-	const response = await fetch(apiUrl + '/tv/recommended', {
-		method: 'GET',
-		headers: {
-			'Content-Type': 'application/json'
-		},
-		credentials: 'include'
-	});
-
-    return {tvRecommendations: await response.json()};
-};