diff --git a/package-lock.json b/package-lock.json
index 5ec3525f..9d26e70c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,6 +7,7 @@
 		"": {
 			"name": "myfit",
 			"version": "0.0.3",
+			"hasInstallScript": true,
 			"dependencies": {
 				"@auth/prisma-adapter": "^2.4.1",
 				"@auth/sveltekit": "^1.4.1",
@@ -22,7 +23,7 @@
 				"mode-watcher": "^0.4.0",
 				"paneforge": "^0.0.5",
 				"posthog-js": "^1.160.3",
-				"svelte-infinite": "^0.3.2",
+				"svelte-infinite-loading": "^1.4.0",
 				"svelte-sonner": "^0.3.26",
 				"tailwind-merge": "^2.4.0",
 				"tailwind-variants": "^0.2.1",
@@ -9178,14 +9179,11 @@
 				"url": "https://opencollective.com/eslint"
 			}
 		},
-		"node_modules/svelte-infinite": {
-			"version": "0.3.2",
-			"resolved": "https://registry.npmjs.org/svelte-infinite/-/svelte-infinite-0.3.2.tgz",
-			"integrity": "sha512-i69pdc1Q+YNdALHrVSoZIbvgKDuZf9UihOhrhGLekSkjNLwr6d57osrNnywKltYwg/n1r84hV8IGnSk7Jo03Qg==",
-			"license": "MIT",
-			"peerDependencies": {
-				"svelte": "^5.0.0-0"
-			}
+		"node_modules/svelte-infinite-loading": {
+			"version": "1.4.0",
+			"resolved": "https://registry.npmjs.org/svelte-infinite-loading/-/svelte-infinite-loading-1.4.0.tgz",
+			"integrity": "sha512-Jo+f/yr/HmZQuIiiKKzAHVFXdAUWHW2RBbrcQTil8JVk1sCm/riy7KTJVzjBgQvHasrFQYKF84zvtc9/Y4lFYg==",
+			"license": "MIT"
 		},
 		"node_modules/svelte-sonner": {
 			"version": "0.3.28",
diff --git a/package.json b/package.json
index 6a51c923..a3ccd583 100644
--- a/package.json
+++ b/package.json
@@ -64,7 +64,7 @@
 		"mode-watcher": "^0.4.0",
 		"paneforge": "^0.0.5",
 		"posthog-js": "^1.160.3",
-		"svelte-infinite": "^0.3.2",
+		"svelte-infinite-loading": "^1.4.0",
 		"svelte-sonner": "^0.3.26",
 		"tailwind-merge": "^2.4.0",
 		"tailwind-variants": "^0.2.1",
diff --git a/src/lib/components/DefaultInfiniteLoader.svelte b/src/lib/components/DefaultInfiniteLoader.svelte
new file mode 100644
index 00000000..07237151
--- /dev/null
+++ b/src/lib/components/DefaultInfiniteLoader.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+	import Separator from '$lib/components/ui/separator/separator.svelte';
+	import InfiniteLoading, { type InfiniteEvent } from 'svelte-infinite-loading';
+	import LoaderCircle from 'virtual:icons/lucide/loader-circle';
+
+	type PropsType = {
+		loadMore: (event: InfiniteEvent) => Promise<void>;
+		identifier: unknown;
+		entityPlural: string;
+	};
+
+	let { loadMore, identifier, entityPlural }: PropsType = $props();
+</script>
+
+<InfiniteLoading on:infinite={loadMore} {identifier}>
+	<div class="flex items-center justify-center gap-2 py-2 text-muted-foreground" slot="noMore">
+		<Separator class="w-20" />
+		That's all
+		<Separator class="w-20" />
+	</div>
+	<div class="muted-text-box text-left" slot="noResults">No {entityPlural} found</div>
+	<div slot="spinner">
+		<LoaderCircle class="mx-auto my-2 animate-spin" />
+	</div>
+</InfiniteLoading>
diff --git a/src/routes/exercise-splits/+page.server.ts b/src/routes/exercise-splits/+page.server.ts
deleted file mode 100644
index 75e8bc37..00000000
--- a/src/routes/exercise-splits/+page.server.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { createCaller } from '$lib/trpc/router';
-import { createContext } from '$lib/trpc/context';
-
-export const load = async (event) => {
-	event.depends('exerciseSplits:all');
-	const trpc = createCaller(await createContext(event));
-	const searchString = event.url.searchParams.get('search') ?? undefined;
-
-	const exerciseSplits = trpc.exerciseSplits.load({ searchString });
-	return { exerciseSplits };
-};
diff --git a/src/routes/exercise-splits/+page.svelte b/src/routes/exercise-splits/+page.svelte
index 595421bf..95128f41 100644
--- a/src/routes/exercise-splits/+page.svelte
+++ b/src/routes/exercise-splits/+page.svelte
@@ -1,52 +1,50 @@
 <script lang="ts">
+	import { goto } from '$app/navigation';
+	import { page } from '$app/stores';
+	import { Badge } from '$lib/components/ui/badge/index.js';
 	import Button from '$lib/components/ui/button/button.svelte';
 	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
 	import { Input } from '$lib/components/ui/input';
 	import H2 from '$lib/components/ui/typography/H2.svelte';
+	import { trpc } from '$lib/trpc/client';
+	import type { RouterOutputs } from '$lib/trpc/router.js';
+	import type { InfiniteEvent } from 'svelte-infinite-loading';
 	import AddIcon from 'virtual:icons/lucide/plus';
 	import SearchIcon from 'virtual:icons/lucide/search';
-	import LoaderCircle from 'virtual:icons/lucide/loader-circle';
-	import { afterNavigate, goto } from '$app/navigation';
-	import { trpc } from '$lib/trpc/client';
-	import { InfiniteLoader, loaderState } from 'svelte-infinite';
-	import { page } from '$app/stores';
-	import type { ExerciseSplit, ExerciseSplitDay } from '@prisma/client';
-	import { Badge } from '$lib/components/ui/badge/index.js';
-	import { Skeleton } from '$lib/components/ui/skeleton/index.js';
-	import Separator from '$lib/components/ui/separator/separator.svelte';
+	import DefaultInfiniteLoader from '../../lib/components/DefaultInfiniteLoader.svelte';
 	import { exerciseSplitRunes } from './manage/exerciseSplitRunes.svelte.js';
 
-	type ExerciseSplitsWithSplitDays = (ExerciseSplit & { exerciseSplitDays: ExerciseSplitDay[] })[];
-
-	let { data } = $props();
-	let exerciseSplits: ExerciseSplitsWithSplitDays | 'loading' = $state('loading');
+	let exerciseSplits: RouterOutputs['exerciseSplits']['load'] = $state([]);
 	let searchString = $state($page.url.searchParams.get('search') ?? '');
 
-	afterNavigate(async () => {
-		loaderState.reset();
-		exerciseSplits = await data.exerciseSplits;
-		if (exerciseSplits.length !== 10) loaderState.complete();
-	});
-
 	function updateSearchParam(e: Event) {
 		e.preventDefault();
 		const url = new URL($page.url);
+		if (searchString === (url.searchParams.get('search') ?? '')) return;
+
 		if (searchString) url.searchParams.set('search', searchString);
 		else url.searchParams.delete('search');
 
-		exerciseSplits = 'loading';
+		exerciseSplits = [];
 		goto(url);
 	}
 
-	async function loadMore() {
+	async function loadMore(infiniteEvent: InfiniteEvent) {
 		const lastExerciseSplit = exerciseSplits.at(-1);
-		if (typeof lastExerciseSplit === 'string' || lastExerciseSplit === undefined) return;
 
 		const newExerciseSplits = await trpc().exerciseSplits.load.query({
-			cursorId: lastExerciseSplit.id
+			cursorId: lastExerciseSplit?.id,
+			searchString
 		});
-		if (exerciseSplits !== 'loading') exerciseSplits.push(...newExerciseSplits);
-		if (newExerciseSplits.length !== 10) loaderState.complete();
+
+		if (newExerciseSplits.length === 0) {
+			infiniteEvent.detail.complete();
+			return;
+		}
+
+		infiniteEvent.detail.loaded();
+		exerciseSplits.push(...newExerciseSplits);
+		if (newExerciseSplits.length < 10) infiniteEvent.detail.complete();
 	}
 
 	function createNewExerciseSplit() {
@@ -78,43 +76,20 @@
 		</DropdownMenu.Root>
 	</div>
 	<div class="flex h-px grow flex-col gap-1 overflow-y-auto">
-		{#if exerciseSplits === 'loading'}
-			{#each Array(10) as _}
-				<div class="flex h-12 items-center justify-between rounded-md border bg-card p-2">
-					<Skeleton class="text-lg-skeleton" />
-					<Skeleton class="badge-skeleton" />
-				</div>
-			{/each}
-		{:else}
-			<InfiniteLoader triggerLoad={loadMore}>
-				{#each exerciseSplits as exerciseSplit}
-					<Button
-						class="mb-1 flex h-12 items-center justify-between rounded-md border bg-card p-2"
-						href="/exercise-splits/{exerciseSplit.id}"
-						variant="outline"
-					>
-						<span class="truncate text-lg font-semibold">{exerciseSplit.name}</span>
-						<Badge>{exerciseSplit.exerciseSplitDays.length} days / cycle</Badge>
-					</Button>
-				{:else}
-					<div class="muted-text-box">No exercise splits found</div>
-				{/each}
-				{#snippet loading()}
-					<LoaderCircle class="animate-spin" />
-				{/snippet}
-				{#snippet error(load)}
-					<Button onclick={load} variant="outline">An error occurred. Retry?</Button>
-				{/snippet}
-				{#snippet noData()}
-					{#if exerciseSplits.length > 0}
-						<div class="flex items-center justify-start gap-2 font-semibold text-muted-foreground">
-							<Separator class="h-0.5 w-20" />
-							<span class="whitespace-nowrap">That's all!</span>
-							<Separator class="h-0.5 w-20" />
-						</div>
-					{/if}
-				{/snippet}
-			</InfiniteLoader>
-		{/if}
+		{#each exerciseSplits as exerciseSplit}
+			<Button
+				class="flex h-12 items-center justify-between rounded-md border bg-card p-2"
+				href="/exercise-splits/{exerciseSplit.id}"
+				variant="outline"
+			>
+				<span class="truncate text-lg font-semibold">{exerciseSplit.name}</span>
+				<Badge>{exerciseSplit.exerciseSplitDays.length} days / cycle</Badge>
+			</Button>
+		{/each}
+		<DefaultInfiniteLoader
+			{loadMore}
+			identifier={$page.url.searchParams.get('search')}
+			entityPlural="exercise splits"
+		/>
 	</div>
 </div>
diff --git a/src/routes/mesocycles/+page.server.ts b/src/routes/mesocycles/+page.server.ts
index 1c5cf618..fba9cf14 100644
--- a/src/routes/mesocycles/+page.server.ts
+++ b/src/routes/mesocycles/+page.server.ts
@@ -2,13 +2,8 @@ import { createContext } from '$lib/trpc/context';
 import { createCaller } from '$lib/trpc/router';
 
 export const load = async (event) => {
-	event.depends('mesocycles:all');
 	event.depends('mesocycles:active');
 	const trpc = createCaller(await createContext(event));
-	const searchString = event.url.searchParams.get('search') ?? undefined;
 
-	return {
-		mesocycles: trpc.mesocycles.load({ searchString }),
-		activeMesocycle: trpc.mesocycles.findActiveMesocycle()
-	};
+	return { activeMesocycle: trpc.mesocycles.findActiveMesocycle() };
 };
diff --git a/src/routes/mesocycles/+page.svelte b/src/routes/mesocycles/+page.svelte
index a5a871e9..d2f0e71e 100644
--- a/src/routes/mesocycles/+page.svelte
+++ b/src/routes/mesocycles/+page.svelte
@@ -1,48 +1,54 @@
 <script lang="ts">
+	import { goto } from '$app/navigation';
+	import { page } from '$app/stores';
+	import DefaultInfiniteLoader from '$lib/components/DefaultInfiniteLoader.svelte';
+	import { Badge } from '$lib/components/ui/badge/index.js';
 	import Button from '$lib/components/ui/button/button.svelte';
 	import { Input } from '$lib/components/ui/input';
-	import H2 from '$lib/components/ui/typography/H2.svelte';
-	import LoaderCircle from 'virtual:icons/lucide/loader-circle';
-	import AddIcon from 'virtual:icons/lucide/plus';
-	import SearchIcon from 'virtual:icons/lucide/search';
-	import { afterNavigate, goto } from '$app/navigation';
-	import { page } from '$app/stores';
 	import Separator from '$lib/components/ui/separator/separator.svelte';
 	import { Skeleton } from '$lib/components/ui/skeleton/index.js';
+	import H2 from '$lib/components/ui/typography/H2.svelte';
 	import { trpc } from '$lib/trpc/client.js';
 	import type { Mesocycle } from '@prisma/client';
-	import { InfiniteLoader, loaderState } from 'svelte-infinite';
-	import { Badge } from '$lib/components/ui/badge/index.js';
+	import { onMount } from 'svelte';
+	import type { InfiniteEvent } from 'svelte-infinite-loading';
+	import AddIcon from 'virtual:icons/lucide/plus';
+	import SearchIcon from 'virtual:icons/lucide/search';
 	import { mesocycleRunes } from './manage/mesocycleRunes.svelte.js';
 
 	let { data } = $props();
 	let activeMesocycle: Pick<Mesocycle, 'id' | 'name'> | null | 'loading' = $state('loading');
-	let mesocycles: Mesocycle[] | 'loading' = $state('loading');
+	let mesocycles: Mesocycle[] = $state([]);
 	let searchString = $state($page.url.searchParams.get('search') ?? '');
 
-	afterNavigate(async () => {
-		loaderState.reset();
-		[activeMesocycle, mesocycles] = await Promise.all([data.activeMesocycle, data.mesocycles]);
-		if (mesocycles.length !== 10) loaderState.complete();
+	onMount(async () => {
+		activeMesocycle = await data.activeMesocycle;
 	});
 
 	function updateSearchParam(e: Event) {
 		e.preventDefault();
 		const url = new URL($page.url);
+		if (searchString === (url.searchParams.get('search') ?? '')) return;
+
 		if (searchString) url.searchParams.set('search', searchString);
 		else url.searchParams.delete('search');
 
-		mesocycles = 'loading';
+		mesocycles = [];
 		goto(url);
 	}
 
-	async function loadMore() {
+	async function loadMore(infiniteEvent: InfiniteEvent) {
 		const lastMesocycle = mesocycles.at(-1);
-		if (typeof lastMesocycle === 'string' || lastMesocycle === undefined) return;
+		const newMesocycles = await trpc().mesocycles.load.query({ cursorId: lastMesocycle?.id, searchString });
+
+		if (newMesocycles.length === 0) {
+			infiniteEvent.detail.complete();
+			return;
+		}
 
-		const newMesocycles = await trpc().mesocycles.load.query({ cursorId: lastMesocycle.id });
-		if (mesocycles !== 'loading') mesocycles.push(...newMesocycles);
-		if (newMesocycles.length !== 10) loaderState.complete();
+		infiniteEvent.detail.loaded();
+		mesocycles.push(...newMesocycles);
+		if (newMesocycles.length < 10) infiniteEvent.detail.complete();
 	}
 
 	function createNewMesocycle() {
@@ -92,49 +98,22 @@
 		<Separator class="w-px grow" />
 	</div>
 	<div class="flex h-px grow flex-col gap-1 overflow-y-auto">
-		{#if mesocycles === 'loading'}
-			{#each Array(10) as _}
-				<div class="flex h-12 items-center justify-between rounded-md border bg-card p-2">
-					<Skeleton class="text-lg-skeleton" />
-					<Skeleton class="badge-skeleton" />
-				</div>
-			{/each}
-		{:else}
-			<InfiniteLoader triggerLoad={loadMore}>
-				{#each mesocycles as mesocycle}
-					<Button
-						class="mb-1 flex h-12 items-center justify-between rounded-md border bg-card p-2"
-						href="/mesocycles/{mesocycle.id}"
-						variant="outline"
-					>
-						<span class="text-lg font-semibold">{mesocycle.name}</span>
-						{#if !mesocycle.startDate}
-							<Badge variant="secondary">Unused</Badge>
-						{:else if !mesocycle.endDate}
-							<Badge>Active</Badge>
-						{:else}
-							<Badge variant="outline">Completed</Badge>
-						{/if}
-					</Button>
+		{#each mesocycles as mesocycle}
+			<Button
+				class="flex h-12 items-center justify-between rounded-md border bg-card p-2"
+				href="/mesocycles/{mesocycle.id}"
+				variant="outline"
+			>
+				<span class="text-lg font-semibold">{mesocycle.name}</span>
+				{#if !mesocycle.startDate}
+					<Badge variant="secondary">Unused</Badge>
+				{:else if !mesocycle.endDate}
+					<Badge>Active</Badge>
 				{:else}
-					<div class="muted-text-box">No mesocycles found</div>
-				{/each}
-				{#snippet loading()}
-					<LoaderCircle class="animate-spin" />
-				{/snippet}
-				{#snippet error(load)}
-					<Button onclick={load} variant="outline">An error occurred. Retry?</Button>
-				{/snippet}
-				{#snippet noData()}
-					{#if mesocycles.length > 0}
-						<div class="flex items-center justify-start gap-2 font-semibold text-muted-foreground">
-							<Separator class="h-0.5 w-20" />
-							<span class="whitespace-nowrap">That's all!</span>
-							<Separator class="h-0.5 w-20" />
-						</div>
-					{/if}
-				{/snippet}
-			</InfiniteLoader>
-		{/if}
+					<Badge variant="outline">Completed</Badge>
+				{/if}
+			</Button>
+		{/each}
+		<DefaultInfiniteLoader {loadMore} identifier={$page.url.searchParams.get('search')} entityPlural="mesocycles" />
 	</div>
 </div>
diff --git a/src/routes/workouts/+page.server.ts b/src/routes/workouts/+page.server.ts
index c21342dd..b4eac810 100644
--- a/src/routes/workouts/+page.server.ts
+++ b/src/routes/workouts/+page.server.ts
@@ -1,33 +1,10 @@
 import { createContext } from '$lib/trpc/context';
-import { createCaller, type RouterInputs } from '$lib/trpc/router';
+import { createCaller } from '$lib/trpc/router';
 
 export const load = async (event) => {
 	event.depends('workouts:all');
 	const trpc = createCaller(await createContext(event));
 
-	const currentFilters: Exclude<RouterInputs['workouts']['load']['filters'], undefined> = {};
-
-	const startDate = event.url.searchParams.get('startDate');
-	if (startDate) {
-		currentFilters.startDate = new Date(startDate);
-	}
-
-	const endDate = event.url.searchParams.get('endDate');
-	if (endDate) {
-		currentFilters.endDate = new Date(endDate);
-	}
-
-	const selectedMesocycles = event.url.searchParams.get('selectedMesocycles');
-	if (selectedMesocycles) {
-		currentFilters.selectedMesocycles = JSON.parse(selectedMesocycles);
-	}
-
-	const selectedWorkoutStatuses = event.url.searchParams.get('selectedWorkoutStatuses');
-	if (selectedWorkoutStatuses) {
-		currentFilters.selectedWorkoutStatuses = JSON.parse(selectedWorkoutStatuses);
-	}
-
-	const workouts = trpc.workouts.load({ filters: currentFilters });
 	const filterData = trpc.workouts.getFilterData();
-	return { workouts, filterData, currentFilters };
+	return { filterData };
 };
diff --git a/src/routes/workouts/+page.svelte b/src/routes/workouts/+page.svelte
index 7454b44f..b2ba75b9 100644
--- a/src/routes/workouts/+page.svelte
+++ b/src/routes/workouts/+page.svelte
@@ -1,40 +1,62 @@
 <script lang="ts">
-	import { afterNavigate, goto } from '$app/navigation';
+	import { goto } from '$app/navigation';
 	import { page } from '$app/stores';
+	import DefaultInfiniteLoader from '$lib/components/DefaultInfiniteLoader.svelte';
 	import Button from '$lib/components/ui/button/button.svelte';
-	import Separator from '$lib/components/ui/separator/separator.svelte';
-	import { Skeleton } from '$lib/components/ui/skeleton/index.js';
 	import H2 from '$lib/components/ui/typography/H2.svelte';
 	import { trpc } from '$lib/trpc/client';
-	import type { RouterOutputs } from '$lib/trpc/router.js';
+	import type { RouterInputs, RouterOutputs } from '$lib/trpc/router.js';
 	import type { WorkoutStatus } from '@prisma/client';
 	import type { DateRange } from 'bits-ui';
-	import { InfiniteLoader, loaderState } from 'svelte-infinite';
-	import LoaderCircle from 'virtual:icons/lucide/loader-circle';
+	import { type InfiniteLoadingEvents } from 'svelte-infinite-loading';
 	import AddIcon from 'virtual:icons/lucide/plus';
 	import FilterComponent from './(components)/FilterComponent.svelte';
-	import { workoutRunes } from './manage/workoutRunes.svelte.js';
 	import NoWorkoutsFilterComponent from './(components)/NoWorkoutsFilterComponent.svelte';
+	import { workoutRunes } from './manage/workoutRunes.svelte.js';
 
 	let { data } = $props();
-	let workouts: RouterOutputs['workouts']['load'] | 'loading' = $state('loading');
+	let workouts: RouterOutputs['workouts']['load'] = $state([]);
+	let currentFilters = $derived(getCurrentFilters());
 
-	afterNavigate(async () => {
-		loaderState.reset();
-		workouts = await data.workouts;
-		if (workouts.length !== 10) loaderState.complete();
-	});
+	function getCurrentFilters() {
+		const currentFilters: Exclude<RouterInputs['workouts']['load']['filters'], undefined> = {};
+		const startDate = $page.url.searchParams.get('startDate');
+		const endDate = $page.url.searchParams.get('endDate');
+		const selectedMesocycles = $page.url.searchParams.get('selectedMesocycles');
+		const selectedWorkoutStatuses = $page.url.searchParams.get('selectedWorkoutStatuses');
+
+		if (startDate) {
+			currentFilters.startDate = new Date(startDate);
+		}
+		if (endDate) {
+			currentFilters.endDate = new Date(endDate);
+		}
+		if (selectedMesocycles) {
+			currentFilters.selectedMesocycles = JSON.parse(selectedMesocycles);
+		}
+		if (selectedWorkoutStatuses) {
+			currentFilters.selectedWorkoutStatuses = JSON.parse(selectedWorkoutStatuses);
+		}
 
-	async function loadMore() {
+		return currentFilters;
+	}
+
+	async function loadMore(infiniteEvent: InfiniteLoadingEvents['infinite']) {
 		const lastWorkout = workouts.at(-1);
-		if (typeof lastWorkout === 'string' || lastWorkout === undefined) return;
 
 		const newWorkouts = await trpc().workouts.load.query({
-			cursorId: lastWorkout.id,
-			filters: data.currentFilters
+			cursorId: lastWorkout?.id,
+			filters: getCurrentFilters()
 		});
-		if (workouts !== 'loading') workouts.push(...newWorkouts);
-		if (newWorkouts.length !== 10) loaderState.complete();
+
+		if (newWorkouts.length === 0) {
+			infiniteEvent.detail.complete();
+			return;
+		}
+
+		infiniteEvent.detail.loaded();
+		workouts.push(...newWorkouts);
+		if (newWorkouts.length !== 10) infiniteEvent.detail.complete();
 	}
 
 	function createNewWorkout() {
@@ -72,6 +94,9 @@
 		} else {
 			newURL.searchParams.delete('selectedWorkoutStatuses');
 		}
+
+		if (newURL.toString() === $page.url.toString()) return;
+		workouts = [];
 		goto(newURL);
 	}
 </script>
@@ -80,70 +105,41 @@
 
 <div class="flex grow flex-col gap-2">
 	<div class="flex gap-1">
-		{#if workouts !== 'loading'}
-			{#await data.filterData}
-				TODO: skeleton
-			{:then filterData}
-				{#if filterData}
-					<FilterComponent {filterData} currentFilters={data.currentFilters} {setFilters} />
-				{:else}
-					<NoWorkoutsFilterComponent />
-				{/if}
-			{/await}
-		{/if}
+		{#await data.filterData}
+			TODO: skeleton
+		{:then filterData}
+			{#if filterData}
+				<FilterComponent {filterData} {currentFilters} {setFilters} />
+			{:else}
+				<NoWorkoutsFilterComponent />
+			{/if}
+		{/await}
 		<Button aria-label="create-workout" onclick={createNewWorkout}><AddIcon /></Button>
 	</div>
 	<div class="flex h-px grow flex-col gap-1 overflow-y-auto">
-		{#if workouts === 'loading'}
-			{#each Array(10) as _}
-				<div class="flex h-12 items-center justify-between rounded-md border bg-card p-2">
-					<Skeleton class="text-lg-skeleton" />
-					<Skeleton class="badge-skeleton" />
-				</div>
-			{/each}
-		{:else}
-			<InfiniteLoader triggerLoad={loadMore}>
-				{#each workouts as workout}
-					{@const { workoutOfMesocycle } = workout}
-					<Button
-						class="mb-1 flex h-12 items-center justify-between rounded-md border bg-card p-2"
-						href="/workouts/{workout.id}"
-						variant="outline"
-					>
-						<span class="text-lg font-semibold">
-							{workout.startedAt.toLocaleDateString(undefined, {
-								day: '2-digit',
-								month: 'long'
-							})}
-						</span>
-						{#if workoutOfMesocycle}
-							{@const splitDayName =
-								workoutOfMesocycle.mesocycle.mesocycleExerciseSplitDays[workoutOfMesocycle.splitDayIndex].name}
-							<span class="truncate text-muted-foreground">
-								{splitDayName === '' ? 'Rest' : splitDayName}
-								{workoutOfMesocycle.workoutStatus === 'Skipped' ? '(skipped)' : ''}
-							</span>
-						{/if}
-					</Button>
-				{:else}
-					<div class="muted-text-box">No workouts found</div>
-				{/each}
-				{#snippet loading()}
-					<LoaderCircle class="animate-spin" />
-				{/snippet}
-				{#snippet error(load)}
-					<Button onclick={load} variant="outline">An error occurred. Retry?</Button>
-				{/snippet}
-				{#snippet noData()}
-					{#if workouts.length > 0}
-						<div class="flex items-center justify-start gap-2 font-semibold text-muted-foreground">
-							<Separator class="h-0.5 w-20" />
-							<span class="whitespace-nowrap">That's all!</span>
-							<Separator class="h-0.5 w-20" />
-						</div>
-					{/if}
-				{/snippet}
-			</InfiniteLoader>
-		{/if}
+		{#each workouts as workout}
+			{@const { workoutOfMesocycle } = workout}
+			<Button
+				class="flex h-12 items-center justify-between rounded-md border bg-card p-2"
+				href="/workouts/{workout.id}"
+				variant="outline"
+			>
+				<span class="text-lg font-semibold">
+					{workout.startedAt.toLocaleDateString(undefined, {
+						day: '2-digit',
+						month: 'long'
+					})}
+				</span>
+				{#if workoutOfMesocycle}
+					{@const splitDayName =
+						workoutOfMesocycle.mesocycle.mesocycleExerciseSplitDays[workoutOfMesocycle.splitDayIndex].name}
+					<span class="truncate text-muted-foreground">
+						{splitDayName === '' ? 'Rest' : splitDayName}
+						{workoutOfMesocycle.workoutStatus === 'Skipped' ? '(skipped)' : ''}
+					</span>
+				{/if}
+			</Button>
+		{/each}
+		<DefaultInfiniteLoader {loadMore} identifier={currentFilters} entityPlural="workouts" />
 	</div>
 </div>
diff --git a/src/routes/workouts/manage/exercises/(components)/ExerciseHistorySheet.svelte b/src/routes/workouts/manage/exercises/(components)/ExerciseHistorySheet.svelte
index c675300d..58355e16 100644
--- a/src/routes/workouts/manage/exercises/(components)/ExerciseHistorySheet.svelte
+++ b/src/routes/workouts/manage/exercises/(components)/ExerciseHistorySheet.svelte
@@ -1,26 +1,24 @@
 <script lang="ts">
-	import * as Sheet from '$lib/components/ui/sheet';
-	import { InfiniteLoader, loaderState } from 'svelte-infinite';
-	import { workoutRunes } from '../../workoutRunes.svelte';
+	import DefaultInfiniteLoader from '$lib/components/DefaultInfiniteLoader.svelte';
 	import { Button } from '$lib/components/ui/button';
-	import { Separator } from '$lib/components/ui/separator';
-	import type { RouterOutputs } from '$lib/trpc/router';
+	import * as Sheet from '$lib/components/ui/sheet';
 	import { trpc } from '$lib/trpc/client';
-	import LoaderCircle from 'virtual:icons/lucide/loader-circle';
+	import type { RouterOutputs } from '$lib/trpc/router';
 	import { untrack } from 'svelte';
-	import WorkoutExerciseCard from '../../../[workoutId]/(components)/WorkoutExerciseCard.svelte';
 	import CopyIcon from 'virtual:icons/lucide/clipboard-copy';
+	import WorkoutExerciseCard from '../../../[workoutId]/(components)/WorkoutExerciseCard.svelte';
+	import { workoutRunes } from '../../workoutRunes.svelte';
+	import type { InfiniteEvent } from 'svelte-infinite-loading';
 
 	let exercisesFound: RouterOutputs['workouts']['getExerciseHistory'] = $state([]);
 
 	$effect(() => {
 		if (untrack(() => exercisesFound.at(-1)?.name) !== workoutRunes.exerciseHistorySheetName) {
 			exercisesFound = [];
-			loaderState.reset();
 		}
 	});
 
-	async function loadMore() {
+	async function loadMore(infiniteEvent: InfiniteEvent) {
 		const exerciseName = workoutRunes.exerciseHistorySheetName;
 		const lastExerciseFound = exercisesFound.at(-1);
 		if (exerciseName === undefined) return;
@@ -29,11 +27,15 @@
 			cursorId: lastExerciseFound?.id,
 			exerciseName
 		});
+		if (newExercisesFound.length === 0) {
+			infiniteEvent.detail.complete();
+			return;
+		}
+
+		infiniteEvent.detail.loaded();
 		exercisesFound.push(...newExercisesFound);
-		if (newExercisesFound.length !== 10) loaderState.complete();
+		if (newExercisesFound.length < 10) infiniteEvent.detail.complete();
 	}
-
-	let containerElement: HTMLDivElement | undefined = $state();
 </script>
 
 <Sheet.Root bind:open={workoutRunes.exerciseHistorySheetOpen}>
@@ -44,52 +46,31 @@
 				{workoutRunes.exerciseHistorySheetName}
 			</Sheet.Description>
 		</Sheet.Header>
-		<div bind:this={containerElement} class="flex h-px grow flex-col overflow-y-auto">
-			<InfiniteLoader
-				intersectionOptions={{ rootMargin: '0px 0px 200px 0px', root: containerElement }}
-				triggerLoad={loadMore}
-			>
-				{#each exercisesFound as exercise}
-					{@const wm = exercise.workout.workoutOfMesocycle}
-					<div class="mb-1 mt-4 flex items-start gap-1">
-						<Button
-							onclick={() => workoutRunes.copyExerciseSetNumbersFromHistory(exercise)}
-							size="icon"
-							variant="secondary"
-						>
-							<CopyIcon />
-						</Button>
-						<div class="mr-auto flex flex-col">
-							<span class="font-bold">{wm?.mesocycle.mesocycleExerciseSplitDays[wm.splitDayIndex].name}</span>
-							<span class="text-xs font-semibold">{wm?.mesocycle.name}</span>
-						</div>
-						<span class="font-semibold text-muted-foreground">
-							{exercise.workout.startedAt.toLocaleDateString(undefined, {
-								day: 'numeric',
-								month: 'short'
-							})}
-						</span>
+		<div class="flex h-px grow flex-col overflow-y-auto">
+			{#each exercisesFound as exercise}
+				{@const wm = exercise.workout.workoutOfMesocycle}
+				<div class="mb-1 mt-4 flex items-start gap-1">
+					<Button
+						onclick={() => workoutRunes.copyExerciseSetNumbersFromHistory(exercise)}
+						size="icon"
+						variant="secondary"
+					>
+						<CopyIcon />
+					</Button>
+					<div class="mr-auto flex flex-col">
+						<span class="font-bold">{wm?.mesocycle.mesocycleExerciseSplitDays[wm.splitDayIndex].name}</span>
+						<span class="text-xs font-semibold">{wm?.mesocycle.name}</span>
 					</div>
-					<WorkoutExerciseCard {exercise} />
-				{/each}
-				{#snippet loading()}
-					<LoaderCircle class="animate-spin" />
-				{/snippet}
-				{#snippet error(load)}
-					<Button onclick={load} variant="outline">An error occurred. Retry?</Button>
-				{/snippet}
-				{#snippet noData()}
-					{#if exercisesFound.length > 0}
-						<div class="flex items-center justify-start gap-2 font-semibold text-muted-foreground">
-							<Separator class="h-0.5 w-20" />
-							<span class="whitespace-nowrap">That's all!</span>
-							<Separator class="h-0.5 w-20" />
-						</div>
-					{:else}
-						<div class="muted-text-box w-full">No exercise history found</div>
-					{/if}
-				{/snippet}
-			</InfiniteLoader>
+					<span class="font-semibold text-muted-foreground">
+						{exercise.workout.startedAt.toLocaleDateString(undefined, {
+							day: 'numeric',
+							month: 'short'
+						})}
+					</span>
+				</div>
+				<WorkoutExerciseCard {exercise} />
+			{/each}
+			<DefaultInfiniteLoader {loadMore} identifier={workoutRunes.exerciseHistorySheetName} entityPlural="exercises" />
 		</div>
 	</Sheet.Content>
 </Sheet.Root>
diff --git a/tests/models/mesocycles.spec.ts b/tests/models/mesocycles.spec.ts
index 92254121..87ca0ebd 100644
--- a/tests/models/mesocycles.spec.ts
+++ b/tests/models/mesocycles.spec.ts
@@ -126,7 +126,7 @@ test('start and stop a mesocycle', async ({ page }) => {
 	});
 	await expect(page.getByRole('tabpanel')).toContainText(`MesoName ${new Date().toLocaleDateString()} Active`);
 	await page.getByRole('link', { name: 'Mesocycles' }).click();
-	await expect(page.getByRole('main')).toContainText("Active MesoName Active All MesoName Active That's all!");
+	await expect(page.getByRole('main')).toContainText("Active MesoName Active All MesoName Active That's all");
 	await page.getByRole('link', { name: 'MesoName Active' }).first().click();
 	await page.getByRole('button', { name: 'Stop mesocycle' }).click();
 	await expect(page.getByRole('status').filter({ hasText: 'Mesocycle stopped successfully' })).toBeVisible({
@@ -136,7 +136,7 @@ test('start and stop a mesocycle', async ({ page }) => {
 		`MesoName ${new Date().toLocaleDateString()} to ${new Date().toLocaleDateString()} Completed`
 	);
 	await page.getByRole('link', { name: 'Mesocycles' }).click();
-	await expect(page.getByRole('main')).toContainText("Active No active mesocycle All MesoName Completed That's all!");
+	await expect(page.getByRole('main')).toContainText("Active No active mesocycle All MesoName Completed That's all");
 });
 
 test("edit mesocycle's exercise split", async ({ page }) => {