fix: improve custom component rendering

windmill-labs · Feb 24, 2025 · 4ee4ff7 · 4ee4ff7
1 parent d45c1f6
commit 4ee4ff7
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 18 deletions.
diff --git a/frontend/src/lib/components/apps/components/display/AppCustomComponent.svelte b/frontend/src/lib/components/apps/components/display/AppCustomComponent.svelte
@@ -50,7 +50,7 @@
 		}
 	}
 	let loaded = false
-
+	let renderer: ((props: CCProps<number>) => void) | undefined = undefined
 	// $: renderer && divEl && renderer(ccProps)
 	onMount(async () => {
 		// //@ts-ignore
@@ -81,8 +81,7 @@
 		)
 		loaded = true
 		try {
-			let renderer: (props: CCProps<number>) => void =
-				globalThis.windmill[customComponent?.name ?? 'no_name']
+			renderer = globalThis.windmill[customComponent?.name ?? 'no_name']
 			if (!renderer) {
 				sendUserToast(
 					'Custom Component seem to be ill-defined (renderer missing). is COMPONENT_NAME in vite.config.ts matching the name of the custom component?',
@@ -95,30 +94,28 @@
 			sendUserToast('Custom Component seem to be ill-defined', true)
 			console.error(e)
 		}
+		console.log('mounted', render, setRender)
 	})
 	let result
 
-	$: render != undefined && handleRender()
+	$: render != undefined && setRender && handleRender()
 	function handleRender() {
 		setRender?.(render)
 	}
-	$: result != undefined && handleResult()
+
+	$: result != undefined && setInput && handleResult()
 	function handleResult() {
 		setInput?.(result)
 	}
 	// $: result && setInput && setInput(result)
 </script>
 
 <InitializeComponent {id} />
-{#if render}
-	<div class="w-full h-full overflow-auto {customComponent?.name ?? 'no_name'}">
-		<RunnableWrapper {outputs} {render} autoRefresh {componentInput} {id} bind:result>
-			{#if !loaded}
-				<Loader2 class="animate-spin" />
-			{/if}
-			<div id={divId} />
-		</RunnableWrapper>
-	</div>
-{:else}
-	<RunnableWrapper {outputs} {render} autoRefresh {componentInput} {id} />
-{/if}
+<div class="w-full h-full overflow-auto {customComponent?.name ?? 'no_name'}">
+	<RunnableWrapper {outputs} render autoRefresh {componentInput} {id} bind:result>
+		{#if !loaded}
+			<Loader2 class="animate-spin" />
+		{/if}
+		<div id={divId} />
+	</RunnableWrapper>
+</div>
diff --git a/frontend/src/lib/components/apps/editor/SubGridEditor.svelte b/frontend/src/lib/components/apps/editor/SubGridEditor.svelte
@@ -319,7 +319,7 @@
 					>
 						<Component
 							fullHeight={dataItem?.[$breakpoint === 'sm' ? 3 : 12]?.fullHeight}
-							render={true}
+							render={visible}
 							component={dataItem.data}
 							selected={Boolean($selectedComponent?.includes(dataItem.id))}
 							locked={isFixed(dataItem)}