From 2444f4f23e5212fa4d2ff8542d864118d4b4feb9 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@windmill.dev>
Date: Wed, 5 Mar 2025 15:30:00 +0100
Subject: [PATCH] fix: improve objectviewer performance

---
 .../common/button/AnimatedButton.svelte       | 101 ++++--------------
 .../common/button/AnimatedButtonInner.svelte  |  93 ++++++++++++++++
 .../propertyPicker/ObjectViewer.svelte        |   1 +
 3 files changed, 112 insertions(+), 83 deletions(-)
 create mode 100644 frontend/src/lib/components/common/button/AnimatedButtonInner.svelte

diff --git a/frontend/src/lib/components/common/button/AnimatedButton.svelte b/frontend/src/lib/components/common/button/AnimatedButton.svelte
index 7396b5314b..7248b891dc 100644
--- a/frontend/src/lib/components/common/button/AnimatedButton.svelte
+++ b/frontend/src/lib/components/common/button/AnimatedButton.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
-	import { twMerge } from 'tailwind-merge'
-	import DarkModeObserver from '$lib/components/DarkModeObserver.svelte'
+	import AnimatedButtonInner from './AnimatedButtonInner.svelte'
 	export let marginWidth = '2px'
 	export let animationDuration = '2s'
 	export let baseRadius = '4px'
@@ -8,86 +7,22 @@
 	export let wrapperClasses = ''
 	export let ringColor = 'transparent'
 	export let darkMode = false
-
-	const gradientColors = {
-		light: ['#d6e5ff', '#0073ff', '#5aa2fa', '#0272fa', '#d6e5ff'],
-		dark: ['#0469db', '#15498a', '#031ea3', '#0073ff', '#0469db']
-	}
-
-	let clientWidth = 0
-	let clientHeight = 0
-
-	$: circleRadius = Math.ceil(
-		Math.sqrt(clientWidth * clientWidth + clientHeight * clientHeight) / 2
-	)
-
-	$: gradientString = `from 0deg, ${gradientColors[darkMode ? 'dark' : 'light'].join(', ')}`
 </script>
 
-<DarkModeObserver bind:darkMode />
-
-<div
-	class={twMerge('gradient-button', wrapperClasses)}
-	style="--margin-width: {marginWidth}; --animation-duration: {animationDuration}; --base-radius: {baseRadius}; --circle-radius: {circleRadius}; --ring-color: {ringColor}; --gradient: {gradientString}"
-	class:animate
-	bind:clientWidth
-	bind:clientHeight
->
-	<slot />
-</div>
-
-<style>
-	.gradient-button {
-		position: relative;
-		font-size: inherit;
-		border: none;
-		border-radius: calc(var(--base-radius) + var(--margin-width, 2px));
-		color: currentColor;
-		background: inherit;
-		z-index: 1;
-		overflow: hidden;
-		padding: var(--margin-width, 1px);
-	}
-
-	/* Circular gradient */
-	.gradient-button::before {
-		content: '';
-		position: absolute;
-		top: 50%;
-		left: 50%;
-		transform: translate(-50%, -50%);
-		width: calc(var(--circle-radius, 300px) * 2px);
-		height: calc(var(--circle-radius, 300px) * 2px);
-		background: var(--ring-color, transparent);
-		border-radius: 50%;
-		z-index: -1;
-		animation: none;
-	}
-
-	.gradient-button.animate::before {
-		background: conic-gradient(var(--gradient));
-		animation: rotate var(--animation-duration, 2s) linear infinite;
-	}
-
-	/* inner background */
-	.gradient-button::after {
-		content: '';
-		position: absolute;
-		top: var(--margin-width, 2px);
-		right: var(--margin-width, 2px);
-		bottom: var(--margin-width, 2px);
-		left: var(--margin-width, 2px);
-		background: inherit;
-		border-radius: var(--base-radius);
-		z-index: -1;
-	}
-
-	@keyframes rotate {
-		from {
-			transform: translate(-50%, -50%) rotate(0deg);
-		}
-		to {
-			transform: translate(-50%, -50%) rotate(360deg);
-		}
-	}
-</style>
+{#if animate}
+	<AnimatedButtonInner
+		{marginWidth}
+		{animationDuration}
+		{baseRadius}
+		{animate}
+		{wrapperClasses}
+		{ringColor}
+		{darkMode}
+	>
+		<slot />
+	</AnimatedButtonInner>
+{:else}
+	<div class={wrapperClasses}>
+		<slot />
+	</div>
+{/if}
diff --git a/frontend/src/lib/components/common/button/AnimatedButtonInner.svelte b/frontend/src/lib/components/common/button/AnimatedButtonInner.svelte
new file mode 100644
index 0000000000..7396b5314b
--- /dev/null
+++ b/frontend/src/lib/components/common/button/AnimatedButtonInner.svelte
@@ -0,0 +1,93 @@
+<script lang="ts">
+	import { twMerge } from 'tailwind-merge'
+	import DarkModeObserver from '$lib/components/DarkModeObserver.svelte'
+	export let marginWidth = '2px'
+	export let animationDuration = '2s'
+	export let baseRadius = '4px'
+	export let animate = true
+	export let wrapperClasses = ''
+	export let ringColor = 'transparent'
+	export let darkMode = false
+
+	const gradientColors = {
+		light: ['#d6e5ff', '#0073ff', '#5aa2fa', '#0272fa', '#d6e5ff'],
+		dark: ['#0469db', '#15498a', '#031ea3', '#0073ff', '#0469db']
+	}
+
+	let clientWidth = 0
+	let clientHeight = 0
+
+	$: circleRadius = Math.ceil(
+		Math.sqrt(clientWidth * clientWidth + clientHeight * clientHeight) / 2
+	)
+
+	$: gradientString = `from 0deg, ${gradientColors[darkMode ? 'dark' : 'light'].join(', ')}`
+</script>
+
+<DarkModeObserver bind:darkMode />
+
+<div
+	class={twMerge('gradient-button', wrapperClasses)}
+	style="--margin-width: {marginWidth}; --animation-duration: {animationDuration}; --base-radius: {baseRadius}; --circle-radius: {circleRadius}; --ring-color: {ringColor}; --gradient: {gradientString}"
+	class:animate
+	bind:clientWidth
+	bind:clientHeight
+>
+	<slot />
+</div>
+
+<style>
+	.gradient-button {
+		position: relative;
+		font-size: inherit;
+		border: none;
+		border-radius: calc(var(--base-radius) + var(--margin-width, 2px));
+		color: currentColor;
+		background: inherit;
+		z-index: 1;
+		overflow: hidden;
+		padding: var(--margin-width, 1px);
+	}
+
+	/* Circular gradient */
+	.gradient-button::before {
+		content: '';
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		width: calc(var(--circle-radius, 300px) * 2px);
+		height: calc(var(--circle-radius, 300px) * 2px);
+		background: var(--ring-color, transparent);
+		border-radius: 50%;
+		z-index: -1;
+		animation: none;
+	}
+
+	.gradient-button.animate::before {
+		background: conic-gradient(var(--gradient));
+		animation: rotate var(--animation-duration, 2s) linear infinite;
+	}
+
+	/* inner background */
+	.gradient-button::after {
+		content: '';
+		position: absolute;
+		top: var(--margin-width, 2px);
+		right: var(--margin-width, 2px);
+		bottom: var(--margin-width, 2px);
+		left: var(--margin-width, 2px);
+		background: inherit;
+		border-radius: var(--base-radius);
+		z-index: -1;
+	}
+
+	@keyframes rotate {
+		from {
+			transform: translate(-50%, -50%) rotate(0deg);
+		}
+		to {
+			transform: translate(-50%, -50%) rotate(360deg);
+		}
+	}
+</style>
diff --git a/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte b/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte
index 66ebd350e8..79935129a2 100644
--- a/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte
+++ b/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte
@@ -134,6 +134,7 @@
 
 						{#if getTypeAsString(json[key]) === 'object'}
 							<svelte:self
+								{connecting}
 								json={json[key]}
 								level={level + 1}
 								currentPath={computeFullKey(key, rawKey)}