add loading

redirect user to project page after creating project
Merkie · Aug 26, 2024 · 2435a2c · 2435a2c
1 parent 7e66d20
commit 2435a2c
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 7 deletions.
diff --git a/src/routes/app/dashboard/projects/_components/CreateProjectModal/BlankProjectInner.svelte b/src/routes/app/dashboard/projects/_components/CreateProjectModal/BlankProjectInner.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { invalidateAll } from '$app/navigation';
 	import api from '$ts/client/api';
+	import { cn } from '$ts/client/cn';
 
 	let name: string;
 	let columns = 6;
@@ -9,7 +10,12 @@
 
 	export let closeModal: () => void;
 
+	let loading = false;
+
 	const createProject = async () => {
+		if (loading) return;
+		loading = true;
+
 		const createProjectResponse = await api.project.create({
 			name,
 			columns,
@@ -20,12 +26,22 @@
 			return alert(createProjectResponse.error);
 		}
 
-		if (createProjectResponse.projectId)
+		let createdProjectId = '';
+
+		if (createProjectResponse.projectId) {
 			await api.project.updateThumbnail(createProjectResponse.projectId);
+			createdProjectId = createProjectResponse.projectId;
+		}
 
 		await invalidateAll();
 
+		loading = false;
+
 		closeModal();
+
+		if (createdProjectId) {
+			window.location.assign(`/app/project/${createdProjectId}`);
+		}
 	};
 </script>
 
@@ -55,7 +71,12 @@
 	<button
 		on:click={createProject}
 		type="submit"
-		class="mt-2 rounded-md border border-blue-500 bg-blue-600 p-2 text-blue-50">Submit</button
+		class={cn(
+			'mt-2 rounded-md border border-blue-500 bg-blue-600 p-2 text-blue-50 transition-all',
+			{
+				'pointer-events-none opacity-50': loading
+			}
+		)}>Submit</button
 	>
 </div>
 

diff --git a/src/routes/app/dashboard/projects/_components/CreateProjectModal/ImportProjectInner.svelte b/src/routes/app/dashboard/projects/_components/CreateProjectModal/ImportProjectInner.svelte
@@ -31,23 +31,34 @@
 
 			const boardFile = await getOpenBoardFileData(file);
 
+			let createdProjectId = '';
+
 			if (boardFile?.type && boardFile?.data) {
 				if (boardFile?.type === 'obz') {
 					const importObzResponse = await api.project.import.obz(boardFile.data as any);
-					if (importObzResponse.projectId)
+
+					if (importObzResponse.projectId) {
 						await api.project.updateThumbnail(importObzResponse.projectId);
+						createdProjectId = importObzResponse.projectId;
+					}
 				} else {
 					const importObfResponse = await api.project.import.obf(boardFile.data as any);
+
 					if (importObfResponse.projectId)
 						await api.project.updateThumbnail(importObfResponse.projectId);
+					createdProjectId = importObfResponse.projectId;
 				}
 			}
 
 			await invalidateAll();
 
+			loading = false;
+
 			closeModal();
 
-			loading = false;
+			if (createdProjectId) {
+				window.location.assign(`/app/project/${createdProjectId}`);
+			}
 		});
 	}
 </script>

diff --git a/src/routes/app/dashboard/projects/_components/CreateProjectModal/TemplateProjectCard.svelte b/src/routes/app/dashboard/projects/_components/CreateProjectModal/TemplateProjectCard.svelte
@@ -2,6 +2,7 @@
 	import { invalidateAll } from '$app/navigation';
 	import { PUBLIC_R2_URL } from '$env/static/public';
 	import api from '$ts/client/api';
+	import { cn } from '$ts/client/cn';
 	import { getOpenBoardFileData } from '$ts/client/handle-open-board-files';
 
 	export let thumbnail: string;
@@ -12,7 +13,12 @@
 
 	export let closeModal: () => void;
 
+	let loading = false;
+
 	async function handleUseTemplate() {
+		if (loading) return;
+		loading = true;
+
 		// get the file from the download link
 		const res = await fetch(PUBLIC_R2_URL + projectDownloadLink);
 		const blob = await res.blob();
@@ -25,22 +31,35 @@
 		// open the file in the editor
 		const boardFile = await getOpenBoardFileData(file);
 
+		let createdProjectId = '';
+
 		if (boardFile?.type && boardFile?.data) {
 			if (boardFile?.type === 'obz') {
 				const importObzResponse = await api.project.import.obz(boardFile.data as any);
-				if (importObzResponse.projectId)
+
+				if (importObzResponse.projectId) {
 					await api.project.updateThumbnail(importObzResponse.projectId);
+					createdProjectId = importObzResponse.projectId;
+				}
 			} else {
 				const importObfResponse = await api.project.import.obf(boardFile.data as any);
+
 				if (importObfResponse.projectId)
 					await api.project.updateThumbnail(importObfResponse.projectId);
+				createdProjectId = importObfResponse.projectId;
 			}
 		}
 
 		await invalidateAll();
 
+		loading = false;
+
 		// close the modal
 		closeModal();
+
+		if (createdProjectId) {
+			window.location.assign(`/app/project/${createdProjectId}`);
+		}
 	}
 </script>
 
@@ -58,8 +77,9 @@
 	<div class="mt-4 flex items-center">
 		<button
 			on:click={handleUseTemplate}
-			class="flex-1 rounded-md bg-blue-500 p-2 px-4 font-semibold transition-all"
-			>Use Template</button
+			class={cn('flex-1 rounded-md bg-blue-500 p-2 px-4 font-semibold transition-all', {
+				'pointer-events-none opacity-50': loading
+			})}>{loading ? 'Creating Project...' : 'Use Template'}</button
 		>
 	</div>
 </div>