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

This commit is contained in:
maxDorninger
2025-05-25 14:36:50 +02:00
parent e9578cbeaf
commit 304ff6b42d
13 changed files with 104 additions and 38 deletions

View File

@@ -3,10 +3,13 @@
import * as Sidebar from '$lib/components/ui/sidebar/index.js';
import * as Breadcrumb from '$lib/components/ui/breadcrumb/index.js';
import RecommendedShowsCarousel from '$lib/components/recommended-shows-carousel.svelte';
import LoadingBar from '$lib/components/loading-bar.svelte';
import {base} from '$app/paths';
import {page} from '$app/state';
import type {MetaDataProviderShowSearchResult} from "$lib/types";
let recommendedShows: Promise<MetaDataProviderShowSearchResult[]> = page.data.tvRecommendations;
let recommendedShows = page.data.tvRecommendations;
</script>
<header class="flex h-16 shrink-0 items-center gap-2">
@@ -30,7 +33,12 @@
<div class="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min items-center justify-center p-4">
<div class="xl:max-w-[1200px] lg:max-w-[750px] md:max-w-[500px] sm:max-w-[200px] mx-auto">
<h3 class="scroll-m-20 text-2xl font-semibold tracking-tight text-center my-4">Trending Shows</h3>
<RecommendedShowsCarousel shows={recommendedShows}/>
{#await recommendedShows}
<LoadingBar/>
{:then recommendations}
<RecommendedShowsCarousel shows={recommendations}/>
{/await}
</div>
</div>