perf: replace JS transition with CSS animation in TextToken

Author: Algorithm5838

src/lib/components/chat/Messages/Markdown/MarkdownInlineTokens/TextToken.svelte

@@ -1,19 +1,28 @@
 <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}
 {/if}
+
+<style>
+	@keyframes fade-in-token {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+	.fade-in-token {
+		animation: fade-in-token 100ms ease-out;
+	}
+</style>