From 89db623b64d4ebe83a7e092fe7a2b54f637f16f5 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Tue, 21 Mar 2023 20:56:54 +0100
Subject: [PATCH] improve load time for tabs

---
 .../apps/components/layout/AppTabs.svelte     | 24 +++++++++----------
 .../apps/editor/component/Component.svelte    |  1 -
 .../apps/editor/component/components.ts       |  2 +-
 3 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/frontend/src/lib/components/apps/components/layout/AppTabs.svelte b/frontend/src/lib/components/apps/components/layout/AppTabs.svelte
index b7648e3906..9a95aa2fc3 100644
--- a/frontend/src/lib/components/apps/components/layout/AppTabs.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppTabs.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
 	import { Tab, Tabs } from '$lib/components/common'
 	import { getContext } from 'svelte'
-	import { initOutput } from '../../editor/appUtils'
+	import { initConfig, initOutput } from '../../editor/appUtils'
+	import { components } from '../../editor/component'
 	import SubGridEditor from '../../editor/SubGridEditor.svelte'
-	import type { AppInput } from '../../inputType'
 	import type { AppViewerContext, ComponentCustomCSS, RichConfigurations } from '../../types'
 	import { concatCustomCss } from '../../utils'
 	import InputValue from '../helpers/InputValue.svelte'
@@ -14,13 +14,16 @@
 	export let tabs: string[]
 	export let customCss: ComponentCustomCSS<'tabscomponent'> | undefined = undefined
 	export let render: boolean
-	export let initializing: boolean | undefined = configuration.tabsKind != undefined
+
+	let resolvedConfig = initConfig(
+		components['tabscomponent'].initialData.configuration,
+		configuration
+	)
 
 	const { app, worldStore, focusedGrid, selectedComponent, mode, componentControl } =
 		getContext<AppViewerContext>('AppViewerContext')
 
 	let selected: string = tabs[0]
-	let kind: 'tabs' | 'sidebar' | 'invisibleOnView' | undefined = undefined
 	let tabHeight: number = 0
 
 	let outputs = initOutput($worldStore, id, {
@@ -82,15 +85,10 @@
 	$: css = concatCustomCss($app.css?.tabscomponent, customCss)
 </script>
 
-<InputValue
-	on:done={() => initializing && (initializing = false)}
-	{id}
-	input={configuration.tabsKind}
-	bind:value={kind}
-/>
+<InputValue {id} input={configuration.tabsKind} bind:value={resolvedConfig.tabsKind} />
 
-<div class={kind == 'sidebar' ? 'flex gap-4 w-full' : 'w-full'}>
-	{#if !kind || kind == 'tabs' || (kind == 'invisibleOnView' && $mode == 'dnd')}
+<div class={resolvedConfig.tabsKind == 'sidebar' ? 'flex gap-4 w-full' : 'w-full'}>
+	{#if !resolvedConfig.tabsKind || resolvedConfig.tabsKind == 'tabs' || (resolvedConfig.tabsKind == 'invisibleOnView' && $mode == 'dnd')}
 		<div bind:clientHeight={tabHeight}>
 			<Tabs bind:selected class={css?.tabRow?.class} style={css?.tabRow?.style}>
 				{#each tabs ?? [] as res}
@@ -106,7 +104,7 @@
 				{/each}
 			</Tabs>
 		</div>
-	{:else if kind == 'sidebar'}
+	{:else if resolvedConfig.tabsKind == 'sidebar'}
 		<div
 			class="flex gap-y-2 flex-col w-1/6 max-w-[160px] bg-white text-[#2e3440] opacity-80 px-4 pt-4 border-r border-gray-400"
 		>
diff --git a/frontend/src/lib/components/apps/editor/component/Component.svelte b/frontend/src/lib/components/apps/editor/component/Component.svelte
index 75ed84eeba..aea0a2b42e 100644
--- a/frontend/src/lib/components/apps/editor/component/Component.svelte
+++ b/frontend/src/lib/components/apps/editor/component/Component.svelte
@@ -365,7 +365,6 @@
 				customCss={component.customCss}
 				{componentContainerHeight}
 				{render}
-				bind:initializing
 			/>
 		{:else if component.type === 'containercomponent'}
 			<AppContainer
diff --git a/frontend/src/lib/components/apps/editor/component/components.ts b/frontend/src/lib/components/apps/editor/component/components.ts
index 36c5f39b60..94ba0c4aa2 100644
--- a/frontend/src/lib/components/apps/editor/component/components.ts
+++ b/frontend/src/lib/components/apps/editor/component/components.ts
@@ -1263,7 +1263,7 @@ Hello \${ctx.username}
 					type: 'static',
 					onlyStatic: true,
 					selectOptions: selectOptions.tabsKindOptions,
-					value: 'tabs'
+					value: 'tabs' as string
 				}
 			},
 			componentInput: undefined,