windmill-components 1.493.9 → 1.501.4

package/package/components/apps/editor/SubGridEditor.svelte

@@ -1,4 +1,5 @@
-<script lang="ts">import { push } from '../../../history';
+<script lang="ts">import { stopPropagation } from 'svelte/legacy';
+import { push } from '../../../history';
 import { classNames } from '../../../utils';
 import { createEventDispatcher, getContext, onDestroy } from 'svelte';
 import { twMerge } from 'tailwind-merge';
@@ -9,28 +10,20 @@ import Component from './component/Component.svelte';
 import ComponentWrapper from './component/ComponentWrapper.svelte';
 import GridViewer from './GridViewer.svelte';
 import GridEditorMenu from './GridEditorMenu.svelte';
-export let containerHeight = undefined;
-export let containerWidth = undefined;
-let classes = '';
-export { classes as class };
-export let style = '';
-export let noPadding = false;
-export let noYPadding = false;
-export let subGridId;
-export let visible = true;
-export let id;
-export let shouldHighlight = true;
+let { containerHeight = undefined, containerWidth = undefined, class: classes = '', style = '', noPadding = false, noYPadding = false, subGridId, visible = true, id, shouldHighlight = true } = $props();
 const dispatch = createEventDispatcher();
 const { app, connectingInput, selectedComponent, focusedGrid, mode, parentWidth, breakpoint, allIdsInPath, worldStore } = getContext('AppViewerContext');
 const editorContext = getContext('AppEditorContext');
-let isActive = false;
+let isActive = $state(false);
 let sber = editorContext?.componentActive?.subscribe((x) => (isActive = x));
-let everVisible = visible;
-$: visible && !everVisible && (everVisible = true);
+let everVisible = $state(visible);
+$effect.pre(() => {
+    visible && !everVisible && (everVisible = true);
+});
 onDestroy(() => {
     sber?.();
 });
-$: highlight = id === $focusedGrid?.parentComponentId && shouldHighlight;
+let highlight = $derived(id === $focusedGrid?.parentComponentId && shouldHighlight);
 const onpointerdown = (e) => {
     dispatch('focus');
 };
@@ -46,8 +39,8 @@ function lock(dataItem) {
     }
     $app = $app;
 }
-let container = undefined;
-$: maxRow = maxHeight($app.subgrids?.[subGridId] ?? [], containerHeight ?? 0, $breakpoint);
+let container = $state(undefined);
+let maxRow = $derived(maxHeight($app.subgrids?.[subGridId] ?? [], containerHeight ?? 0, $breakpoint));
 export function moveComponentBetweenSubgrids(componentId, parentComponentId, subGridIndex, position) {
     // Find the component in the source subgrid
     const component = findGridItem($app, componentId);
@@ -65,7 +58,7 @@ export function moveComponentBetweenSubgrids(componentId, parentComponentId, sub
     const gridItem = component;
     insertNewGridItem($app, (id) => ({ ...gridItem.data, id }), { parentComponentId: parentComponentId, subGridIndex: subGridIndex }, Object.fromEntries(gridColumns.map((column) => [column, gridItem[column]])), component.id, position, undefined, undefined, undefined, true);
     // Update the app state
-    $app = { ...$app };
+    $app = $app;
     if (parentGrid) {
         $focusedGrid = {
             parentComponentId,
@@ -94,17 +87,19 @@ export function moveToRoot(componentId, position) {
     const gridItem = component;
     insertNewGridItem($app, (id) => ({ ...gridItem.data, id }), undefined, Object.fromEntries(gridColumns.map((column) => [column, gridItem[column]])), component.id, position, undefined, undefined, undefined, true);
     // Update the app state
-    $app = { ...$app };
+    $app = $app;
 }
 </script>
 
+<!-- {visible}
+{everVisible} -->
 {#if everVisible || $app.eagerRendering}
 	<div
 		class="translate-x-0 translate-y-0 w-full subgrid {visible
 			? 'visible'
 			: 'invisible h-0 overflow-hidden'}"
 		bind:this={container}
-		on:pointerdown={onpointerdown}
+		{onpointerdown}
 	>
 		<div
 			class={twMerge(
@@ -122,9 +117,10 @@ export function moveToRoot(componentId, position) {
 								isActive && !$selectedComponent?.includes(id)
 									? 'outline-orange-600'
 									: 'outline-gray-400 dark:outline-gray-600'
-						  }`
+							}`
 						: ''}
 				>
+					<!-- A{JSON.stringify($app.subgrids?.[subGridId]) ?? []}B -->
 					<Grid
 						allIdsInPath={$allIdsInPath}
 						items={$app.subgrids?.[subGridId] ?? []}
@@ -135,10 +131,6 @@ export function moveToRoot(componentId, position) {
 							}
 						}}
 						selectedIds={$selectedComponent}
-						let:dataItem
-						let:overlapped
-						let:moveMode
-						let:componentDraggedId
 						scroller={container}
 						parentWidth={$parentWidth - 17}
 						{containerWidth}
@@ -171,81 +163,85 @@ export function moveToRoot(componentId, position) {
 						}}
 						disableMove={!!$connectingInput.opened}
 					>
-						<ComponentWrapper
-							id={dataItem.id}
-							type={dataItem.data.type}
-							class={classNames(
-								'h-full w-full center-center',
-								$selectedComponent?.includes(dataItem.id) ? 'active-grid-item' : '',
-								'top-0'
-							)}
-						>
-							<GridEditorMenu id={dataItem.id}>
-								<Component
-									{overlapped}
-									fullHeight={dataItem?.[$breakpoint === 'sm' ? 3 : 12]?.fullHeight}
-									render={visible}
-									component={dataItem.data}
-									selected={Boolean($selectedComponent?.includes(dataItem.id))}
-									locked={isFixed(dataItem)}
-									on:lock={() => lock(dataItem)}
-									on:expand={() => {
-										const parentGridItem = findGridItem($app, id)
+						{#snippet children({ dataItem, overlapped, componentDraggedId })}
+							<ComponentWrapper
+								id={dataItem.id}
+								type={dataItem.data.type}
+								class={classNames(
+									'h-full w-full center-center',
+									$selectedComponent?.includes(dataItem.id) ? 'active-grid-item' : '',
+									'top-0'
+								)}
+							>
+								<GridEditorMenu id={dataItem.id}>
+									<Component
+										{overlapped}
+										fullHeight={dataItem?.[$breakpoint === 'sm' ? 3 : 12]?.fullHeight}
+										render={visible}
+										component={dataItem.data}
+										selected={Boolean($selectedComponent?.includes(dataItem.id))}
+										locked={isFixed(dataItem)}
+										on:lock={() => lock(dataItem)}
+										on:expand={() => {
+											const parentGridItem = findGridItem($app, id)
 
-										if (!parentGridItem) {
-											return
-										}
+											if (!parentGridItem) {
+												return
+											}
 
-										$selectedComponent = [dataItem.id]
-										push(editorContext?.history, $app)
+											$selectedComponent = [dataItem.id]
+											push(editorContext?.history, $app)
 
-										expandGriditem(
-											$app.subgrids?.[subGridId] ?? [],
-											dataItem.id,
-											$breakpoint,
-											parentGridItem
-										)
-										$app = $app
-									}}
-									on:fillHeight={() => {
-										const gridItem = findGridItem($app, dataItem.id)
-										const b = $breakpoint === 'sm' ? 3 : 12
+											expandGriditem(
+												$app.subgrids?.[subGridId] ?? [],
+												dataItem.id,
+												$breakpoint,
+												parentGridItem
+											)
+											$app = $app
+										}}
+										on:fillHeight={() => {
+											const gridItem = findGridItem($app, dataItem.id)
+											const b = $breakpoint === 'sm' ? 3 : 12
 
-										if (gridItem?.[b]) {
-											gridItem[b].fullHeight = !gridItem[b].fullHeight
-										}
-										$app = $app
-									}}
-									{moveMode}
-									{componentDraggedId}
-								/>
-							</GridEditorMenu>
-						</ComponentWrapper>
+											if (gridItem?.[b]) {
+												gridItem[b].fullHeight = !gridItem[b].fullHeight
+											}
+											$app = $app
+										}}
+										{componentDraggedId}
+									/>
+								</GridEditorMenu>
+							</ComponentWrapper>
+						{/snippet}
 					</Grid>
 				</div>
 			{:else}
 				<GridViewer
 					allIdsInPath={$allIdsInPath}
 					items={$app.subgrids?.[subGridId] ?? []}
-					let:dataItem
 					breakpoint={$breakpoint}
 					parentWidth={$parentWidth - 17}
 					{containerWidth}
 					{maxRow}
 				>
-					<!-- svelte-ignore a11y-click-events-have-key-events -->
-					<div
-						on:pointerdown|stopPropagation={(e) => selectComponent(e, dataItem.id)}
-						class={classNames('h-full w-full center-center', 'top-0')}
-					>
-						<Component
-							fullHeight={dataItem?.[$breakpoint === 'sm' ? 3 : 12]?.fullHeight}
-							render={visible}
-							component={dataItem.data}
-							selected={Boolean($selectedComponent?.includes(dataItem.id))}
-							locked={isFixed(dataItem)}
-						/>
-					</div>
+					{#snippet children({ dataItem })}
+						<!-- svelte-ignore a11y_click_events_have_key_events -->
+						<div
+							onpointerdown={stopPropagation((e) =>
+								selectComponent(e as PointerEvent, dataItem.id)
+							)}
+							class={classNames('h-full w-full center-center', 'top-0')}
+						>
+							<Component
+								fullHeight={dataItem?.[$breakpoint === 'sm' ? 3 : 12]?.fullHeight}
+								render={visible}
+								component={dataItem.data}
+								selected={Boolean($selectedComponent?.includes(dataItem.id))}
+								locked={isFixed(dataItem)}
+							/>
+						</div>
+					{/snippet}
 				</GridViewer>
 			{/if}
 		</div>

package/package/components/apps/editor/SubGridEditor.svelte.d.ts

@@ -1,3 +1,15 @@
+interface Props {
+    containerHeight?: number | undefined;
+    containerWidth?: number | undefined;
+    class?: string;
+    style?: string;
+    noPadding?: boolean;
+    noYPadding?: boolean;
+    subGridId: string;
+    visible?: boolean;
+    id: string;
+    shouldHighlight?: boolean;
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -11,26 +23,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const SubGridEditor: $$__sveltets_2_IsomorphicComponent<{
-    containerHeight?: number | undefined;
-    containerWidth?: number | undefined;
-    class?: string;
-    style?: string;
-    noPadding?: boolean;
-    noYPadding?: boolean;
-    subGridId: string;
-    visible?: boolean;
-    id: string;
-    shouldHighlight?: boolean;
-    moveComponentBetweenSubgrids?: (componentId: string, parentComponentId: string, subGridIndex: number, position?: {
-        x: number;
-        y: number;
-    }) => void;
-    moveToRoot?: (componentId: string, position?: {
-        x: number;
-        y: number;
-    }) => void;
-}, {
+declare const SubGridEditor: $$__sveltets_2_IsomorphicComponent<Props, {
     focus: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
@@ -43,6 +36,6 @@ declare const SubGridEditor: $$__sveltets_2_IsomorphicComponent<{
         x: number;
         y: number;
     }) => void;
-}, string>;
+}, "">;
 type SubGridEditor = InstanceType<typeof SubGridEditor>;
 export default SubGridEditor;

package/package/components/apps/editor/TabsDebug.svelte

@@ -1,15 +1,13 @@
-<script lang="ts">import Dropdown from '../../DropdownV2.svelte';
+<script lang="ts">import { createBubbler, stopPropagation } from 'svelte/legacy';
+const bubble = createBubbler();
+import Dropdown from '../../DropdownV2.svelte';
 import { classNames } from '../../../utils';
 import { createEventDispatcher, getContext } from 'svelte';
 import { Bug } from 'lucide-svelte';
-export let tabs = [];
-export let id;
-export let isConditionalDebugMode = false;
-export let isSmall = false;
 const { componentControl } = getContext('AppViewerContext');
 const dispatch = createEventDispatcher();
-export let isManuallySelected = false;
-let selected = null;
+let { tabs = [], id, isConditionalDebugMode = false, isSmall = false, isManuallySelected = $bindable(false) } = $props();
+let selected = $state(null);
 async function getItems() {
     return [
         ...tabs.map((_, index) => ({
@@ -40,7 +38,7 @@ async function getItems() {
 
 {#key tabs}
 	<Dropdown items={getItems} class="w-fit h-auto" usePointerDownOutside>
-		<svelte:fragment slot="buttonReplacement">
+		{#snippet buttonReplacement()}
 			<button
 				title={isConditionalDebugMode ? 'Debug conditions' : 'Debug tabs'}
 				class={classNames(
@@ -49,8 +47,8 @@ async function getItems() {
 						? 'hover:bg-red-200 hover:text-red-800'
 						: 'text-blue-600 hover:bg-blue-300 hover:text-blue-800'
 				)}
-				on:click={() => dispatch('triggerInlineEditor')}
-				on:pointerdown|stopPropagation
+				onclick={() => dispatch('triggerInlineEditor')}
+				onpointerdown={stopPropagation(bubble('pointerdown'))}
 			>
 				{#if isManuallySelected}
 					<div class="whitespace-nowrap">
@@ -71,6 +69,6 @@ async function getItems() {
 					{isConditionalDebugMode ? `Debug conditions` : `Debug tabs`}
 				{/if}
 			</button>
-		</svelte:fragment>
+		{/snippet}
 	</Dropdown>
 {/key}

package/package/components/apps/editor/TabsDebug.svelte.d.ts

@@ -1,3 +1,10 @@
+interface Props {
+    tabs?: any[];
+    id: string;
+    isConditionalDebugMode?: boolean;
+    isSmall?: boolean;
+    isManuallySelected?: boolean;
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -11,17 +18,10 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const TabsDebug: $$__sveltets_2_IsomorphicComponent<{
-    tabs?: any[];
-    id: string;
-    isConditionalDebugMode?: boolean;
-    isSmall?: boolean;
-    isManuallySelected?: boolean;
-}, {
-    pointerdown: PointerEvent;
+declare const TabsDebug: $$__sveltets_2_IsomorphicComponent<Props, {
     triggerInlineEditor: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "isManuallySelected">;
 type TabsDebug = InstanceType<typeof TabsDebug>;
 export default TabsDebug;

package/package/components/apps/editor/appUtils.d.ts

@@ -1,4 +1,4 @@
-import type { App, BaseAppComponent, ComponentCustomCSS, ConnectingInput, EditorBreakpoint, FocusedGrid, GeneralAppInput, GridItem } from '../types';
+import type { App, BaseAppComponent, ComponentCustomCSS, ConnectingInput, EditorBreakpoint, FocusedGrid, GeneralAppInput, GridItem, RichConfiguration } from '../types';
 import { components, type AppComponent, type BaseComponent, type InitialAppComponent, type TypedComponent } from './component';
 import type { Output, World } from '../rx';
 import type { FilledItem, Size } from '../svelte-grid/types';
@@ -48,6 +48,8 @@ export declare function appComponentFromType<T extends keyof typeof components>(
     horizontalAlignment?: 'left' | 'center' | 'right';
     componnetInput?: Partial<InitialAppComponent['componentInput']>;
 }): (id: string) => BaseAppComponent & BaseComponent<T>;
+export declare function createChartjsComponentDataset(): RichConfiguration;
+export declare function createPlotlyComponentDataset(): RichConfiguration;
 export declare function insertNewGridItem(app: App, builddata: (id: string) => AppComponent, focusedGrid: FocusedGrid | undefined, columns?: Record<string, any>, keepId?: string, initialPosition?: {
     x: number;
     y: number;

package/package/components/apps/editor/appUtils.js

@@ -345,16 +345,69 @@ export function appComponentFromType(type, overrideConfiguration, extra, overrid
             customCss: deepMergeWithPriority(ccomponents[type].customCss, override?.customCss ?? {}),
             recomputeIds: init.recomputeIds ? [] : undefined,
             actionButtons: init.actionButtons ? [] : undefined,
-            actions: [],
+            actions: undefined,
             menuItems: init.menuItems ? [] : undefined,
             numberOfSubgrids: init.numberOfSubgrids,
             horizontalAlignment: override?.horizontalAlignment ?? init.horizontalAlignment,
             verticalAlignment: override?.verticalAlignment ?? init.verticalAlignment,
             id,
+            datasets: type === 'plotlycomponentv2'
+                ? createPlotlyComponentDataset()
+                : type === 'chartjscomponentv2'
+                    ? createChartjsComponentDataset()
+                    : undefined,
+            xData: type === 'plotlycomponentv2' || type === 'chartjscomponentv2'
+                ? {
+                    type: 'evalv2',
+                    fieldType: 'array',
+                    expr: '[1, 2, 3, 4]',
+                    connections: []
+                }
+                : undefined,
             ...(extra ?? {})
         };
     };
 }
+export function createChartjsComponentDataset() {
+    return {
+        type: 'static',
+        fieldType: 'array',
+        subFieldType: 'chartjs',
+        value: [
+            {
+                value: {
+                    type: 'static',
+                    fieldType: 'array',
+                    subFieldType: 'number',
+                    value: [25, 25, 50]
+                },
+                name: 'Dataset 1'
+            }
+        ]
+    };
+}
+export function createPlotlyComponentDataset() {
+    return {
+        type: 'static',
+        fieldType: 'array',
+        subFieldType: 'plotly',
+        value: [
+            {
+                value: {
+                    type: 'static',
+                    fieldType: 'array',
+                    subFieldType: 'number',
+                    value: [1, 2, 3, 4]
+                },
+                name: 'Dataset 1',
+                aggregation_method: 'sum',
+                type: 'bar',
+                tooltip: '',
+                color: '#C8A2C8'
+            }
+        ]
+    };
+}
 export function insertNewGridItem(app, builddata, focusedGrid, columns, keepId, initialPosition = { x: 0, y: 0 }, recOverride, keepSubgrids, fixed, shouldNotFindSpace) {
     const id = keepId ?? getNextGridItemId(app);
     const data = builddata(id);

package/package/components/apps/editor/component/Component.svelte

@@ -1,17 +1,12 @@
 <script lang="ts">import { getContext } from 'svelte';
 import ComponentInner from './ComponentInner.svelte';
 import ComponentRendered from './ComponentRendered.svelte';
-export let component;
-export let selected;
-export let locked = false;
-export let render;
-export let fullHeight;
-export let overlapped = undefined;
-export let componentDraggedId = undefined;
 const { app } = getContext('AppViewerContext');
-export let moveMode = undefined;
-let everRender = render;
-$: render && !everRender && (everRender = true);
+let { component, selected, locked = false, render, fullHeight, overlapped = undefined, componentDraggedId = undefined } = $props();
+let everRender = $state(render);
+$effect(() => {
+    render && !everRender && (everRender = true);
+});
 </script>
 
 {#if everRender || $app.eagerRendering}
@@ -19,7 +14,6 @@ $: render && !everRender && (everRender = true);
 		on:expand
 		on:lock
 		on:fillHeight
-		{moveMode}
 		{componentDraggedId}
 		{overlapped}
 		{render}

package/package/components/apps/editor/component/Component.svelte.d.ts

@@ -1,4 +1,13 @@
 import type { AppComponent } from './components';
+interface Props {
+    component: AppComponent;
+    selected: boolean;
+    locked?: boolean;
+    render: boolean;
+    fullHeight: boolean;
+    overlapped?: string | undefined;
+    componentDraggedId?: string | undefined;
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -12,21 +21,12 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const Component: $$__sveltets_2_IsomorphicComponent<{
-    component: AppComponent;
-    selected: boolean;
-    locked?: boolean;
-    render: boolean;
-    fullHeight: boolean;
-    overlapped?: string | undefined;
-    componentDraggedId?: string | undefined;
-    moveMode?: string | undefined;
-}, {
+declare const Component: $$__sveltets_2_IsomorphicComponent<Props, {
     expand: CustomEvent<any>;
     lock: CustomEvent<any>;
     fillHeight: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "">;
 type Component = InstanceType<typeof Component>;
 export default Component;

package/package/components/apps/editor/component/ComponentInner.svelte

@@ -40,7 +40,6 @@ import PlotlyHtml from '../../components/display/PlotlyHtml.svelte';
 import PlotlyHtmlV2 from '../../components/display/PlotlyHtmlV2.svelte';
 import AppScatterChart from '../../components/display/AppScatterChart.svelte';
 import AppPieChart from '../../components/display/AppPieChart.svelte';
-import AppTable from '../../components/display/table/AppTable.svelte';
 import AppAggridTable from '../../components/display/table/AppAggridTable.svelte';
 import AppText from '../../components/display/AppText.svelte';
 import AppCodeInputComponent from '../../components/inputs/AppCodeInputComponent.svelte';
@@ -68,19 +67,19 @@ import AppSliderInputs from '../../components/inputs/AppSliderInputs.svelte';
 import AppNumberInput from '../../components/inputs/AppNumberInput.svelte';
 import AppNavbar from '../../components/display/AppNavbar.svelte';
 import AppDateSelect from '../../components/inputs/AppDateSelect.svelte';
-import AppDisplayComponentByJobId from '../../components/display/AppRecomputeAll.svelte';
+import AppDisplayComponentByJobId from '../../components/display/AppDisplayComponentByJobId.svelte';
 import AppRecomputeAll from '../../components/display/AppRecomputeAll.svelte';
 import AppUserResource from '../../components/inputs/AppUserResource.svelte';
 import { Button } from '../../../common';
-export let component;
-export let render;
-export let componentContainerHeight;
-export let errorHandledByComponent;
-export let inlineEditorOpened;
-export let initializing = undefined;
+import { Loader2 } from 'lucide-svelte';
+let { component, render, componentContainerHeight, errorHandledByComponent = $bindable(), inlineEditorOpened = $bindable(), initializing = $bindable(undefined) } = $props();
 </script>
 
-<svelte:boundary>
+<svelte:boundary
+	onerror={(e) => {
+		console.error(e)
+	}}
+>
 	{#if component.type === 'displaycomponent'}
 		<AppDisplayComponent
 			id={component.id}
@@ -203,8 +202,6 @@ export let initializing = undefined;
 			customCss={component.customCss}
 			bind:initializing
 			componentInput={component.componentInput}
-			datasets={component.datasets}
-			xData={component.xData}
 			{render}
 		/>
 	{:else if component.type === 'agchartscomponentee'}
@@ -214,22 +211,24 @@ export let initializing = undefined;
 			customCss={component.customCss}
 			bind:initializing
 			componentInput={component.componentInput}
-			datasets={component.datasets}
-			xData={component.xData}
 			license={component.license}
 			ee={true}
 			{render}
 		/>
 	{:else if component.type === 'tablecomponent'}
-		<AppTable
-			configuration={component.configuration}
-			id={component.id}
-			customCss={component.customCss}
-			bind:initializing
-			componentInput={component.componentInput}
-			actionButtons={component.actionButtons}
-			{render}
-		/>
+		{#await import('../../components/display/table/AppTable.svelte')}
+			<Loader2 />
+		{:then Module}
+			<Module.default
+				configuration={component.configuration}
+				id={component.id}
+				customCss={component.customCss}
+				bind:initializing
+				componentInput={component.componentInput}
+				actionButtons={component.actionButtons}
+				{render}
+			/>
+		{/await}
 	{:else if component.type === 'dbexplorercomponent'}
 		<AppDbExplorer
 			configuration={component.configuration}
@@ -337,13 +336,7 @@ export let initializing = undefined;
 			{render}
 		/>
 	{:else if component.type === 'multiselectcomponent'}
-		<AppMultiSelect
-			id={component.id}
-			configuration={component.configuration}
-			customCss={component.customCss}
-			verticalAlignment={component.verticalAlignment}
-			{render}
-		/>
+		<AppMultiSelect id={component.id} verticalAlignment={component.verticalAlignment} {render} />
 	{:else if component.type === 'multiselectcomponentv2'}
 		<AppMultiSelectV2
 			id={component.id}
@@ -787,14 +780,16 @@ export let initializing = undefined;
 		/>
 	{/if}
 	{#snippet failed(error, reset)}
-		<div class="flex flex-col items-center justify-center h-full bg-red-100 p-10 h-full w-full">
+		<div class="flex flex-col items-center justify-center bg-red-100 p-10 h-full w-full">
 			<h3 class="text-red-500 text-2xl font-bold">Rendering of component failed</h3>
 			<pre
 				class="text-2xs mt-4 w-full font-mono border border-red-500 rounded-md p-2 bg-surface-secondary text-primary overflow-auto"
 				>{error}</pre
 			>
 			<div class="flex mt-4">
-			<Button wrapperClasses="border rounded !border-gray-400" color="dark" on:click={reset}>reset</Button>
+				<Button wrapperClasses="border rounded !border-gray-400" color="dark" on:click={reset}
+					>reset</Button
+				>
 			</div>
 		</div>
 	{/snippet}