From 652d3c3889b3221cf327cff0e33e95db40e4667f Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Tue, 21 Mar 2023 02:11:34 +0100
Subject: [PATCH] fix initialization for app with forms

---
 .../components/apps/components/buttons/AppForm.svelte |  9 +++++----
 .../apps/components/buttons/AppFormButton.svelte      | 11 +++++------
 .../inputs/currency/AppCurrencyInput.svelte           |  8 ++------
 .../src/lib/components/apps/editor/AppPreview.svelte  | 10 ++++++++--
 4 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/frontend/src/lib/components/apps/components/buttons/AppForm.svelte b/frontend/src/lib/components/apps/components/buttons/AppForm.svelte
index 0e7f0d347a..dc45d809e9 100644
--- a/frontend/src/lib/components/apps/components/buttons/AppForm.svelte
+++ b/frontend/src/lib/components/apps/components/buttons/AppForm.svelte
@@ -3,6 +3,7 @@
 	import { faUser } from '@fortawesome/free-solid-svg-icons'
 	import { getContext } from 'svelte'
 	import { Icon } from 'svelte-awesome'
+	import { initOutput } from '../../editor/appUtils'
 	import type { AppInput } from '../../inputType'
 	import type { Output } from '../../rx'
 	import type { AppViewerContext, ComponentCustomCSS, RichConfigurations } from '../../types'
@@ -25,10 +26,10 @@
 
 	const { app, worldStore, stateId } = getContext<AppViewerContext>('AppViewerContext')
 
-	$: outputs = $worldStore?.outputsById[id] as {
-		result: Output<Array<any>>
-		loading: Output<boolean>
-	}
+	let outputs = initOutput($worldStore, id, {
+		result: undefined,
+		loading: false
+	})
 
 	let labelValue: string = ''
 	let color: ButtonType.Color
diff --git a/frontend/src/lib/components/apps/components/buttons/AppFormButton.svelte b/frontend/src/lib/components/apps/components/buttons/AppFormButton.svelte
index 455c733f1b..94ca3b97ca 100644
--- a/frontend/src/lib/components/apps/components/buttons/AppFormButton.svelte
+++ b/frontend/src/lib/components/apps/components/buttons/AppFormButton.svelte
@@ -13,6 +13,7 @@
 	import Portal from 'svelte-portal'
 	import Modal from '$lib/components/common/modal/Modal.svelte'
 	import { concatCustomCss } from '../../utils'
+	import { initOutput } from '../../editor/appUtils'
 
 	export let id: string
 	export let componentInput: AppInput | undefined
@@ -24,14 +25,12 @@
 	export let customCss: ComponentCustomCSS<'formbuttoncomponent'> | undefined = undefined
 	export let render: boolean
 
-	export const staticOutputs: string[] = ['loading', 'result']
-
 	const { app, worldStore } = getContext<AppViewerContext>('AppViewerContext')
 
-	$: outputs = $worldStore?.outputsById[id] as {
-		result: Output<Array<any>>
-		loading: Output<boolean>
-	}
+	let outputs = initOutput($worldStore, id, {
+		result: undefined,
+		loading: false
+	})
 
 	let labelValue: string = ''
 	let color: ButtonType.Color
diff --git a/frontend/src/lib/components/apps/components/inputs/currency/AppCurrencyInput.svelte b/frontend/src/lib/components/apps/components/inputs/currency/AppCurrencyInput.svelte
index 87343d677b..430dc6337b 100644
--- a/frontend/src/lib/components/apps/components/inputs/currency/AppCurrencyInput.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/currency/AppCurrencyInput.svelte
@@ -18,8 +18,8 @@
 
 	const { app, worldStore, selectedComponent } = getContext<AppViewerContext>('AppViewerContext')
 
-	initOutput($worldStore, id, {
-		result: undefined
+	const outputs = initOutput($worldStore, id, {
+		result: null as number | null
 	})
 
 	let defaultValue: number | undefined = undefined
@@ -29,10 +29,6 @@
 	let locale: string | undefined = undefined
 	let value: number | undefined = undefined
 
-	$: outputs = $worldStore?.outputsById[id] as {
-		result: Output<number | null>
-	}
-
 	function handleInput() {
 		outputs?.result.set(value ?? null)
 	}
diff --git a/frontend/src/lib/components/apps/editor/AppPreview.svelte b/frontend/src/lib/components/apps/editor/AppPreview.svelte
index b36e01eea6..5f62a03f3f 100644
--- a/frontend/src/lib/components/apps/editor/AppPreview.svelte
+++ b/frontend/src/lib/components/apps/editor/AppPreview.svelte
@@ -91,8 +91,14 @@
 		class="{$$props.class} {lockedClasses} h-full 
 	w-full {app.fullscreen ? '' : 'max-w-6xl'} mx-auto"
 	>
-		{#if $appStore.grid && !$appStore.norefreshbar}
-			<div class={classNames('mx-auto', width)}>
+		{#if $appStore.grid}
+			<div
+				class={classNames(
+					'mx-auto',
+					width,
+					$appStore?.norefreshbar ? 'invisible h-0 overflow-hidden' : ''
+				)}
+			>
 				<div
 					class="w-full sticky top-0 flex justify-between border-b bg-gray-50 px-4 py-1 items-center gap-4"
 					style="z-index: 1000;"