diff --git a/web/src/lib/components/add-media-card.svelte b/web/src/lib/components/add-media-card.svelte
index 5bd5e77..c3b172d 100644
--- a/web/src/lib/components/add-media-card.svelte
+++ b/web/src/lib/components/add-media-card.svelte
@@ -2,7 +2,7 @@
 	import { Button } from '$lib/components/ui/button/index.js';
 	import * as Card from '$lib/components/ui/card/index.js';
 	import { ImageOff } from 'lucide-svelte';
-	import { goto } from '$app/navigation';
+    import {goto, invalidateAll} from '$app/navigation';
 	import { resolve } from '$app/paths';
 	import type { components } from '$lib/api/api';
 	import client from '$lib/api';
@@ -39,12 +39,14 @@
 			});
 			data = response.data;
 		}
-		if (isShow) {
-			await goto(resolve('/dashboard/tv/[showId]', { showId: data?.id ?? '' }));
+
+        if (isShow) {
+			await goto(resolve('/dashboard/tv/[showId]', {showId: data?.id ?? ''}));
 		} else {
-			await goto(resolve('/dashboard/movies/[movieId]', { movieId: data?.id ?? '' }));
+			await goto(resolve('/dashboard/movies/[movieId]', {movieId: data?.id ?? ''}));
 		}
-		loading = false;
+        await invalidateAll()
+        loading = false;
 	}
 </script>
 
diff --git a/web/src/routes/dashboard/+layout.ts b/web/src/routes/dashboard/+layout.ts
index ac9dfbe..9759e27 100644
--- a/web/src/routes/dashboard/+layout.ts
+++ b/web/src/routes/dashboard/+layout.ts
@@ -6,9 +6,9 @@ import { goto } from '$app/navigation';
 import client from '$lib/api';
 
 export const load: LayoutLoad = async ({ fetch }) => {
-	const { data, response } = await client.GET('/api/v1/users/me', { fetch: fetch });
+	const { data, error } = await client.GET('/api/v1/users/me', { fetch: fetch });
 
-	if (!response.ok) {
+	if (error) {
 		console.log('unauthorized, redirecting to login');
 		if (browser) {
 			await goto(resolve('/login', {}));
@@ -16,5 +16,9 @@ export const load: LayoutLoad = async ({ fetch }) => {
 			throw redirect(303, resolve('/login', {}));
 		}
 	}
-	return { user: data };
+	return {
+		user: data,
+		tvShows: await client.GET('/api/v1/tv/shows', { fetch: fetch }).then(res => res.data),
+		movies: await client.GET('/api/v1/movies', { fetch: fetch }).then(res => res.data),
+	};
 };
diff --git a/web/src/routes/dashboard/movies/+page.svelte b/web/src/routes/dashboard/movies/+page.svelte
index 29c6bc5..a221e03 100644
--- a/web/src/routes/dashboard/movies/+page.svelte
+++ b/web/src/routes/dashboard/movies/+page.svelte
@@ -1,85 +1,90 @@
 <script lang="ts">
-	import * as Card from '$lib/components/ui/card/index.js';
-	import { Separator } from '$lib/components/ui/separator/index.js';
-	import * as Sidebar from '$lib/components/ui/sidebar/index.js';
-	import * as Breadcrumb from '$lib/components/ui/breadcrumb/index.js';
-	import { getFullyQualifiedMediaName } from '$lib/utils';
-	import MediaPicture from '$lib/components/media-picture.svelte';
-	import { resolve } from '$app/paths';
-	import type { components } from '$lib/api/api.d.ts';
-	import { page } from '$app/state';
-	import ImportCandidatesDialog from '$lib/components/import-media/import-candidates-dialog.svelte';
-	import DetectedMediaCard from '$lib/components/import-media/detected-media-card.svelte';
-	import { getContext } from 'svelte';
+    import * as Card from '$lib/components/ui/card/index.js';
+    import {Separator} from '$lib/components/ui/separator/index.js';
+    import * as Sidebar from '$lib/components/ui/sidebar/index.js';
+    import * as Breadcrumb from '$lib/components/ui/breadcrumb/index.js';
+    import {getFullyQualifiedMediaName} from '$lib/utils';
+    import MediaPicture from '$lib/components/media-picture.svelte';
+    import {resolve} from '$app/paths';
+    import type {components} from '$lib/api/api.d.ts';
+    import {page} from '$app/state';
+    import ImportCandidatesDialog from '$lib/components/import-media/import-candidates-dialog.svelte';
+    import DetectedMediaCard from '$lib/components/import-media/detected-media-card.svelte';
+    import {getContext} from 'svelte';
+    import type {PageProps} from './$types';
+    import LoadingBar from "$lib/components/loading-bar.svelte";
 
-	let movies: components['schemas']['PublicMovie'][] = $derived(page.data.movies);
-	let importableMovies: () => components['schemas']['MediaImportSuggestion'][] =
-		getContext('importableMovies');
+    let {data}: PageProps = $props();
+    let importableMovies: () => components['schemas']['MediaImportSuggestion'][] =
+        getContext('importableMovies');
 </script>
 
 <svelte:head>
-	<title>Movies - MediaManager</title>
-	<meta content="Browse and manage your movie collection in MediaManager" name="description" />
+    <title>Movies - MediaManager</title>
+    <meta content="Browse and manage your movie collection in MediaManager" name="description"/>
 </svelte:head>
 
 <header class="flex h-16 shrink-0 items-center gap-2">
-	<div class="flex items-center gap-2 px-4">
-		<Sidebar.Trigger class="-ml-1" />
-		<Separator class="mr-2 h-4" orientation="vertical" />
-		<Breadcrumb.Root>
-			<Breadcrumb.List>
-				<Breadcrumb.Item class="hidden md:block">
-					<Breadcrumb.Link href={resolve('/dashboard', {})}>MediaManager</Breadcrumb.Link>
-				</Breadcrumb.Item>
-				<Breadcrumb.Separator class="hidden md:block" />
-				<Breadcrumb.Item>
-					<Breadcrumb.Link href={resolve('/dashboard', {})}>Home</Breadcrumb.Link>
-				</Breadcrumb.Item>
-				<Breadcrumb.Separator class="hidden md:block" />
-				<Breadcrumb.Item>
-					<Breadcrumb.Page>Movies</Breadcrumb.Page>
-				</Breadcrumb.Item>
-			</Breadcrumb.List>
-		</Breadcrumb.Root>
-	</div>
+    <div class="flex items-center gap-2 px-4">
+        <Sidebar.Trigger class="-ml-1"/>
+        <Separator class="mr-2 h-4" orientation="vertical"/>
+        <Breadcrumb.Root>
+            <Breadcrumb.List>
+                <Breadcrumb.Item class="hidden md:block">
+                    <Breadcrumb.Link href={resolve('/dashboard', {})}>MediaManager</Breadcrumb.Link>
+                </Breadcrumb.Item>
+                <Breadcrumb.Separator class="hidden md:block"/>
+                <Breadcrumb.Item>
+                    <Breadcrumb.Link href={resolve('/dashboard', {})}>Home</Breadcrumb.Link>
+                </Breadcrumb.Item>
+                <Breadcrumb.Separator class="hidden md:block"/>
+                <Breadcrumb.Item>
+                    <Breadcrumb.Page>Movies</Breadcrumb.Page>
+                </Breadcrumb.Item>
+            </Breadcrumb.List>
+        </Breadcrumb.Root>
+    </div>
 </header>
 <main class="flex w-full flex-1 flex-col gap-4 p-4 pt-0">
-	<h1 class="scroll-m-20 text-center text-4xl font-extrabold tracking-tight lg:text-5xl">Movies</h1>
-	{#if importableMovies().length > 0}
-		<div
-			class="grid w-full auto-rows-min gap-4 sm:grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-4"
-		>
-			{#each importableMovies() as importable (importable.directory)}
-				<DetectedMediaCard isTv={false} directory={importable.directory}>
-					<ImportCandidatesDialog
-						isTv={false}
-						name={importable.directory}
-						candidates={importable.candidates}
-					>
-						Import movie
-					</ImportCandidatesDialog>
-				</DetectedMediaCard>
-			{/each}
-		</div>
-	{/if}
-
-	<div
-		class="grid w-full auto-rows-min gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5"
-	>
-		{#each movies as movie (movie.id)}
-			<a href={resolve('/dashboard/movies/[movieId]', { movieId: movie.id! })}>
-				<Card.Root class="col-span-full max-w-[90vw] ">
-					<Card.Header>
-						<Card.Title class="h-6 truncate">{getFullyQualifiedMediaName(movie)}</Card.Title>
-						<Card.Description class="truncate">{movie.overview}</Card.Description>
-					</Card.Header>
-					<Card.Content>
-						<MediaPicture media={movie} />
-					</Card.Content>
-				</Card.Root>
-			</a>
-		{:else}
-			<div class="col-span-full text-center text-muted-foreground">No movies added yet.</div>
-		{/each}
-	</div>
+    <h1 class="scroll-m-20 text-center text-4xl font-extrabold tracking-tight lg:text-5xl">Movies</h1>
+    {#if importableMovies().length > 0}
+        <div
+                class="grid w-full auto-rows-min gap-4 sm:grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-4"
+        >
+            {#each importableMovies() as importable (importable.directory)}
+                <DetectedMediaCard isTv={false} directory={importable.directory}>
+                    <ImportCandidatesDialog
+                            isTv={false}
+                            name={importable.directory}
+                            candidates={importable.candidates}
+                    >
+                        Import movie
+                    </ImportCandidatesDialog>
+                </DetectedMediaCard>
+            {/each}
+        </div>
+    {/if}
+    {#await data.movies}
+        <LoadingBar/>
+    {:then movies}
+        <div
+                class="grid w-full auto-rows-min gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5"
+        >
+            {#each movies as movie (movie.id)}
+                <a href={resolve('/dashboard/movies/[movieId]', { movieId: movie.id! })}>
+                    <Card.Root class="col-span-full max-w-[90vw] ">
+                        <Card.Header>
+                            <Card.Title class="h-6 truncate">{getFullyQualifiedMediaName(movie)}</Card.Title>
+                            <Card.Description class="truncate">{movie.overview}</Card.Description>
+                        </Card.Header>
+                        <Card.Content>
+                            <MediaPicture media={movie}/>
+                        </Card.Content>
+                    </Card.Root>
+                </a>
+            {:else}
+                <div class="col-span-full text-center text-muted-foreground">No movies added yet.</div>
+            {/each}
+        </div>
+    {/await}
 </main>
diff --git a/web/src/routes/dashboard/movies/+page.ts b/web/src/routes/dashboard/movies/+page.ts
deleted file mode 100644
index bfbcbc0..0000000
--- a/web/src/routes/dashboard/movies/+page.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import type { PageLoad } from './$types';
-import client from '$lib/api';
-
-export const load: PageLoad = async ({ fetch }) => {
-	const movies = await client.GET('/api/v1/movies', { fetch: fetch });
-
-	return { movies: movies.data };
-};
diff --git a/web/src/routes/dashboard/tv/+page.svelte b/web/src/routes/dashboard/tv/+page.svelte
index 5faad5a..b5207e8 100644
--- a/web/src/routes/dashboard/tv/+page.svelte
+++ b/web/src/routes/dashboard/tv/+page.svelte
@@ -1,86 +1,92 @@
 <script lang="ts">
-	import { page } from '$app/state';
-	import * as Card from '$lib/components/ui/card/index.js';
-	import { Separator } from '$lib/components/ui/separator/index.js';
-	import * as Sidebar from '$lib/components/ui/sidebar/index.js';
-	import * as Breadcrumb from '$lib/components/ui/breadcrumb/index.js';
-	import { getFullyQualifiedMediaName } from '$lib/utils';
-	import MediaPicture from '$lib/components/media-picture.svelte';
-	import { resolve } from '$app/paths';
-	import ImportCandidatesDialog from '$lib/components/import-media/import-candidates-dialog.svelte';
-	import DetectedMediaCard from '$lib/components/import-media/detected-media-card.svelte';
-	import type { components } from '$lib/api/api';
-	import { getContext } from 'svelte';
+    import {page} from '$app/state';
+    import * as Card from '$lib/components/ui/card/index.js';
+    import {Separator} from '$lib/components/ui/separator/index.js';
+    import * as Sidebar from '$lib/components/ui/sidebar/index.js';
+    import * as Breadcrumb from '$lib/components/ui/breadcrumb/index.js';
+    import {getFullyQualifiedMediaName} from '$lib/utils';
+    import MediaPicture from '$lib/components/media-picture.svelte';
+    import {resolve} from '$app/paths';
+    import ImportCandidatesDialog from '$lib/components/import-media/import-candidates-dialog.svelte';
+    import DetectedMediaCard from '$lib/components/import-media/detected-media-card.svelte';
+    import type {components} from '$lib/api/api';
+    import {getContext} from 'svelte';
+    import type {PageProps} from './$types';
+    import LoadingBar from '$lib/components/loading-bar.svelte';
 
-	let tvShows = $state(page.data.tvShows);
-	let importableShows: () => components['schemas']['MediaImportSuggestion'][] =
-		getContext('importableShows');
+    let {data}: PageProps = $props();
+    let importableShows: () => components['schemas']['MediaImportSuggestion'][] =
+        getContext('importableShows');
 </script>
 
 <svelte:head>
-	<title>TV Shows - MediaManager</title>
-	<meta content="Browse and manage your TV show collection in MediaManager" name="description" />
+    <title>TV Shows - MediaManager</title>
+    <meta content="Browse and manage your TV show collection in MediaManager" name="description"/>
 </svelte:head>
 
 <header class="flex h-16 shrink-0 items-center gap-2">
-	<div class="flex items-center gap-2 px-4">
-		<Sidebar.Trigger class="-ml-1" />
-		<Separator class="mr-2 h-4" orientation="vertical" />
-		<Breadcrumb.Root>
-			<Breadcrumb.List>
-				<Breadcrumb.Item class="hidden md:block">
-					<Breadcrumb.Link href={resolve('/dashboard', {})}>MediaManager</Breadcrumb.Link>
-				</Breadcrumb.Item>
-				<Breadcrumb.Separator class="hidden md:block" />
-				<Breadcrumb.Item>
-					<Breadcrumb.Link href={resolve('/dashboard', {})}>Home</Breadcrumb.Link>
-				</Breadcrumb.Item>
-				<Breadcrumb.Separator class="hidden md:block" />
-				<Breadcrumb.Item>
-					<Breadcrumb.Page>Shows</Breadcrumb.Page>
-				</Breadcrumb.Item>
-			</Breadcrumb.List>
-		</Breadcrumb.Root>
-	</div>
+    <div class="flex items-center gap-2 px-4">
+        <Sidebar.Trigger class="-ml-1"/>
+        <Separator class="mr-2 h-4" orientation="vertical"/>
+        <Breadcrumb.Root>
+            <Breadcrumb.List>
+                <Breadcrumb.Item class="hidden md:block">
+                    <Breadcrumb.Link href={resolve('/dashboard', {})}>MediaManager</Breadcrumb.Link>
+                </Breadcrumb.Item>
+                <Breadcrumb.Separator class="hidden md:block"/>
+                <Breadcrumb.Item>
+                    <Breadcrumb.Link href={resolve('/dashboard', {})}>Home</Breadcrumb.Link>
+                </Breadcrumb.Item>
+                <Breadcrumb.Separator class="hidden md:block"/>
+                <Breadcrumb.Item>
+                    <Breadcrumb.Page>Shows</Breadcrumb.Page>
+                </Breadcrumb.Item>
+            </Breadcrumb.List>
+        </Breadcrumb.Root>
+    </div>
 </header>
 <main class="flex w-full flex-col gap-4 p-4 pt-0">
-	<h1 class="scroll-m-20 text-center text-4xl font-extrabold tracking-tight lg:text-5xl">
-		TV Shows
-	</h1>
-	{#if importableShows().length > 0}
-		<div
-			class="grid w-full auto-rows-min gap-4 sm:grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-4"
-		>
-			{#each importableShows() as importable (importable.directory)}
-				<DetectedMediaCard isTv={true} directory={importable.directory}>
-					<ImportCandidatesDialog
-						isTv={true}
-						name={importable.directory}
-						candidates={importable.candidates}
-					>
-						Import TV show
-					</ImportCandidatesDialog>
-				</DetectedMediaCard>
-			{/each}
-		</div>
-	{/if}
-	<div
-		class="grid w-full auto-rows-min gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5"
-	>
-		{#each tvShows as show (show.id)}
-			<a href={resolve('/dashboard/tv/[showId]', { showId: show.id })}>
-				<Card.Root class="col-span-full max-w-[90vw] ">
-					<Card.Header>
-						<Card.Title class="h-6 truncate">{getFullyQualifiedMediaName(show)}</Card.Title>
-						<Card.Description class="truncate">{show.overview}</Card.Description>
-					</Card.Header>
-					<Card.Content>
-						<MediaPicture media={show} />
-					</Card.Content>
-				</Card.Root>
-			</a>
-		{:else}
-			<div class="col-span-full text-center text-muted-foreground">No TV shows added yet.</div>
-		{/each}
-	</div>
+    <h1 class="scroll-m-20 text-center text-4xl font-extrabold tracking-tight lg:text-5xl">
+        TV Shows
+    </h1>
+    {#if importableShows().length > 0}
+        <div
+                class="grid w-full auto-rows-min gap-4 sm:grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-4"
+        >
+            {#each importableShows() as importable (importable.directory)}
+                <DetectedMediaCard isTv={true} directory={importable.directory}>
+                    <ImportCandidatesDialog
+                            isTv={true}
+                            name={importable.directory}
+                            candidates={importable.candidates}
+                    >
+                        Import TV show
+                    </ImportCandidatesDialog>
+                </DetectedMediaCard>
+            {/each}
+        </div>
+    {/if}
+    {#await data.tvShows}
+        <LoadingBar />
+    {:then tvShows}
+    <div
+                class="grid w-full auto-rows-min gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5"
+        >
+            {#each tvShows as show (show.id)}
+                <a href={resolve('/dashboard/tv/[showId]', { showId: show.id })}>
+                    <Card.Root class="col-span-full max-w-[90vw] ">
+                        <Card.Header>
+                            <Card.Title class="h-6 truncate">{getFullyQualifiedMediaName(show)}</Card.Title>
+                            <Card.Description class="truncate">{show.overview}</Card.Description>
+                        </Card.Header>
+                        <Card.Content>
+                            <MediaPicture media={show}/>
+                        </Card.Content>
+                    </Card.Root>
+                </a>
+            {:else}
+                <div class="col-span-full text-center text-muted-foreground">No TV shows added yet.</div>
+            {/each}
+        </div>
+    {/await}
 </main>
diff --git a/web/src/routes/dashboard/tv/+page.ts b/web/src/routes/dashboard/tv/+page.ts
deleted file mode 100644
index f892673..0000000
--- a/web/src/routes/dashboard/tv/+page.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import client from '$lib/api';
-import type { PageLoad } from './$types';
-
-export const load: PageLoad = async ({ fetch }) => {
-	const tvShows = await client.GET('/api/v1/tv/shows', { fetch: fetch });
-
-	return { tvShows: tvShows.data };
-};