windmill-components 1.79.0 → 1.82.0

package/components/apps/components/display/AppIcon.svelte

@@ -1,4 +1,5 @@
 <script>import { getContext } from 'svelte';
+import { initOutput } from '../../editor/appUtils';
 import { concatCustomCss } from '../../utils';
 import { AlignWrapper, InputValue } from '../helpers';
 import { loadIcon } from '../icon';
@@ -8,7 +9,9 @@ export let verticalAlignment = undefined;
 export let configuration;
 export let customCss = undefined;
 export let render;
-const { app } = getContext('AppViewerContext');
+const { app, worldStore } = getContext('AppViewerContext');
+//used so that we can count number of outputs setup for first refresh
+initOutput($worldStore, id, {});
 let icon = undefined;
 let size;
 let color;

package/components/apps/components/display/AppIcon.svelte.d.ts

@@ -6,7 +6,7 @@ declare const __propDef: {
         horizontalAlignment?: 'left' | 'center' | 'right' | undefined;
         verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
         configuration: RichConfigurations;
-        customCss?: ComponentCustomCSS<'container' | 'icon'> | undefined;
+        customCss?: ComponentCustomCSS<'iconcomponent'> | undefined;
         render: boolean;
     };
     events: {

package/components/apps/components/display/AppImage.svelte

@@ -1,33 +1,46 @@
 <script>import { getContext } from 'svelte';
 import { twMerge } from 'tailwind-merge';
+import { initConfig, initOutput } from '../../editor/appUtils';
+import { components, selectOptions } from '../../editor/component';
 import { concatCustomCss } from '../../utils';
-import InputValue from '../helpers/InputValue.svelte';
+import Loader from '../helpers/Loader.svelte';
+import ResolveConfig from '../helpers/ResolveConfig.svelte';
 export let id;
 export let configuration;
 export let customCss = undefined;
 export let render;
-const { app } = getContext('AppViewerContext');
+let resolvedConfig = initConfig(components['imagecomponent'].initialData.configuration, configuration);
+const { app, worldStore } = getContext('AppViewerContext');
 const fit = {
     cover: 'object-cover',
     contain: 'object-contain',
     fill: 'object-fill'
 };
-let source = undefined;
-let imageFit = undefined;
-let altText = undefined;
+//used so that we can count number of outputs setup for first refresh
+initOutput($worldStore, id, {});
 $: css = concatCustomCss($app.css?.imagecomponent, customCss);
 </script>
 
-<InputValue {id} input={configuration.source} bind:value={source} />
-<InputValue {id} input={configuration.imageFit} bind:value={imageFit} />
-<InputValue {id} input={configuration.altText} bind:value={altText} />
+{#each Object.keys(components['imagecomponent'].initialData.configuration) as key (key)}
+	<ResolveConfig
+		{id}
+		{key}
+		bind:resolvedConfig={resolvedConfig[key]}
+		configuration={configuration[key]}
+	/>
+{/each}
 
 {#if render}
-	<img
-		on:pointerdown|preventDefault
-		src={source}
-		alt={altText}
-		style={css?.image?.style ?? ''}
-		class={twMerge(`w-full h-full ${fit[imageFit || 'cover']}`, css?.image?.class ?? '')}
-	/>
+	<Loader loading={resolvedConfig.source == undefined}>
+		<img
+			on:pointerdown|preventDefault
+			src={resolvedConfig.source}
+			alt={resolvedConfig.altText}
+			style={css?.image?.style ?? ''}
+			class={twMerge(
+				`w-full h-full ${fit[resolvedConfig.imageFit || 'cover']}`,
+				css?.image?.class ?? ''
+			)}
+		/>
+	</Loader>
 {/if}

package/components/apps/components/display/AppImage.svelte.d.ts

@@ -4,7 +4,7 @@ declare const __propDef: {
     props: {
         id: string;
         configuration: RichConfigurations;
-        customCss?: ComponentCustomCSS<'image'> | undefined;
+        customCss?: ComponentCustomCSS<'imagecomponent'> | undefined;
         render: boolean;
     };
     events: {

package/components/apps/components/display/AppMap.svelte.d.ts

@@ -4,7 +4,7 @@ declare const __propDef: {
     props: {
         id: string;
         configuration: RichConfigurations;
-        customCss?: ComponentCustomCSS<'map'> | undefined;
+        customCss?: ComponentCustomCSS<'mapcomponent'> | undefined;
         render: boolean;
     };
     events: {

package/components/apps/components/display/AppPdf.svelte

@@ -14,8 +14,7 @@ export let configuration;
 export let customCss = undefined;
 export let render;
 const { app, mode, worldStore, selectedComponent } = getContext('AppViewerContext');
-initOutput($worldStore, id, {
-    result: undefined,
+const outputs = initOutput($worldStore, id, {
     loading: false
 });
 let source = undefined;
@@ -53,6 +52,7 @@ async function loadDocument(src) {
         return;
     }
     try {
+        outputs.loading.set(true);
         await resetDoc();
         doc = await getDocument(src).promise;
         pageNumber = 1;
@@ -64,6 +64,7 @@ async function loadDocument(src) {
         error = err?.message ?? (typeof err === 'string' ? err : 'Error loading PDF');
         console.log(err);
     }
+    outputs.loading.set(false);
 }
 async function renderPdf(scaleToViewport = true, resizing = false) {
     if (!(doc && wrapper && zoom)) {

package/components/apps/components/display/AppPdf.svelte.d.ts

@@ -5,7 +5,7 @@ declare const __propDef: {
     props: {
         id: string;
         configuration: RichConfigurations;
-        customCss?: ComponentCustomCSS<'container'> | undefined;
+        customCss?: ComponentCustomCSS<'pdfcomponent'> | undefined;
         render: boolean;
     };
     events: {

package/components/apps/components/display/AppPieChart.svelte

@@ -12,7 +12,7 @@ export let initializing = undefined;
 export let customCss = undefined;
 export let render;
 const { app, worldStore } = getContext('AppViewerContext');
-initOutput($worldStore, id, {
+const outputs = initOutput($worldStore, id, {
     result: undefined,
     loading: false
 });
@@ -47,7 +47,7 @@ $: css = concatCustomCss($app.css?.piechartcomponent, customCss);
 <InputValue {id} input={configuration.theme} bind:value={theme} />
 <InputValue {id} input={configuration.doughnutStyle} bind:value={doughnut} />
 
-<RunnableWrapper {render} autoRefresh {componentInput} {id} bind:initializing bind:result>
+<RunnableWrapper {outputs} {render} autoRefresh {componentInput} {id} bind:initializing bind:result>
 	<div class="w-full h-full {css?.container?.class ?? ''}" style={css?.container?.style ?? ''}>
 		{#if result}
 			{#if doughnut}

package/components/apps/components/display/AppPieChart.svelte.d.ts

@@ -7,7 +7,7 @@ declare const __propDef: {
         componentInput: AppInput | undefined;
         configuration: RichConfigurations;
         initializing?: boolean | undefined;
-        customCss?: ComponentCustomCSS<'container'> | undefined;
+        customCss?: ComponentCustomCSS<'piechartcomponent'> | undefined;
         render: boolean;
     };
     events: {

package/components/apps/components/display/AppScatterChart.svelte

@@ -15,7 +15,7 @@ export let render;
 let zoomable = false;
 let pannable = false;
 const { app, worldStore } = getContext('AppViewerContext');
-initOutput($worldStore, id, {
+const outputs = initOutput($worldStore, id, {
     result: undefined,
     loading: false
 });
@@ -50,7 +50,7 @@ $: css = concatCustomCss($app.css?.scatterchartcomponent, customCss);
 <InputValue {id} input={configuration.zoomable} bind:value={zoomable} />
 <InputValue {id} input={configuration.pannable} bind:value={pannable} />
 
-<RunnableWrapper {render} autoRefresh {componentInput} {id} bind:initializing bind:result>
+<RunnableWrapper {outputs} {render} autoRefresh {componentInput} {id} bind:initializing bind:result>
 	<div class="w-full h-full {css?.container?.class ?? ''}" style={css?.container?.style ?? ''}>
 		{#if result}
 			<Scatter {data} {options} />

package/components/apps/components/display/AppScatterChart.svelte.d.ts

@@ -7,7 +7,7 @@ declare const __propDef: {
         componentInput: AppInput | undefined;
         configuration: RichConfigurations;
         initializing?: boolean | undefined;
-        customCss?: ComponentCustomCSS<'container'> | undefined;
+        customCss?: ComponentCustomCSS<'scatterchartcomponent'> | undefined;
         render: boolean;
     };
     events: {

package/components/apps/components/display/AppText.svelte

@@ -3,12 +3,15 @@ import { copyToClipboard } from '../../../../utils';
 import Button from '../../../common/button/Button.svelte';
 import Popover from '../../../Popover.svelte';
 import AlignWrapper from '../helpers/AlignWrapper.svelte';
-import InputValue from '../helpers/InputValue.svelte';
 import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
 import { twMerge } from 'tailwind-merge';
 import { getContext } from 'svelte';
-import { initOutput } from '../../editor/appUtils';
+import { initConfig, initOutput } from '../../editor/appUtils';
 import Tooltip from '../../../Tooltip.svelte';
+import { get } from 'svelte/store';
+import ResolveConfig from '../helpers/ResolveConfig.svelte';
+import { components } from '../../editor/component';
+import { isCodeInjection } from '../../../flows/utils';
 export let id;
 export let componentInput;
 export let horizontalAlignment = 'left';
@@ -17,18 +20,20 @@ export let configuration;
 export let initializing = undefined;
 export let customCss = undefined;
 export let render;
+let resolvedConfig = initConfig(components['textcomponent'].initialData.configuration, configuration);
 const { app, worldStore, mode } = getContext('AppViewerContext');
-const { ontextfocus } = getContext('AppEditorContext');
-initOutput($worldStore, id, {
-    result: undefined,
-    loading: false
-});
+const editorcontext = getContext('AppEditorContext');
 let result = undefined;
-let style = undefined;
-let copyButton;
-let tooltip = '';
+if (componentInput?.type == 'template' && !isCodeInjection(componentInput.eval)) {
+    result = componentInput.eval;
+    initializing = false;
+}
+const outputs = initOutput($worldStore, id, {
+    result,
+    loading: initializing
+});
 function getComponent() {
-    switch (style) {
+    switch (resolvedConfig.style) {
         case 'Title':
             return 'h1';
         case 'Subtitle':
@@ -44,7 +49,7 @@ function getComponent() {
     }
 }
 function getClasses() {
-    switch (style) {
+    switch (resolvedConfig.style) {
         case 'Caption':
             return 'text-sm italic text-gray-500';
         case 'Label':
@@ -55,15 +60,20 @@ function getClasses() {
 }
 let component = 'p';
 let classes = '';
-$: style && (component = getComponent());
-$: style && (classes = getClasses());
+$: resolvedConfig.style && (component = getComponent());
+$: resolvedConfig.style && (classes = getClasses());
 </script>
 
-<InputValue {id} input={configuration.style} bind:value={style} />
-<InputValue {id} input={configuration.copyButton} bind:value={copyButton} />
-<InputValue {id} input={configuration.tooltip} bind:value={tooltip} />
+{#each Object.keys(components['textcomponent'].initialData.configuration) as key (key)}
+	<ResolveConfig
+		{id}
+		{key}
+		bind:resolvedConfig={resolvedConfig[key]}
+		configuration={configuration[key]}
+	/>
+{/each}
 
-<RunnableWrapper {render} {componentInput} {id} bind:initializing bind:result>
+<RunnableWrapper {outputs} {render} {componentInput} {id} bind:initializing bind:result>
 	<div class="h-full w-full overflow-hidden">
 		<AlignWrapper {horizontalAlignment} {verticalAlignment}>
 			{#if !result || result === ''}
@@ -78,7 +88,10 @@ $: style && (classes = getClasses());
 						: ''}"
 					on:click={() => {
 						if ($mode === 'dnd' && componentInput?.type == 'template') {
-							$ontextfocus?.()
+							let ontextfocus = editorcontext?.ontextfocus
+							if (ontextfocus) {
+								get(ontextfocus)?.()
+							}
 						}
 					}}
 				>
@@ -93,10 +106,10 @@ $: style && (classes = getClasses());
 						style={[$app.css?.['textcomponent']?.['text']?.style, customCss?.text?.style].join(';')}
 					>
 						{String(result)}
-						{#if tooltip != ''}
-							<Tooltip>{tooltip}</Tooltip>
+						{#if resolvedConfig.tooltip != ''}
+							<Tooltip>{resolvedConfig.tooltip}</Tooltip>
 						{/if}
-						{#if copyButton && result}
+						{#if resolvedConfig.copyButton && result}
 							<Popover notClickable>
 								<Button
 									variant="border"

package/components/apps/components/display/AppText.svelte.d.ts

@@ -9,7 +9,7 @@ declare const __propDef: {
         verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
         configuration: RichConfigurations;
         initializing?: boolean | undefined;
-        customCss?: ComponentCustomCSS<'text'> | undefined;
+        customCss?: ComponentCustomCSS<'textcomponent'> | undefined;
         render: boolean;
     };
     events: {

package/components/apps/components/display/AppTimeseries.svelte

@@ -14,7 +14,7 @@ export let initializing = undefined;
 export let customCss = undefined;
 export let render;
 const { app, worldStore } = getContext('AppViewerContext');
-initOutput($worldStore, id, {
+const outputs = initOutput($worldStore, id, {
     result: undefined,
     loading: false
 });
@@ -61,7 +61,7 @@ $: css = concatCustomCss($app.css?.timeseriescomponent, customCss);
 <InputValue {id} input={configuration.zoomable} bind:value={zoomable} />
 <InputValue {id} input={configuration.pannable} bind:value={pannable} />
 
-<RunnableWrapper {render} autoRefresh {componentInput} {id} bind:initializing bind:result>
+<RunnableWrapper {outputs} {render} autoRefresh {componentInput} {id} bind:initializing bind:result>
 	<div class="w-full h-full {css?.container?.class ?? ''}" style={css?.container?.style ?? ''}>
 		{#if result}
 			<Scatter {data} {options} />

package/components/apps/components/display/AppTimeseries.svelte.d.ts

@@ -8,7 +8,7 @@ declare const __propDef: {
         componentInput: AppInput | undefined;
         configuration: RichConfigurations;
         initializing?: boolean | undefined;
-        customCss?: ComponentCustomCSS<'container'> | undefined;
+        customCss?: ComponentCustomCSS<'timeseriescomponent'> | undefined;
         render: boolean;
     };
     events: {

package/components/apps/components/display/PlotlyHtml.svelte

@@ -7,7 +7,7 @@ export let componentInput;
 export let initializing = undefined;
 export let render;
 const { worldStore } = getContext('AppViewerContext');
-initOutput($worldStore, id, {
+const outputs = initOutput($worldStore, id, {
     result: undefined,
     loading: false
 });
@@ -31,7 +31,7 @@ $: Plotly &&
 </script>
 
 <div class="w-full h-full" bind:clientHeight={h} bind:clientWidth={w}>
-	<RunnableWrapper {render} {componentInput} {id} bind:initializing bind:result>
+	<RunnableWrapper {outputs} {render} {componentInput} {id} bind:initializing bind:result>
 		<div on:pointerdown bind:this={divEl} />
 	</RunnableWrapper>
 </div>

package/components/apps/components/display/VegaLiteHtml.svelte

@@ -10,7 +10,7 @@ export let render;
 let result = undefined;
 let divEl = null;
 const { worldStore } = getContext('AppViewerContext');
-initOutput($worldStore, id, {
+const outputs = initOutput($worldStore, id, {
     result: undefined,
     loading: false
 });
@@ -46,7 +46,7 @@ $: vegaEmbed &&
 <InputValue {id} input={configuration.canvas} bind:value={canvas} />
 
 <div class="w-full h-full" bind:clientHeight={h} bind:clientWidth={w}>
-	<RunnableWrapper {render} {componentInput} {id} bind:initializing bind:result>
+	<RunnableWrapper {outputs} {render} {componentInput} {id} bind:initializing bind:result>
 		<div on:pointerdown bind:this={divEl} />
 	</RunnableWrapper>
 </div>

package/components/apps/components/display/table/AppAggridTable.svelte

@@ -63,7 +63,7 @@ function onCellValueChanged(event) {
 <InputValue {id} input={configuration.pagination} bind:value={pagination} />
 <InputValue {id} input={configuration.pageSize} bind:value={pageSize} />
 
-<RunnableWrapper {render} {componentInput} {id} bind:initializing bind:result>
+<RunnableWrapper {outputs} {render} {componentInput} {id} bind:initializing bind:result>
 	{#if Array.isArray(result) && result.every(isObject)}
 		<div
 			class="border border-gray-300 shadow-sm divide-y divide-gray-300  flex flex-col h-full"

package/components/apps/components/display/table/AppTable.svelte

@@ -33,7 +33,7 @@ const options = writable({
     columns: []
 });
 let table = createSvelteTable(options);
-const { app, worldStore, componentControl, selectedComponent } = getContext('AppViewerContext');
+const { app, worldStore, componentControl, selectedComponent, hoverStore, mode } = getContext('AppViewerContext');
 let selectedRowIndex = -1;
 function toggleRow(row, rowIndex, force = false) {
     if (selectedRowIndex !== rowIndex || force) {
@@ -122,7 +122,7 @@ $componentControl[id] = {
 
 <InputValue {id} input={configuration.search} bind:value={search} />
 
-<RunnableWrapper {render} {componentInput} {id} bind:initializing bind:result>
+<RunnableWrapper {outputs} {render} {componentInput} {id} bind:initializing bind:result>
 	{#if Array.isArray(result) && result.every(isObject)}
 		<div
 			class={twMerge(
@@ -223,11 +223,23 @@ $componentControl[id] = {
 										<div class="center-center h-full w-full flex-wrap gap-1 ">
 											{#each actionButtons as actionButton, actionIndex (actionIndex)}
 												<div
-													class={actionButton.id === $selectedComponent
+													on:mouseover|stopPropagation={() => {
+														if (actionButton.id !== $hoverStore) {
+															$hoverStore = actionButton.id
+														}
+													}}
+													on:mouseout|stopPropagation={() => {
+														if ($hoverStore !== undefined) {
+															$hoverStore = undefined
+														}
+													}}
+													class={(actionButton.id === $selectedComponent ||
+														$hoverStore === actionButton.id) &&
+													$mode !== 'preview'
 														? 'outline outline-indigo-500 outline-1 outline-offset-1 relative '
 														: ''}
 												>
-													{#if actionButton.id === $selectedComponent}
+													{#if actionButton.id === $selectedComponent || $hoverStore === actionButton.id}
 														<span
 															title={`Id: ${actionButton.id}`}
 															class={classNames(
@@ -240,6 +252,7 @@ $componentControl[id] = {
 													{/if}
 													{#if rowIndex == 0}
 														<AppButton
+															extraKey={'idx' + rowIndex}
 															{render}
 															noWFull
 															{...actionButton}
@@ -272,6 +285,7 @@ $componentControl[id] = {
 														/>
 													{:else}
 														<AppButton
+															extraKey={'idx' + rowIndex}
 															{render}
 															noWFull
 															{...actionButton}
@@ -297,16 +311,18 @@ $componentControl[id] = {
 				paginationEnabled={pagination}
 				{result}
 				{table}
-				class={css?.tableFooter.class}
-				style={css?.tableFooter.style}
+				class={css?.tableFooter?.class}
+				style={css?.tableFooter?.style}
 			/>
 		</div>
 	{:else if result != undefined}
-		<Alert title="Parsing issues" type="error" size="xs">
-			The result should be an array of objects. Received:
-			<pre class="overflow-auto">
-				{JSON.stringify(result)}
-			</pre>
-		</Alert>
+		<div class="flex flex-col h-full w-full overflow-auto">
+			<Alert title="Parsing issues" type="error" size="xs" class="h-full w-full ">
+				The result should be an array of objects. Received:
+				<pre class="w-full bg-white p-2 rounded-md">
+				{JSON.stringify(result, null, 4)}
+				</pre>
+			</Alert>
+		</div>
 	{/if}
 </RunnableWrapper>

package/components/apps/components/display/table/AppTable.svelte.d.ts

@@ -9,7 +9,7 @@ declare const __propDef: {
         configuration: RichConfigurations;
         actionButtons: (BaseAppComponent & ButtonComponent)[];
         initializing?: boolean | undefined;
-        customCss?: ComponentCustomCSS<'container' | 'tableHeader' | 'tableBody' | 'tableFooter'> | undefined;
+        customCss?: ComponentCustomCSS<'tablecomponent'> | undefined;
         render: boolean;
     };
     events: {

package/components/apps/components/helpers/HiddenComponent.svelte

@@ -5,10 +5,10 @@ export let id;
 export let name;
 export let inlineScript;
 export let fields;
-export let autoRefresh = false;
+export let doNotRecomputeOnInputChanged = false;
 let result = undefined;
 const { worldStore } = getContext('AppViewerContext');
-initOutput($worldStore, id, {
+let outputs = initOutput($worldStore, id, {
     result: undefined,
     loading: false
 });
@@ -18,8 +18,10 @@ initOutput($worldStore, id, {
 	render={false}
 	{id}
 	{fields}
-	{autoRefresh}
+	autoRefresh={true}
+	{doNotRecomputeOnInputChanged}
 	bind:result
+	transformer={undefined}
 	runnable={{
 		name,
 		inlineScript,
@@ -27,6 +29,7 @@ initOutput($worldStore, id, {
 	}}
 	wrapperClass="hidden"
 	recomputable
+	{outputs}
 >
 	<slot />
 </RunnableComponent>

package/components/apps/components/helpers/HiddenComponent.svelte.d.ts

@@ -7,7 +7,7 @@ declare const __propDef: {
         name: string;
         inlineScript: InlineScript | undefined;
         fields: Record<string, StaticAppInput | ConnectedAppInput | RowAppInput | UserAppInput>;
-        autoRefresh?: boolean | undefined;
+        doNotRecomputeOnInputChanged?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/apps/components/helpers/InputValue.svelte

@@ -1,6 +1,6 @@
 <script>import { isCodeInjection } from '../../../flows/utils';
 import { deepEqual } from 'fast-equals';
-import { createEventDispatcher, getContext } from 'svelte';
+import { createEventDispatcher, getContext, onDestroy } from 'svelte';
 import { accessPropertyByPath } from '../../utils';
 import { computeGlobalContext, eval_like } from './eval';
 export let input;
@@ -9,14 +9,13 @@ export let id = undefined;
 export let error = '';
 export let extraContext = {};
 export let key = '';
-$: console.log(value);
 const { componentControl } = getContext('AppViewerContext');
 const dispatch = createEventDispatcher();
 if (input == undefined) {
     dispatch('done');
 }
 let lastInput = input ? JSON.parse(JSON.stringify(input)) : undefined;
-$: console.log(input);
+onDestroy(() => (lastInput = undefined));
 $: if (input && !deepEqual(input, lastInput)) {
     lastInput = JSON.parse(JSON.stringify(input));
     // Needed because of file uploads
@@ -49,17 +48,16 @@ $: lastInput &&
     $state &&
     debounce(async () => (value = await evalExpr(lastInput)));
 async function handleConnection() {
-    console.log('handleConnection', lastInput);
-    if (lastInput.type === 'connected') {
+    if (lastInput?.type === 'connected') {
         $worldStore?.connect(lastInput, onValueChange, `${id}-${key}`);
     }
-    else if (lastInput.type === 'static' || lastInput.type == 'template') {
+    else if (lastInput?.type === 'static' || lastInput?.type == 'template') {
         value = await getValue(lastInput);
     }
-    else if (lastInput.type == 'eval') {
+    else if (lastInput?.type == 'eval') {
         value = await evalExpr(lastInput);
     }
-    else if (lastInput.type == 'upload') {
+    else if (lastInput?.type == 'upload') {
         value = lastInput.value;
     }
     else {
@@ -79,6 +77,8 @@ async function evalExpr(input) {
     }
 }
 async function getValue(input) {
+    if (!input)
+        return;
     if (input.type === 'template' && isCodeInjection(input.eval)) {
         try {
             const r = await eval_like('`' + input.eval + '`', computeGlobalContext($worldStore, id, extraContext), true, $state, $mode == 'dnd', $componentControl, $worldStore);
@@ -97,7 +97,7 @@ async function getValue(input) {
     }
 }
 function onValueChange(newValue) {
-    if (lastInput.type === 'connected' && newValue !== undefined && newValue !== null) {
+    if (lastInput?.type === 'connected' && newValue !== undefined && newValue !== null) {
         const { connection } = lastInput;
         if (!connection) {
             // No connection

package/components/apps/components/helpers/Loader.svelte

@@ -0,0 +1,18 @@
+<script>import { Loader2 } from 'lucide-svelte';
+import { fade } from 'svelte/transition';
+export let loading;
+</script>
+
+{#if !loading}
+	<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}

package/components/apps/components/helpers/Loader.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        loading: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type LoaderProps = typeof __propDef.props;
+export type LoaderEvents = typeof __propDef.events;
+export type LoaderSlots = typeof __propDef.slots;
+export default class Loader extends SvelteComponentTyped<LoaderProps, LoaderEvents, LoaderSlots> {
+}
+export {};