From d4773717367000928e1b1de74066ac79191f43be Mon Sep 17 00:00:00 2001
From: Caleb Owens <caleb@gitbutler.com>
Date: Fri, 13 Dec 2024 17:30:26 +0100
Subject: [PATCH] Convert project over to loadable data

---
 .../lib/backend/projectCloudSync.svelte.ts    |  7 +-
 apps/desktop/src/lib/feeds/CreatePost.svelte  |  8 +--
 .../CloudProjectSettings.svelte               | 69 +++++++++++--------
 .../ProjectConnectModal.svelte                | 67 ++++++++++--------
 .../src/routes/[projectId]/feed/+page.svelte  | 17 +++--
 .../web/src/routes/organizations/+page.svelte | 41 ++++++-----
 packages/shared/src/lib/network/loadable.ts   | 66 ++++++++++++++++--
 .../organizations/OrganizationModal.svelte    |  6 +-
 .../lib/organizations/organizationService.ts  | 38 +++++-----
 .../lib/organizations/organizationsSlice.ts   |  5 +-
 .../src/lib/organizations/projectService.ts   | 26 +++++--
 .../organizations/projectsPreview.svelte.ts   | 39 ++++++++---
 .../src/lib/organizations/projectsSlice.ts    | 12 ++--
 .../shared/src/lib/organizations/types.ts     |  4 +-
 14 files changed, 267 insertions(+), 138 deletions(-)

diff --git a/apps/desktop/src/lib/backend/projectCloudSync.svelte.ts b/apps/desktop/src/lib/backend/projectCloudSync.svelte.ts
index 4513aecc92..7d5663571b 100644
--- a/apps/desktop/src/lib/backend/projectCloudSync.svelte.ts
+++ b/apps/desktop/src/lib/backend/projectCloudSync.svelte.ts
@@ -25,14 +25,17 @@ export function projectCloudSync(
 		registerInterest(cloudProjectInterest);
 	});
 
-	const cloudProject = $derived(
+	const loadableCloudProject = $derived(
 		project.current?.api
 			? projectsSelectors.selectById(appState.projects, project.current.api.repository_id)
 			: undefined
 	);
 
 	$effect(() => {
-		if (!project.current?.api || !cloudProject) return;
+		if (!project.current?.api || !loadableCloudProject || loadableCloudProject.type !== 'found')
+			return;
+
+		const cloudProject = loadableCloudProject.value;
 		const persistedProjectUpdatedAt = new Date(project.current.api.updated_at).getTime();
 		const cloudProjectUpdatedAt = new Date(cloudProject.updatedAt).getTime();
 		if (persistedProjectUpdatedAt >= cloudProjectUpdatedAt) return;
diff --git a/apps/desktop/src/lib/feeds/CreatePost.svelte b/apps/desktop/src/lib/feeds/CreatePost.svelte
index dd16578fde..d9abb15e92 100644
--- a/apps/desktop/src/lib/feeds/CreatePost.svelte
+++ b/apps/desktop/src/lib/feeds/CreatePost.svelte
@@ -73,13 +73,13 @@
 	// Post creation
 	let newPostContent = $derived(persisted('', `postContent--${feedIdentity}--${replyTo}`));
 	function createPost() {
-		if (!feedIdentity?.current) return;
-		if (!parentProject?.current) return;
+		if (feedIdentity?.current.type !== 'found') return;
+		if (parentProject?.current?.type !== 'found') return;
 
 		feedService.createPost(
 			$newPostContent,
-			parentProject.current.repositoryId,
-			feedIdentity.current,
+			parentProject.current.value.repositoryId,
+			feedIdentity.current.value,
 			replyTo,
 			picture
 		);
diff --git a/apps/desktop/src/lib/settings/userPreferences/CloudProjectSettings.svelte b/apps/desktop/src/lib/settings/userPreferences/CloudProjectSettings.svelte
index c36d0f684c..c7094b547a 100644
--- a/apps/desktop/src/lib/settings/userPreferences/CloudProjectSettings.svelte
+++ b/apps/desktop/src/lib/settings/userPreferences/CloudProjectSettings.svelte
@@ -7,6 +7,7 @@
 	import * as toasts from '$lib/utils/toasts';
 	import { getContext, getContextStore } from '@gitbutler/shared/context';
 	import RegisterInterest from '@gitbutler/shared/interest/RegisterInterest.svelte';
+	import Loading from '@gitbutler/shared/network/Loading.svelte';
 	import { OrganizationService } from '@gitbutler/shared/organizations/organizationService';
 	import { organizationsSelectors } from '@gitbutler/shared/organizations/organizationsSlice';
 	import { ProjectService as CloudProjectService } from '@gitbutler/shared/organizations/projectService';
@@ -138,36 +139,44 @@
 		{/snippet}
 	</Section>
 
-	{#if !cloudProject?.parentProjectRepositoryId}
-		<Section>
-			{#snippet title()}
-				Link your project with an organization
-			{/snippet}
-
-			<RegisterInterest interest={usersOrganizationsInterest} />
-
-			<div>
-				{#each usersOrganizations as organization, index}
-					<SectionCard
-						roundedBottom={index === usersOrganizations.length - 1}
-						roundedTop={index === 0}
-						orientation="row"
-						centerAlign
-					>
-						{#snippet children()}
-							<h5 class="text-15 text-bold flex-grow">{organization.name || organization.slug}</h5>
-						{/snippet}
-						{#snippet actions()}
-							<ProjectConnectModal
-								organizationSlug={organization.slug}
-								projectRepositoryId={cloudProject.repositoryId}
-							/>
-						{/snippet}
-					</SectionCard>
-				{/each}
-			</div>
-		</Section>
-	{/if}
+	<Loading loadable={cloudProject}>
+		{#snippet children(cloudProject)}
+			<Section>
+				{#snippet title()}
+					Link your project with an organization
+				{/snippet}
+
+				<RegisterInterest interest={usersOrganizationsInterest} />
+
+				<div>
+					{#each usersOrganizations as loadableOrganization, index}
+						<SectionCard
+							roundedBottom={index === usersOrganizations.length - 1}
+							roundedTop={index === 0}
+							orientation="row"
+							centerAlign
+						>
+							{#snippet children()}
+								<Loading loadable={loadableOrganization}>
+									{#snippet children(organization)}
+										<h5 class="text-15 text-bold flex-grow">
+											{organization.name || organization.slug}
+										</h5>
+									{/snippet}
+								</Loading>
+							{/snippet}
+							{#snippet actions()}
+								<ProjectConnectModal
+									organizationSlug={loadableOrganization.id}
+									projectRepositoryId={cloudProject.repositoryId}
+								/>
+							{/snippet}
+						</SectionCard>
+					{/each}
+				</div>
+			</Section>
+		{/snippet}
+	</Loading>
 {:else if !$project?.api?.repository_id}
 	<Section>
 		<Button onclick={createProject}>Create Gitbutler Project</Button>
diff --git a/apps/desktop/src/lib/settings/userPreferences/ProjectConnectModal.svelte b/apps/desktop/src/lib/settings/userPreferences/ProjectConnectModal.svelte
index ad3b64c091..c0ccf2ee21 100644
--- a/apps/desktop/src/lib/settings/userPreferences/ProjectConnectModal.svelte
+++ b/apps/desktop/src/lib/settings/userPreferences/ProjectConnectModal.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { getContext } from '@gitbutler/shared/context';
 	import RegisterInterest from '@gitbutler/shared/interest/RegisterInterest.svelte';
+	import Loading from '@gitbutler/shared/network/Loading.svelte';
 	import { OrganizationService } from '@gitbutler/shared/organizations/organizationService';
 	import { organizationsSelectors } from '@gitbutler/shared/organizations/organizationsSlice';
 	import { ProjectService } from '@gitbutler/shared/organizations/projectService';
@@ -26,53 +27,59 @@
 	);
 	const projectInterest = $derived(projectsService.getProjectInterest(projectRepositoryId));
 
-	const organization = $derived(
+	const chosenOrganization = $derived(
 		organizationsSelectors.selectById(appState.organizations, organizationSlug)
 	);
-	const project = $derived(projectsSelectors.selectById(appState.projects, projectRepositoryId));
-
-	const organizationProjects = $derived(
-		organization?.projectRepositoryIds?.map((repositoryId) => ({
-			project: projectsSelectors.selectById(appState.projects, repositoryId),
-			projectInterest: projectsService.getProjectInterest(repositoryId)
-		})) || []
+	const targetProject = $derived(
+		projectsSelectors.selectById(appState.projects, projectRepositoryId)
 	);
 
+	const organizationProjects = $derived.by(() => {
+		if (chosenOrganization?.type !== 'found') return [];
+		return (
+			chosenOrganization.value.projectRepositoryIds?.map((repositoryId) => ({
+				project: projectsSelectors.selectById(appState.projects, repositoryId),
+				interest: projectsService.getProjectInterest(repositoryId)
+			})) || []
+		);
+	});
+
 	function connectToOrganization(projectSlug?: string) {
-		if (!project || !organization) return;
+		if (targetProject?.type !== 'found' || chosenOrganization?.type !== 'found') return;
 
 		projectsService.connectProjectToOrganization(
-			project.repositoryId,
-			organization.slug,
+			targetProject.value.repositoryId,
+			chosenOrganization.value.slug,
 			projectSlug
 		);
 	}
 
+	const title = $derived.by(() => {
+		if (targetProject?.type !== 'found' || chosenOrganization?.type !== 'found') return;
+
+		return `Join ${targetProject.value.name} into ${chosenOrganization.value.name}`;
+	});
+
 	let modal = $state<Modal>();
 </script>
 
-<Modal bind:this={modal} title={`Join ${project?.name} into ${organization?.name}`}>
+<Modal bind:this={modal} {title}>
 	<RegisterInterest interest={organizationInterest} />
 	<RegisterInterest interest={projectInterest} />
 
-	{#if organization}
-		{#each organizationProjects as { project, projectInterest }, index}
-			<RegisterInterest interest={projectInterest} />
-
-			<SectionCard
-				roundedTop={index === 0}
-				roundedBottom={index === organizationProjects.length - 1}
-			>
-				{#if project}
-					<h5>{project.name}</h5>
-
-					<Button onclick={() => connectToOrganization(project.slug)}>Connect</Button>
-				{:else}
-					<p>Loading...</p>
-				{/if}
-			</SectionCard>
-		{/each}
-	{/if}
+	{#each organizationProjects as { project: organizationProject, interest }, index}
+		<RegisterInterest {interest} />
+
+		<SectionCard roundedTop={index === 0} roundedBottom={index === organizationProjects.length - 1}>
+			<Loading loadable={organizationProject}>
+				{#snippet children(organizationProject)}
+					<h5>{organizationProject.name}</h5>
+
+					<Button onclick={() => connectToOrganization(organizationProject.slug)}>Connect</Button>
+				{/snippet}
+			</Loading>
+		</SectionCard>
+	{/each}
 
 	<Button onclick={() => connectToOrganization()}>Create organization project</Button>
 </Modal>
diff --git a/apps/desktop/src/routes/[projectId]/feed/+page.svelte b/apps/desktop/src/routes/[projectId]/feed/+page.svelte
index 9a35090ef7..bc3e7f1b62 100644
--- a/apps/desktop/src/routes/[projectId]/feed/+page.svelte
+++ b/apps/desktop/src/routes/[projectId]/feed/+page.svelte
@@ -22,18 +22,25 @@
 			: undefined
 	);
 
-	const feed = $derived(getFeed(appState, feedService, feedIdentity?.current));
+	const feed = $derived.by(() => {
+		if (feedIdentity?.current.type !== 'found') return;
+		return getFeed(appState, feedService, feedIdentity?.current.value);
+	});
 
 	// Infinite scrolling
-	const lastPost = $derived(getFeedLastPost(appState, feedService, feed.current));
+	const lastPost = $derived(getFeedLastPost(appState, feedService, feed?.current));
 
 	let lastElement = $state<HTMLElement | undefined>();
 	$effect(() => {
 		if (!lastElement) return;
 
 		const observer = new IntersectionObserver((entries) => {
-			if (entries[0]?.isIntersecting && lastPost.current?.createdAt && feedIdentity?.current) {
-				feedService.getFeedPage(feedIdentity.current, lastPost.current.createdAt);
+			if (
+				entries[0]?.isIntersecting &&
+				lastPost.current?.createdAt &&
+				feedIdentity?.current.type === 'found'
+			) {
+				feedService.getFeedPage(feedIdentity.current.value, lastPost.current.createdAt);
 			}
 		});
 
@@ -51,7 +58,7 @@
 
 			<hr />
 
-			{#if feed.current}
+			{#if feed?.current}
 				{#each feed.current.postIds as postId, index (postId)}
 					<div class="bleep-container">
 						{#if index < feed.current.postIds.length - 1 && lastPost.current && feedIdentity?.current}
diff --git a/apps/web/src/routes/organizations/+page.svelte b/apps/web/src/routes/organizations/+page.svelte
index 3853805c61..8fa7e4ce0f 100644
--- a/apps/web/src/routes/organizations/+page.svelte
+++ b/apps/web/src/routes/organizations/+page.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
 	import { getContext } from '@gitbutler/shared/context';
-	import { HttpClient } from '@gitbutler/shared/network/httpClient';
 	import RegisterInterest from '@gitbutler/shared/interest/RegisterInterest.svelte';
+	import Loading from '@gitbutler/shared/network/Loading.svelte';
+	import { HttpClient } from '@gitbutler/shared/network/httpClient';
 	import CreateOrganizationModal from '@gitbutler/shared/organizations/CreateOrganizationModal.svelte';
 	import JoinOrganizationModal from '@gitbutler/shared/organizations/JoinOrganizationModal.svelte';
 	import OrganizationModal from '@gitbutler/shared/organizations/OrganizationModal.svelte';
@@ -32,25 +33,29 @@
 <Button onclick={() => createOrganizationModal?.show()}>Create an Organizaton</Button>
 
 <div>
-	{#each organizations as organization, index (organization.slug)}
-		<SectionCard
-			roundedTop={index === 0}
-			roundedBottom={index === organizations.length - 1}
-			orientation="row"
-		>
-			{#snippet children()}
-				<div class="inline">
-					<p class="text-15 text-bold">{organization.name || organization.slug}</p>
-					{#if organization.name}
-						<p class="text-13">{organization.slug}</p>
-					{/if}
-				</div>
-			{/snippet}
+	{#each organizations as organization, index (organization.id)}
+		<Loading loadable={organization}>
+			{#snippet children(organization)}
+				<SectionCard
+					roundedTop={index === 0}
+					roundedBottom={index === organizations.length - 1}
+					orientation="row"
+				>
+					{#snippet children()}
+						<div class="inline">
+							<p class="text-15 text-bold">{organization.name || organization.slug}</p>
+							{#if organization.name}
+								<p class="text-13">{organization.slug}</p>
+							{/if}
+						</div>
+					{/snippet}
 
-			{#snippet actions()}
-				<OrganizationModal slug={organization.slug} />
+					{#snippet actions()}
+						<OrganizationModal slug={organization.slug} />
+					{/snippet}
+				</SectionCard>
 			{/snippet}
-		</SectionCard>
+		</Loading>
 	{/each}
 </div>
 
diff --git a/packages/shared/src/lib/network/loadable.ts b/packages/shared/src/lib/network/loadable.ts
index 66f93f6e87..682f6c2735 100644
--- a/packages/shared/src/lib/network/loadable.ts
+++ b/packages/shared/src/lib/network/loadable.ts
@@ -1,4 +1,62 @@
-export type LoadableData<T, Id> =
-	| { type: 'loading' | 'not-found'; id: Id; error?: undefined }
-	| { type: 'found'; id: Id; value: T; error?: undefined }
-	| { type: 'error'; id: Id; error: Error };
+import { ApiError } from '$lib/network/types';
+import type { EntityId, EntityAdapter, EntityState } from '@reduxjs/toolkit';
+
+export type Loadable<T> =
+	| { type: 'loading' | 'not-found' }
+	| { type: 'found'; value: T }
+	| { type: 'error'; error: Error };
+
+export type LoadableData<T, Id> = Loadable<T> & { id: Id };
+
+export function errorToLoadable<T, Id>(error: unknown, id: Id): LoadableData<T, Id> {
+	if (error instanceof Error) {
+		if (error instanceof ApiError && error.response.status === 404) {
+			return { type: 'not-found', id };
+		}
+
+		return { type: 'error', id, error };
+	}
+
+	return { type: 'error', id, error: new Error(String(error)) };
+}
+
+export function loadableUpsert<T, Id extends EntityId>(
+	adapter: EntityAdapter<LoadableData<T, Id>, Id>
+) {
+	return (
+		state: EntityState<LoadableData<T, Id>, Id>,
+		action: { payload: LoadableData<T, Id> }
+	) => {
+		loadableUpsertMany(adapter)(state, { payload: [action.payload] });
+	};
+}
+
+export function loadableUpsertMany<T, Id extends EntityId>(
+	adapter: EntityAdapter<LoadableData<T, Id>, Id>
+) {
+	return (
+		state: EntityState<LoadableData<T, Id>, Id>,
+		action: { payload: LoadableData<T, Id>[] }
+	) => {
+		const values = action.payload.map((payload) => {
+			const value = state.entities[payload.id];
+			if (value === undefined) {
+				return payload;
+			}
+
+			if (!(value.type === 'found' && payload.type === 'found')) {
+				return payload;
+			}
+
+			const newValue: LoadableData<T, Id> = {
+				type: 'found',
+				id: payload.id,
+				value: { ...value, ...payload.value }
+			};
+
+			return newValue;
+		});
+
+		adapter.setMany(state, values);
+	};
+}
diff --git a/packages/shared/src/lib/organizations/OrganizationModal.svelte b/packages/shared/src/lib/organizations/OrganizationModal.svelte
index 11042a7fc1..4d3c285a7f 100644
--- a/packages/shared/src/lib/organizations/OrganizationModal.svelte
+++ b/packages/shared/src/lib/organizations/OrganizationModal.svelte
@@ -110,7 +110,11 @@
 						roundedTop={index === 0}
 						orientation="row"
 					>
-						<p>{project?.name}</p>
+						<Loading loadable={project}>
+							{#snippet children(project)}
+								<p>{project.name}</p>
+							{/snippet}
+						</Loading>
 					</SectionCard>
 				{/each}
 			</div>
diff --git a/packages/shared/src/lib/organizations/organizationService.ts b/packages/shared/src/lib/organizations/organizationService.ts
index 3c93be7add..53842e0ef4 100644
--- a/packages/shared/src/lib/organizations/organizationService.ts
+++ b/packages/shared/src/lib/organizations/organizationService.ts
@@ -1,6 +1,6 @@
 import { InterestStore, type Interest } from '$lib/interest/intrestStore';
 import { type HttpClient } from '$lib/network/httpClient';
-import { ApiError } from '$lib/network/types';
+import { errorToLoadable } from '$lib/network/loadable';
 import {
 	addOrganization,
 	upsertOrganization,
@@ -13,6 +13,7 @@ import {
 	type ApiOrganization,
 	type ApiOrganizationWithDetails,
 	type LoadableOrganization,
+	type LoadableProject,
 	type Organization
 } from '$lib/organizations/types';
 import { POLLING_REGULAR, POLLING_SLOW } from '$lib/polling';
@@ -31,14 +32,11 @@ export class OrganizationService {
 		return this.organizationListingInterests
 			.findOrCreateSubscribable(undefined, async () => {
 				const apiOrganizations = await this.httpClient.get<ApiOrganization[]>('organization');
-				const organizations = apiOrganizations.map(
-					(apiOrganizations) =>
-						({
-							type: 'found',
-							id: apiOrganizations.slug,
-							value: apiToOrganization(apiOrganizations)
-						}) as LoadableOrganization
-				);
+				const organizations = apiOrganizations.map<LoadableOrganization>((apiOrganizations) => ({
+					type: 'found',
+					id: apiOrganizations.slug,
+					value: apiToOrganization(apiOrganizations)
+				}));
 
 				this.appDispatch.dispatch(upsertOrganizations(organizations));
 			})
@@ -54,19 +52,23 @@ export class OrganizationService {
 					const apiOrganization = await this.httpClient.get<ApiOrganizationWithDetails>(
 						`organization/${slug}`
 					);
-					const organization = apiToOrganization(apiOrganization);
-					const projects = apiOrganization.projects.map(apiToProject);
+
+					const projects = apiOrganization.projects.map<LoadableProject>((apiProject) => ({
+						type: 'found',
+						id: apiProject.repository_id,
+						value: apiToProject(apiProject)
+					}));
+					this.appDispatch.dispatch(upsertProjects(projects));
 
 					this.appDispatch.dispatch(
-						upsertOrganization({ type: 'found', id: slug, value: organization })
+						upsertOrganization({
+							type: 'found',
+							id: slug,
+							value: apiToOrganization(apiOrganization)
+						})
 					);
-					this.appDispatch.dispatch(upsertProjects(projects));
 				} catch (error: unknown) {
-					if (error instanceof ApiError && error.response.status === 404) {
-						this.appDispatch.dispatch(upsertOrganization({ type: 'not-found', id: slug }));
-					} else if (error instanceof Error) {
-						this.appDispatch.dispatch(upsertOrganization({ type: 'error', id: slug, error }));
-					}
+					this.appDispatch.dispatch(upsertOrganization(errorToLoadable(error, slug)));
 				}
 			})
 			.createInterest();
diff --git a/packages/shared/src/lib/organizations/organizationsSlice.ts b/packages/shared/src/lib/organizations/organizationsSlice.ts
index 3b09212363..b654fd502a 100644
--- a/packages/shared/src/lib/organizations/organizationsSlice.ts
+++ b/packages/shared/src/lib/organizations/organizationsSlice.ts
@@ -1,3 +1,4 @@
+import { loadableUpsert, loadableUpsertMany } from '$lib/network/loadable';
 import { createEntityAdapter, createSlice } from '@reduxjs/toolkit';
 import type { LoadableOrganization } from '$lib/organizations/types';
 
@@ -13,8 +14,8 @@ const organizationsSlice = createSlice({
 		addOrganizations: organizationsAdapter.addMany,
 		removeOrganization: organizationsAdapter.removeOne,
 		removeOrganizations: organizationsAdapter.removeMany,
-		upsertOrganization: organizationsAdapter.upsertOne,
-		upsertOrganizations: organizationsAdapter.upsertMany
+		upsertOrganization: loadableUpsert(organizationsAdapter),
+		upsertOrganizations: loadableUpsertMany(organizationsAdapter)
 	}
 });
 
diff --git a/packages/shared/src/lib/organizations/projectService.ts b/packages/shared/src/lib/organizations/projectService.ts
index 109c031501..82840cb538 100644
--- a/packages/shared/src/lib/organizations/projectService.ts
+++ b/packages/shared/src/lib/organizations/projectService.ts
@@ -1,5 +1,6 @@
 import { InterestStore, type Interest } from '$lib/interest/intrestStore';
-import { upsertProject } from '$lib/organizations/projectsSlice';
+import { errorToLoadable } from '$lib/network/loadable';
+import { addProject, upsertProject } from '$lib/organizations/projectsSlice';
 import { type ApiProject, apiToProject } from '$lib/organizations/types';
 import { POLLING_REGULAR } from '$lib/polling';
 import type { HttpClient } from '$lib/network/httpClient';
@@ -16,10 +17,17 @@ export class ProjectService {
 	getProjectInterest(repositoryId: string): Interest {
 		return this.projectInterests
 			.findOrCreateSubscribable({ repositoryId }, async () => {
-				const apiProject = await this.httpClient.get<ApiProject>(`projects/${repositoryId}`);
-				const project = apiToProject(apiProject);
+				this.appDispatch.dispatch(addProject({ type: 'loading', id: repositoryId }));
 
-				this.appDispatch.dispatch(upsertProject(project));
+				try {
+					const apiProject = await this.httpClient.get<ApiProject>(`projects/${repositoryId}`);
+
+					this.appDispatch.dispatch(
+						upsertProject({ type: 'found', id: repositoryId, value: apiToProject(apiProject) })
+					);
+				} catch (error: unknown) {
+					this.appDispatch.dispatch(upsertProject(errorToLoadable(error, repositoryId)));
+				}
 			})
 			.createInterest();
 	}
@@ -30,7 +38,10 @@ export class ProjectService {
 		});
 		const project = apiToProject(apiProject);
 
-		this.appDispatch.dispatch(upsertProject(project));
+		this.appDispatch.dispatch(
+			upsertProject({ type: 'found', id: project.repositoryId, value: project })
+		);
+
 		return project;
 	}
 
@@ -47,7 +58,10 @@ export class ProjectService {
 		});
 		const project = apiToProject(apiProject);
 
-		this.appDispatch.dispatch(upsertProject(project));
+		this.appDispatch.dispatch(
+			upsertProject({ type: 'found', id: project.repositoryId, value: project })
+		);
+
 		return project;
 	}
 }
diff --git a/packages/shared/src/lib/organizations/projectsPreview.svelte.ts b/packages/shared/src/lib/organizations/projectsPreview.svelte.ts
index 85ca3d6b1f..25e5731086 100644
--- a/packages/shared/src/lib/organizations/projectsPreview.svelte.ts
+++ b/packages/shared/src/lib/organizations/projectsPreview.svelte.ts
@@ -1,7 +1,8 @@
 import { registerInterest } from '$lib/interest/registerInterestFunction.svelte';
 import { projectsSelectors } from '$lib/organizations/projectsSlice';
+import type { Loadable } from '$lib/network/loadable';
 import type { ProjectService } from '$lib/organizations/projectService';
-import type { Project } from '$lib/organizations/types';
+import type { LoadableProject } from '$lib/organizations/types';
 import type { AppOrganizationsState, AppProjectsState } from '$lib/redux/store.svelte';
 import type { Reactive } from '$lib/storeUtils';
 
@@ -9,15 +10,27 @@ export function getParentForRepositoryId(
 	appState: AppProjectsState & AppOrganizationsState,
 	projectService: ProjectService,
 	projectRepositoryId: string
-): Reactive<Project | undefined> {
+): Reactive<LoadableProject | undefined> {
+	registerInterest(projectService.getProjectInterest(projectRepositoryId));
+
 	const current = $derived.by(() => {
-		registerInterest(projectService.getProjectInterest(projectRepositoryId));
-		const project = projectsSelectors.selectById(appState.projects, projectRepositoryId);
+		const loadableProject = projectsSelectors.selectById(appState.projects, projectRepositoryId);
+
+		if (
+			!loadableProject ||
+			loadableProject.type !== 'found' ||
+			!loadableProject.value.parentProjectRepositoryId
+		)
+			return;
 
-		if (!project || !project.parentProjectRepositoryId) return;
+		registerInterest(
+			projectService.getProjectInterest(loadableProject.value.parentProjectRepositoryId)
+		);
 
-		registerInterest(projectService.getProjectInterest(project.parentProjectRepositoryId));
-		return projectsSelectors.selectById(appState.projects, project.parentProjectRepositoryId);
+		return projectsSelectors.selectById(
+			appState.projects,
+			loadableProject.value.parentProjectRepositoryId
+		);
 	});
 
 	return {
@@ -31,15 +44,19 @@ export function getFeedIdentityForRepositoryId(
 	appState: AppProjectsState & AppOrganizationsState,
 	projectService: ProjectService,
 	projectRepositoryId: string
-): Reactive<string | undefined> {
+): Reactive<Loadable<string>> {
 	const parentProject = $derived(
 		getParentForRepositoryId(appState, projectService, projectRepositoryId)
 	);
 
-	const current = $derived.by(() => {
-		if (!parentProject.current) return;
+	const current = $derived.by<Loadable<string>>(() => {
+		if (!parentProject.current) return { type: 'loading' };
+		if (parentProject.current.type !== 'found') return parentProject.current;
 
-		return `${parentProject.current.owner}/${parentProject.current.slug}`;
+		return {
+			type: 'found',
+			value: `${parentProject.current.value.owner}/${parentProject.current.value.slug}`
+		};
 	});
 
 	return {
diff --git a/packages/shared/src/lib/organizations/projectsSlice.ts b/packages/shared/src/lib/organizations/projectsSlice.ts
index d7faa810bf..b4933fe3d4 100644
--- a/packages/shared/src/lib/organizations/projectsSlice.ts
+++ b/packages/shared/src/lib/organizations/projectsSlice.ts
@@ -1,9 +1,9 @@
+import { loadableUpsert, loadableUpsertMany } from '$lib/network/loadable';
 import { createEntityAdapter, createSlice } from '@reduxjs/toolkit';
-import type { Project } from '$lib/organizations/types';
+import type { LoadableProject } from '$lib/organizations/types';
 
-const projectsAdapter = createEntityAdapter({
-	selectId: (project: Project) => project.repositoryId,
-	sortComparer: (a: Project, b: Project) => a.slug.localeCompare(b.slug)
+const projectsAdapter = createEntityAdapter<LoadableProject, LoadableProject['id']>({
+	selectId: (project: LoadableProject) => project.id
 });
 
 const projectsSlice = createSlice({
@@ -14,8 +14,8 @@ const projectsSlice = createSlice({
 		addProjects: projectsAdapter.addMany,
 		removeProject: projectsAdapter.removeOne,
 		removeProjects: projectsAdapter.removeMany,
-		upsertProject: projectsAdapter.upsertOne,
-		upsertProjects: projectsAdapter.upsertMany
+		upsertProject: loadableUpsert(projectsAdapter),
+		upsertProjects: loadableUpsertMany(projectsAdapter)
 	}
 });
 
diff --git a/packages/shared/src/lib/organizations/types.ts b/packages/shared/src/lib/organizations/types.ts
index 1470760e56..a0eea2ccab 100644
--- a/packages/shared/src/lib/organizations/types.ts
+++ b/packages/shared/src/lib/organizations/types.ts
@@ -34,6 +34,8 @@ export type Project = {
 	updatedAt: string;
 };
 
+export type LoadableProject = LoadableData<Project, Project['repositoryId']>;
+
 export function apiToProject(apiProject: ApiProject): Project {
 	return {
 		repositoryId: apiProject.repository_id,
@@ -80,7 +82,7 @@ export type Organization = {
 	projectRepositoryIds?: string[];
 };
 
-export type LoadableOrganization = LoadableData<Organization, string>;
+export type LoadableOrganization = LoadableData<Organization, Organization['slug']>;
 
 export function apiToOrganization(
 	apiOrganization: ApiOrganization | ApiOrganizationWithDetails