perf: move token fade-in animation to global CSS

Author: Algorithm5838

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

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { copyToClipboard, unescapeHtml } from '$lib/utils';
 	import { toast } from 'svelte-sonner';
-	import { fade } from 'svelte/transition';
 
 	import { getContext } from 'svelte';
 
@@ -13,21 +12,10 @@
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
-{#if done}
-	<code
-		class="codespan cursor-pointer"
-		on:click={() => {
-			copyToClipboard(unescapeHtml(token.text));
-			toast.success($i18n.t('Copied to clipboard'));
-		}}>{unescapeHtml(token.text)}</code
-	>
-{:else}
-	<code
-		transition:fade={{ duration: 100 }}
-		class="codespan cursor-pointer"
-		on:click={() => {
-			copyToClipboard(unescapeHtml(token.text));
-			toast.success($i18n.t('Copied to clipboard'));
-		}}>{unescapeHtml(token.text)}</code
-	>
-{/if}
+<code
+	class="codespan cursor-pointer {!done ? 'fade-in-token' : ''}"
+	on:click={() => {
+		copyToClipboard(unescapeHtml(token.text));
+		toast.success($i18n.t('Copied to clipboard'));
+	}}>{unescapeHtml(token.text)}</code
+>

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}