From b920345de2f44dc487c8a1fce3aa61c387cea6fb Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Mon, 12 Dec 2022 02:26:31 +0100
Subject: [PATCH] improve perceived performances

---
 frontend/src/lib/components/LogViewer.svelte             | 6 +++++-
 frontend/src/lib/components/scriptEditor/LogPanel.svelte | 7 +++++--
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/frontend/src/lib/components/LogViewer.svelte b/frontend/src/lib/components/LogViewer.svelte
index 0fbed914a7..f5ca791fad 100644
--- a/frontend/src/lib/components/LogViewer.svelte
+++ b/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>
diff --git a/frontend/src/lib/components/scriptEditor/LogPanel.svelte b/frontend/src/lib/components/scriptEditor/LogPanel.svelte
index 76560aae40..ff74dbdfd9 100644
--- a/frontend/src/lib/components/scriptEditor/LogPanel.svelte
+++ b/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>