Disable the share button while generating (#1958)

disable share button while loading

Author: krampstudio

src/lib/components/MobileNav.svelte

@@ -16,6 +16,7 @@
 	import IconBurger from "$lib/components/icons/IconBurger.svelte";
 	import { Spring } from "svelte/motion";
 	import { shareModal } from "$lib/stores/shareModal";
+	import { loading } from "$lib/stores/loading";
 	interface Props {
 		title: string | undefined;
 		children?: import("svelte").Snippet;
@@ -28,7 +29,10 @@
 
 	const isHuggingChat = $derived(Boolean(page.data?.publicConfig?.isHuggingChat));
 	const canShare = $derived(
-		isHuggingChat && Boolean(page.params?.id) && page.route.id?.startsWith("/conversation/")
+		isHuggingChat &&
+			!$loading &&
+			Boolean(page.params?.id) &&
+			page.route.id?.startsWith("/conversation/")
 	);
 
 	// Define the width for the drawer (less than 100% to create the gap)

src/lib/stores/loading.ts

@@ -0,0 +1,3 @@
+import { writable } from "svelte/store";
+
+export const loading = writable(false);

src/routes/+layout.svelte

@@ -8,6 +8,7 @@
 
 	import { error } from "$lib/stores/errors";
 	import { createSettingsStore } from "$lib/stores/settings";
+	import { loading } from "$lib/stores/loading";
 
 	import Toast from "$lib/components/Toast.svelte";
 	import NavMenu from "$lib/components/NavMenu.svelte";
@@ -244,9 +245,11 @@
 	{#if canShare}
 		<button
 			type="button"
-			class="hidden size-8 items-center justify-center gap-2 rounded-xl border border-gray-200 bg-white/90 text-sm font-medium text-gray-700 shadow-sm hover:bg-white/60 hover:text-gray-500 dark:border-gray-700 dark:bg-gray-800/80 dark:text-gray-200 dark:hover:bg-gray-700 md:absolute md:right-6 md:top-5 md:flex"
+			class="hidden size-8 items-center justify-center gap-2 rounded-xl border border-gray-200 bg-white/90 text-sm font-medium text-gray-700 shadow-sm hover:bg-white/60 hover:text-gray-500 dark:border-gray-700 dark:bg-gray-800/80 dark:text-gray-200 dark:hover:bg-gray-700 md:absolute md:right-6 md:top-5 md:flex
+				{$loading ? 'cursor-not-allowed opacity-40' : ''}"
 			onclick={() => shareModal.open()}
 			aria-label="Share conversation"
+			disabled={$loading}
 		>
 			<IconShare />
 		</button>

src/routes/+page.svelte

@@ -13,19 +13,19 @@
 	import { findCurrentModel } from "$lib/utils/models";
 	import { sanitizeUrlParam } from "$lib/utils/urlParams";
 	import { onMount, tick } from "svelte";
+	import { loading } from "$lib/stores/loading.js";
 
 	let { data } = $props();
 
 	let hasModels = $derived(Boolean(data.models?.length));
-	let loading = $state(false);
 	let files: File[] = $state([]);
 	let draft = $state("");
 
 	const settings = useSettingsStore();
 
 	async function createConversation(message: string) {
 		try {
-			loading = true;
+			$loading = true;
 
 			// check if $settings.activeModel is a valid model
 			// else check if it's an assistant, and use that model
@@ -71,7 +71,7 @@
 			error.set((err as Error).message || ERROR_MESSAGES.default);
 			console.error(err);
 		} finally {
-			loading = false;
+			$loading = false;
 		}
 	}
 
@@ -112,7 +112,7 @@
 {#if hasModels}
 	<ChatWindow
 		onmessage={(message) => createConversation(message)}
-		{loading}
+		loading={$loading}
 		{currentModel}
 		models={data.models}
 		bind:files

src/routes/conversation/[id]/+page.svelte

@@ -26,10 +26,10 @@
 	import "katex/dist/katex.min.css";
 	import { updateDebouncer } from "$lib/utils/updates.js";
 	import SubscribeModal from "$lib/components/SubscribeModal.svelte";
+	import { loading } from "$lib/stores/loading.js";
 
 	let { data = $bindable() } = $props();
 
-	let loading = $state(false);
 	let pending = $state(false);
 	let initialRun = true;
 	let showSubscribeModal = $state(false);
@@ -96,7 +96,7 @@
 
 	async function convFromShared() {
 		try {
-			loading = true;
+			$loading = true;
 			const res = await fetch(`${base}/conversation`, {
 				method: "POST",
 				headers: {
@@ -135,7 +135,7 @@
 	}): Promise<void> {
 		try {
 			$isAborted = false;
-			loading = true;
+			$loading = true;
 			pending = true;
 			const base64Files = await Promise.all(
 				(files ?? []).map((file) =>
@@ -335,7 +335,7 @@
 			}
 			console.error(err);
 		} finally {
-			loading = false;
+			$loading = false;
 			pending = false;
 			await invalidateAll();
 		}
@@ -348,11 +348,11 @@
 			if (r.ok) {
 				setTimeout(() => {
 					$isAborted = true;
-					loading = false;
+					$loading = false;
 				}, 500);
 			} else {
 				$isAborted = true;
-				loading = false;
+				$loading = false;
 			}
 		});
 	}
@@ -375,7 +375,7 @@
 		const streaming = isConversationStreaming(messages);
 		if (streaming) {
 			addBackgroundGeneration({ id: page.params.id, startedAt: Date.now() });
-			loading = true;
+			$loading = true;
 		}
 	});
 
@@ -388,7 +388,7 @@
 					await goto(`${base}/conversation/${convId}`, { invalidateAll: true });
 				})
 				.then(async () => await writeMessage({ prompt: content }))
-				.finally(() => (loading = false));
+				.finally(() => ($loading = false));
 		}
 	}
 
@@ -415,7 +415,7 @@
 							isRetry: true,
 						})
 				)
-				.finally(() => (loading = false));
+				.finally(() => ($loading = false));
 		}
 	}
 
@@ -447,9 +447,9 @@
 	$effect(() => {
 		const streaming = isConversationStreaming(messages);
 		if (streaming) {
-			loading = true;
+			$loading = true;
 		} else if (!pending) {
-			loading = false;
+			$loading = false;
 		}
 
 		if (!streaming && browser) {
@@ -478,7 +478,7 @@
 		}
 
 		$isAborted = true;
-		loading = false;
+		$loading = false;
 	});
 
 	let title = $derived.by(() => {
@@ -494,7 +494,7 @@
 </svelte:head>
 
 <ChatWindow
-	{loading}
+	loading={$loading}
 	{pending}
 	messages={messagesPath as Message[]}
 	{messagesAlternatives}