Add component for displaying page laod errors

apps/desktop/src/lib/components/Board.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import BoardEmptyState from './BoardEmptyState.svelte';
 	import FullviewLoading from './FullviewLoading.svelte';
+	import PageLoadFailed from './PageLoadFailed.svelte';
 	import BranchDropzone from '$lib/branch/BranchDropzone.svelte';
 	import BranchLane from '$lib/branch/BranchLane.svelte';
 	import { showHistoryView } from '$lib/config/config';
@@ -75,7 +76,7 @@
 
 <svelte:window on:keydown={handleKeyDown} />
 {#if $error}
-	<div>Something went wrong...</div>
+	<PageLoadFailed error={$error} />
 {:else if !$branches}
 	<FullviewLoading />
 {:else}

apps/desktop/src/lib/components/PageLoadFailed.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+	import loadErrorSvg from '$lib/assets/illustrations/load-error.svg?raw';
+	import InfoMessage from '$lib/shared/InfoMessage.svelte';
+
+	export let error: any = undefined;
+</script>
+
+<div class="decorative-split-view">
+	<div class="left-side">
+		<div class="left-side__content">
+			<h2 class="problem__title text-18 text-body text-bold">
+				There was a problem loading this page
+			</h2>
+
+			<InfoMessage filled outlined={false} style="error" icon="info">
+				<svelte:fragment slot="content">
+					{error ? error : 'An unknown error occurred'}
+				</svelte:fragment>
+			</InfoMessage>
+		</div>
+	</div>
+	<div class="right-side">
+		<div class="right-side-wrapper">
+			<div class="img-wrapper">
+				{@html loadErrorSvg}
+			</div>
+		</div>
+	</div>
+</div>
+
+<style lang="postcss">
+	.decorative-split-view {
+		cursor: default;
+		user-select: none;
+		display: flex;
+		flex-grow: 1;
+		background-color: var(--clr-bg-1);
+	}
+	.right-side {
+		display: flex;
+		flex-direction: column;
+		position: relative;
+	}
+
+	.left-side {
+		display: grid;
+		align-items: center;
+		padding: 40px 80px;
+		flex: 1.3;
+		background-color: var(--clr-bg-1);
+		overflow-y: auto;
+	}
+	.left-side__content {
+		display: flex;
+		flex-direction: column;
+		margin: 0 auto;
+		width: 100%;
+		max-width: 512px;
+	}
+
+	.problem__title {
+		color: var(--clr-scale-ntrl-30);
+	}
+	.img-wrapper {
+		flex: 1;
+		width: 100%;
+		max-width: 440px;
+		overflow: hidden;
+		padding: 0 24px;
+	}
+	.right-side-wrapper {
+		overflow: hidden;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		height: 100%;
+		border-radius: 8px;
+	}
+	.problem__title {
+		color: var(--clr-scale-ntrl-30);
+		margin-bottom: 12px;
+	}
+</style>

apps/desktop/src/routes/[projectId]/branch/[...name]/+page.svelte

@@ -2,6 +2,7 @@
 	import { GitBranchService } from '$lib/branches/gitBranch';
 	import BranchPreview from '$lib/components/BranchPreview.svelte';
 	import FullviewLoading from '$lib/components/FullviewLoading.svelte';
+	import PageLoadFailed from '$lib/components/PageLoadFailed.svelte';
 	import { getForgeListingService } from '$lib/forge/interface/forgeListingService';
 	import { BranchData } from '$lib/vbranches/types';
 	import { getContext } from '@gitbutler/shared/context';
@@ -17,6 +18,7 @@
 	let localBranch = $state<BranchData>();
 	let remoteBranches = $state<BranchData[]>([]);
 	let loading = $state(false);
+	let error = $state<unknown>();
 
 	$effect(() => {
 		if (!name) return;
@@ -25,17 +27,23 @@
 
 	async function findBranches(name: string) {
 		loading = true;
+		error = undefined;
 		try {
 			const branches = await gitBranchService.findBranches(name);
 			localBranch = branches.find((branch) => !branch.isRemote);
 			remoteBranches = branches.filter((branch) => branch.isRemote);
+		} catch (err) {
+			console.error(err);
+			error = err;
 		} finally {
 			loading = false;
 		}
 	}
 </script>
 
-{#if loading}
+{#if error}
+	<PageLoadFailed {error} />
+{:else if loading}
 	<FullviewLoading />
 {:else}
 	{#if localBranch && remoteBranches.length === 0}