From 0d3d8242748c714d465dea99b52e875056a43345 Mon Sep 17 00:00:00 2001
From: Algorithm5838 <108630393+Algorithm5838@users.noreply.github.com>
Date: Wed, 1 Apr 2026 09:03:03 +0300
Subject: [PATCH] Merge pull request #23257 from
 Algorithm5838/perf/text-token-css-animation

perf: replace JS transition with CSS animation in TextToken
---
 src/app.css                                        | 13 +++++++++++++
 .../MarkdownInlineTokens/CodespanToken.svelte      | 14 --------------
 .../Markdown/MarkdownInlineTokens/TextToken.svelte |  9 ++-------
 3 files changed, 15 insertions(+), 21 deletions(-)

diff --git a/src/app.css b/src/app.css
index b7b70aeeb3..93417b680a 100644
--- a/src/app.css
+++ b/src/app.css
@@ -243,6 +243,19 @@ select {
 	animation: smoothFadeIn 0.2s forwards;
 }
 
+@keyframes fade-in-token {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
+}
+
+.fade-in-token {
+	animation: fade-in-token 100ms ease-out;
+}
+
 .katex-mathml {
 	display: none;
 }
diff --git a/src/lib/components/chat/Messages/Markdown/MarkdownInlineTokens/CodespanToken.svelte b/src/lib/components/chat/Messages/Markdown/MarkdownInlineTokens/CodespanToken.svelte
index 1de3f13f6e..48144f9a0d 100644
--- a/src/lib/components/chat/Messages/Markdown/MarkdownInlineTokens/CodespanToken.svelte
+++ b/src/lib/components/chat/Messages/Markdown/MarkdownInlineTokens/CodespanToken.svelte
@@ -19,17 +19,3 @@
 		toast.success($i18n.t('Copied to clipboard'));
 	}}>{unescapeHtml(token.text)}</code
 >
-
-<style>
-	@keyframes fade-in-token {
-		from {
-			opacity: 0;
-		}
-		to {
-			opacity: 1;
-		}
-	}
-	.fade-in-token {
-		animation: fade-in-token 100ms ease-out;
-	}
-</style>
diff --git a/src/lib/components/chat/Messages/Markdown/MarkdownInlineTokens/TextToken.svelte b/src/lib/components/chat/Messages/Markdown/MarkdownInlineTokens/TextToken.svelte
index e7efd10064..8ba5de2233 100644
--- a/src/lib/components/chat/Messages/Markdown/MarkdownInlineTokens/TextToken.svelte
+++ b/src/lib/components/chat/Messages/Markdown/MarkdownInlineTokens/TextToken.svelte
@@ -1,18 +1,13 @@
 <script lang="ts">
-	import { fade } from 'svelte/transition';
-
 	export let token;
 	export let done = true;
-
-	let texts = [];
-	$: texts = (token?.raw ?? '').split(' ');
 </script>
 
 {#if done}
 	{token?.raw}
 {:else}
-	{#each texts as text}
-		<span class="" transition:fade={{ duration: 100 }}>
+	{#each (token?.raw ?? '').split(' ') as text}
+		<span class="fade-in-token">
 			{text}{' '}
 		</span>
 	{/each}