From ac40f7f36c0e176371ae4c5d966902e1d61b83e9 Mon Sep 17 00:00:00 2001
From: silentoplayz <jacwoo21@outlook.com>
Date: Thu, 11 Jun 2026 19:22:15 -0400
Subject: [PATCH] feat(ui): add Legacy Message Skeleton toggle in user settings

---
 .../Messages/MultiResponseMessages.svelte     |  2 +-
 .../chat/Messages/ResponseMessage.svelte      |  2 +-
 .../components/chat/Messages/Skeleton.svelte  | 77 +++++++++++++++----
 .../components/chat/Settings/Interface.svelte | 21 +++++
 src/lib/stores/index.ts                       |  1 +
 5 files changed, 85 insertions(+), 18 deletions(-)

diff --git a/src/lib/components/chat/Messages/MultiResponseMessages.svelte b/src/lib/components/chat/Messages/MultiResponseMessages.svelte
index a6d5a9b8a7..6ee1608158 100644
--- a/src/lib/components/chat/Messages/MultiResponseMessages.svelte
+++ b/src/lib/components/chat/Messages/MultiResponseMessages.svelte
@@ -414,7 +414,7 @@
 
 								<div class="mt-1 markdown-prose w-full min-w-full">
 									{#if (message?.content ?? '') === ''}
-										<Skeleton />
+										<Skeleton legacy={$settings?.legacyMessageSkeleton ?? false} />
 									{:else}
 										<Markdown id={`merged`} content={message.content ?? ''} />
 									{/if}
diff --git a/src/lib/components/chat/Messages/ResponseMessage.svelte b/src/lib/components/chat/Messages/ResponseMessage.svelte
index 8acec479c6..e896fffa66 100644
--- a/src/lib/components/chat/Messages/ResponseMessage.svelte
+++ b/src/lib/components/chat/Messages/ResponseMessage.svelte
@@ -827,7 +827,7 @@
 							id="response-content-container"
 						>
 							{#if message.content === '' && !message.done && !message.error && !hasVisibleStatus}
-								<Skeleton />
+								<Skeleton legacy={$settings?.legacyMessageSkeleton ?? false} />
 							{:else if message.content && message.error !== true}
 								<!-- always show message contents even if there's an error -->
 								<!-- unless message.error === true which is legacy error handling, where the error message is stored in message.content -->
diff --git a/src/lib/components/chat/Messages/Skeleton.svelte b/src/lib/components/chat/Messages/Skeleton.svelte
index b2631701af..dc0b7bd733 100644
--- a/src/lib/components/chat/Messages/Skeleton.svelte
+++ b/src/lib/components/chat/Messages/Skeleton.svelte
@@ -1,25 +1,70 @@
 <script lang="ts">
 	export let size = 'md';
+	export let legacy = false;
 </script>
 
-<span
-	class="relative flex {size === 'md'
-		? 'size-3 my-2'
-		: size === 'xs'
-			? 'size-1.5 my-1'
-			: 'size-2 my-1'} mx-1"
->
+{#if legacy}
+	<div class="w-full mt-2 mb-2">
+		<div class="animate-pulse flex w-full">
+			<div class="{size === 'md' ? 'space-y-2' : 'space-y-1.5'} w-full">
+				<div
+					class="{size === 'md' ? 'h-2' : 'h-1.5'} bg-gray-200 dark:bg-gray-600 rounded-sm mr-14"
+				/>
+
+				<div class="grid grid-cols-3 gap-4">
+					<div
+						class="{size === 'md'
+							? 'h-2'
+							: 'h-1.5'} bg-gray-200 dark:bg-gray-600 rounded-sm col-span-2"
+					/>
+					<div
+						class="{size === 'md'
+							? 'h-2'
+							: 'h-1.5'} bg-gray-200 dark:bg-gray-600 rounded-sm col-span-1"
+					/>
+				</div>
+				<div class="grid grid-cols-4 gap-4">
+					<div
+						class="{size === 'md'
+							? 'h-2'
+							: 'h-1.5'} bg-gray-200 dark:bg-gray-600 rounded-sm col-span-1"
+					/>
+					<div
+						class="{size === 'md'
+							? 'h-2'
+							: 'h-1.5'} bg-gray-200 dark:bg-gray-600 rounded-sm col-span-2"
+					/>
+					<div
+						class="{size === 'md'
+							? 'h-2'
+							: 'h-1.5'} bg-gray-200 dark:bg-gray-600 rounded-sm col-span-1 mr-4"
+					/>
+				</div>
+
+				<div class="{size === 'md' ? 'h-2' : 'h-1.5'} bg-gray-200 dark:bg-gray-600 rounded-sm" />
+			</div>
+		</div>
+	</div>
+{:else}
 	<span
-		class="absolute inline-flex h-full w-full animate-pulse rounded-full bg-gray-700 dark:bg-gray-200 opacity-75"
-	></span>
-	<span
-		class="relative inline-flex {size === 'md'
-			? 'size-3'
+		class="relative flex {size === 'md'
+			? 'size-3 my-2'
 			: size === 'xs'
-				? 'size-1.5'
-				: 'size-2'} rounded-full bg-black dark:bg-white animate-size"
-	></span>
-</span>
+				? 'size-1.5 my-1'
+				: 'size-2 my-1'} mx-1"
+	>
+		<span
+			class="absolute inline-flex h-full w-full animate-pulse rounded-full bg-gray-700 dark:bg-gray-200 opacity-75"
+		></span>
+		<span
+			class="relative inline-flex {size === 'md'
+				? 'size-3'
+				: size === 'xs'
+					? 'size-1.5'
+					: 'size-2'} rounded-full bg-black dark:bg-white animate-size"
+		></span>
+	</span>
+{/if}
 
 <style>
 	@keyframes size {
diff --git a/src/lib/components/chat/Settings/Interface.svelte b/src/lib/components/chat/Settings/Interface.svelte
index 250c75a9ff..b2943fd7a3 100644
--- a/src/lib/components/chat/Settings/Interface.svelte
+++ b/src/lib/components/chat/Settings/Interface.svelte
@@ -68,6 +68,7 @@
 
 	let temporaryChatByDefault = false;
 	let chatFadeStreamingText = true;
+	let legacyMessageSkeleton = false;
 	let collapseCodeBlocks = false;
 	let renderMarkdownInUserMessages = true;
 	let renderMarkdownInAssistantMessages = true;
@@ -217,6 +218,7 @@
 
 		displayMultiModelResponsesInTabs = $settings?.displayMultiModelResponsesInTabs ?? false;
 		chatFadeStreamingText = $settings?.chatFadeStreamingText ?? true;
+		legacyMessageSkeleton = $settings?.legacyMessageSkeleton ?? false;
 
 		richTextInput = $settings?.richTextInput ?? true;
 		showFormattingToolbar = $settings?.showFormattingToolbar ?? false;
@@ -780,6 +782,25 @@
 				</div>
 			</div>
 
+			<div>
+				<div class=" py-0.5 flex w-full justify-between">
+					<div id="legacy-message-skeleton-label" class=" self-center text-xs">
+						{$i18n.t('Legacy Message Skeleton')}
+					</div>
+
+					<div class="flex items-center gap-2 p-1">
+						<Switch
+							ariaLabelledbyId="legacy-message-skeleton-label"
+							tooltip={true}
+							bind:state={legacyMessageSkeleton}
+							on:change={() => {
+								saveSettings({ legacyMessageSkeleton });
+							}}
+						/>
+					</div>
+				</div>
+			</div>
+
 			<div>
 				<div class=" py-0.5 flex w-full justify-between">
 					<div id="render-markdown-user-label" class=" self-center text-xs">
diff --git a/src/lib/stores/index.ts b/src/lib/stores/index.ts
index b87303c0b0..ecec62b6e8 100644
--- a/src/lib/stores/index.ts
+++ b/src/lib/stores/index.ts
@@ -215,6 +215,7 @@ type Settings = {
 	scrollOnBranchChange?: boolean;
 	directConnections?: null;
 	chatBubble?: boolean;
+	legacyMessageSkeleton?: boolean;
 	copyFormatted?: boolean;
 	models?: string[];
 	conversationMode?: boolean;