From ae53bafaf6777f928113f84b2c6ed6a2ed341844 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Thu, 9 Mar 2023 22:29:19 +0100
Subject: [PATCH] fix(apps): proper reactivity for non rendered static
 components

---
 .../helpers/NonRunnableComponent.svelte         | 17 ++++++++++++++++-
 .../components/helpers/RunnableWrapper.svelte   | 16 ++--------------
 2 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/frontend/src/lib/components/apps/components/helpers/NonRunnableComponent.svelte b/frontend/src/lib/components/apps/components/helpers/NonRunnableComponent.svelte
index ab31de8b6e..9d5263dad8 100644
--- a/frontend/src/lib/components/apps/components/helpers/NonRunnableComponent.svelte
+++ b/frontend/src/lib/components/apps/components/helpers/NonRunnableComponent.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
+	import { Loader2 } from 'lucide-svelte'
 	import { getContext } from 'svelte'
+	import { fade } from 'svelte/transition'
 	import type { AppInput } from '../../inputType'
 	import type { Output } from '../../rx'
 	import type { AppEditorContext } from '../../types'
@@ -8,6 +10,7 @@
 	export let componentInput: AppInput
 	export let id: string
 	export let result: any
+	export let render: boolean
 
 	// Sync the result to the output
 	const { worldStore } = getContext<AppEditorContext>('AppEditorContext')
@@ -32,4 +35,16 @@
 	<InputValue {id} input={componentInput} bind:value={result} />
 {/if}
 
-<slot />
+{#if render}
+	<slot />
+{:else}
+	<div class="w-full h-full">
+		<div
+			out:fade|local={{ duration: 50 }}
+			class="absolute inset-0 center-center flex-col bg-white text-gray-600 border"
+		>
+			<Loader2 class="animate-spin" size={16} />
+			<span class="text-xs mt-1">Loading</span>
+		</div>
+	</div>
+{/if}
diff --git a/frontend/src/lib/components/apps/components/helpers/RunnableWrapper.svelte b/frontend/src/lib/components/apps/components/helpers/RunnableWrapper.svelte
index 6e3f8b5400..a148f1d444 100644
--- a/frontend/src/lib/components/apps/components/helpers/RunnableWrapper.svelte
+++ b/frontend/src/lib/components/apps/components/helpers/RunnableWrapper.svelte
@@ -1,7 +1,5 @@
 <script lang="ts">
-	import { Loader2 } from 'lucide-svelte'
 	import { getContext, onMount } from 'svelte'
-	import { fade } from 'svelte/transition'
 	import type { AppInput } from '../../inputType'
 	import type { AppEditorContext } from '../../types'
 	import { isScriptByNameDefined, isScriptByPathDefined } from '../../utils'
@@ -64,18 +62,8 @@
 	>
 		<slot />
 	</RunnableComponent>
-{:else if render}
-	<NonRunnableComponent bind:result {id} {componentInput}>
+{:else}
+	<NonRunnableComponent {render} bind:result {id} {componentInput}>
 		<slot />
 	</NonRunnableComponent>
-{:else if !render}
-	<div class="w-full h-full">
-		<div
-			out:fade|local={{ duration: 50 }}
-			class="absolute inset-0 center-center flex-col bg-white text-gray-600 border"
-		>
-			<Loader2 class="animate-spin" size={16} />
-			<span class="text-xs mt-1">Loading</span>
-		</div>
-	</div>
 {/if}