From f20ea37eb0275a62fcf32b6e998699e36c47958d Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Tue, 7 Mar 2023 16:48:23 +0100
Subject: [PATCH] feat(frontend): Fix app preview error display

---
 .../apps/components/helpers/RunnableComponent.svelte     | 1 -
 .../components/apps/editor/component/Component.svelte    | 9 ++++++---
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte b/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte
index 92f287eeb2..2a6668ca07 100644
--- a/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte
+++ b/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte
@@ -106,7 +106,6 @@
 	}
 
 	$: outputs?.loading?.set(testIsLoading)
-
 	$: schemaStripped = stripSchema(fields, $stateId)
 
 	function stripSchema(inputs: AppInputs, s: any): Schema {
diff --git a/frontend/src/lib/components/apps/editor/component/Component.svelte b/frontend/src/lib/components/apps/editor/component/Component.svelte
index 185815bfd2..e844411340 100644
--- a/frontend/src/lib/components/apps/editor/component/Component.svelte
+++ b/frontend/src/lib/components/apps/editor/component/Component.svelte
@@ -47,7 +47,7 @@
 	export let locked: boolean = false
 	export let pointerdown: boolean = false
 
-	const { staticOutputs, mode, connectingInput, app } =
+	const { staticOutputs, mode, connectingInput, app, errorByComponent } =
 		getContext<AppEditorContext>('AppEditorContext')
 	let hover = false
 	let initializing: boolean | undefined = undefined
@@ -57,6 +57,9 @@
 	// $: if (!deepEqual(component, pComponent)) {
 	// 	component = JSON.parse(JSON.stringify(pComponent))
 	// }
+
+	$: componentWithErrors = Object.values($errorByComponent).map((e) => e.componentId)
+	$: hasError = componentWithErrors.includes(component.id)
 </script>
 
 <div
@@ -82,7 +85,7 @@
 			selected && $mode !== 'preview' ? 'border border-blue-500' : '',
 			!selected && $mode !== 'preview' && !component.card ? 'border-gray-100' : '',
 			$mode !== 'preview' && !$connectingInput.opened ? 'hover:border-blue-500' : '',
-			component.softWrap ? '' : 'overflow-auto',
+			component.softWrap || hasError ? '' : 'overflow-auto',
 			$mode != 'preview' ? 'cursor-pointer' : '',
 			'relative z-auto',
 			$app.css?.['app']?.['component']?.class
@@ -408,7 +411,7 @@
 </div>
 {#if initializing}
 	<div
-		out:fade={{ duration: 200 }}
+		out:fade|local={{ duration: 200 }}
 		class="absolute inset-0 center-center flex-col bg-white text-gray-600 border"
 	>
 		<Loader2 class="animate-spin" size={16} />