improve perceived performances

frontend/src/lib/components/LogViewer.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { fade } from 'svelte/transition'
 	import { Drawer, DrawerContent } from './common'
 
 	export let content: string | undefined
@@ -47,8 +48,11 @@
 		{#if duration}
 			<span class="absolute text-xs text-gray-500 top-2 left-2">took {duration}ms</span>
 		{/if}
+
 		<pre class="whitespace-pre-wrap break-words bg-gray-50 text-xs w-full p-2"
-			>{#if content}{content}{:else if isLoading}Waiting for job to start...{:else}No logs are available yet{/if}</pre
+			>{#if content}<span transition:fade={{ duration: 50 }}>{content}</span
+				>{:else if isLoading}{:else}<span class="text-gray-600">No logs are available yet</span
+				>{/if}</pre
 		>
 	</div>
 </div>

frontend/src/lib/components/scriptEditor/LogPanel.svelte

@@ -18,6 +18,7 @@
 	import LogViewer from '../LogViewer.svelte'
 	import { Pane } from 'svelte-splitpanes'
 	import SplitPanesWrapper from '../splitPanes/SplitPanesWrapper.svelte'
+	import { fade } from 'svelte/transition'
 
 	export let path: string | undefined
 	export let lang: Preview.language
@@ -86,12 +87,14 @@
 				</Pane>
 				<Pane class="!duration-[0ms]">
 					{#if previewJob != undefined && 'result' in previewJob && previewJob.result != undefined}
-						<pre class="overflow-x-auto break-words relative h-full p-2"
+						<pre
+							transition:fade={{ duration: 50 }}
+							class="overflow-x-auto break-words relative h-full p-2"
 							><DisplayResult result={previewJob.result} />
 						</pre>
 					{:else}
 						<div class="text-sm text-gray-600 p-2">
-							{previewIsLoading ? 'Waiting for result...' : 'Test to see the result here'}
+							{previewIsLoading ? '' : 'Test to see the result here'}
 						</div>
 					{/if}
 				</Pane>