Merge pull request #23257 from Algorithm5838/perf/text-token-css-animation

perf: replace JS transition with CSS animation in TextToken

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;
 }

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>

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}