perf: replace JS transition with CSS animation in CodespanToken

Author: Algorithm5838

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