use skeleton for loading in apps

frontend/src/lib/components/SettingSection.svelte

@@ -41,7 +41,7 @@
 	{/if}
 </div>
 {#if showContent}
-	<div transition:slide={{ duration: 300 }}>
+	<div transition:slide|local={{ duration: 300 }}>
 		<slot />
 	</div>
 {/if}

frontend/src/lib/components/apps/components/inputs/AppRangeInput.svelte

@@ -15,6 +15,7 @@
 	export let verticalAlignment: 'top' | 'center' | 'bottom' | undefined = undefined
 	export let customCss: ComponentCustomCSS<'rangecomponent'> | undefined = undefined
 	export let render: boolean
+	export let initializing: boolean = true
 
 	const { app, worldStore } = getContext<AppViewerContext>('AppViewerContext')
 	let min = 0
@@ -48,7 +49,12 @@
 <InputValue {id} input={configuration.min} bind:value={min} />
 <InputValue {id} input={configuration.max} bind:value={max} />
 <InputValue {id} input={configuration.defaultLow} bind:value={values[0]} />
-<InputValue {id} input={configuration.defaultHigh} bind:value={values[1]} />
+<InputValue
+	on:done={() => (initializing = false)}
+	{id}
+	input={configuration.defaultHigh}
+	bind:value={values[1]}
+/>
 
 <AlignWrapper {render} {verticalAlignment}>
 	<div class="flex flex-col w-full">

frontend/src/lib/components/apps/components/inputs/AppSliderInputs.svelte

@@ -1,8 +1,6 @@
 <script lang="ts">
 	import RangeSlider from 'svelte-range-slider-pips'
 	import { getContext } from 'svelte'
-	import type { AppInput } from '../../inputType'
-	import type { Output } from '../../rx'
 	import type { AppViewerContext, ComponentCustomCSS, RichConfigurations } from '../../types'
 	import AlignWrapper from '../helpers/AlignWrapper.svelte'
 	import InputValue from '../helpers/InputValue.svelte'
@@ -15,6 +13,7 @@
 	export let verticalAlignment: 'top' | 'center' | 'bottom' | undefined = undefined
 	export let customCss: ComponentCustomCSS<'slidercomponent'> | undefined = undefined
 	export let render: boolean
+	export let initializing: boolean = true
 
 	const { app, worldStore, selectedComponent } = getContext<AppViewerContext>('AppViewerContext')
 	let min = 0
@@ -54,7 +53,12 @@
 <InputValue {id} input={configuration.step} bind:value={step} />
 <InputValue {id} input={configuration.min} bind:value={min} />
 <InputValue {id} input={configuration.max} bind:value={max} />
-<InputValue {id} input={configuration.defaultValue} bind:value={values[0]} />
+<InputValue
+	on:done={() => (initializing = false)}
+	{id}
+	input={configuration.defaultValue}
+	bind:value={values[0]}
+/>
 
 <AlignWrapper {render} {verticalAlignment}>
 	<div class="flex items-center w-full gap-1 px-1">

frontend/src/lib/components/apps/editor/component/Component.svelte

@@ -325,6 +325,7 @@
 				configuration={component.configuration}
 				id={component.id}
 				customCss={component.customCss}
+				bind:initializing
 				{render}
 			/>
 		{:else if component.type === 'horizontaldividercomponent'}
@@ -354,6 +355,7 @@
 				id={component.id}
 				customCss={component.customCss}
 				{render}
+				bind:initializing
 			/>
 		{:else if component.type === 'tabscomponent' && component.tabs}
 			<AppTabs
@@ -439,8 +441,5 @@
 	</div>
 </div>
 {#if initializing}
-	<div 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 class="absolute inset-0 center-center flex-col bg- border animate-skeleton" />
 {/if}

frontend/src/lib/components/common/skeleton/Skeleton.svelte

@@ -11,7 +11,7 @@
 {#if loading}
 	<div class="relative flex justify-center">
 		<div
-			in:fade={{ duration: 1000 }}
+			in:fade|local={{ duration: 1000 }}
 			class="flex grow flex-col overflow-hidden {overlay
 				? 'absolute w-full h-full z-[1000]'
 				: ''} {$$props.class}"