pass loading state to ui

Author: garethbowen

packages/web-forms/src/components/form-elements/upload/UploadControl.vue

@@ -36,6 +36,8 @@ const fileName = computed(() => props.question.currentState.value?.name ?? '');
 const accept = computed(() => props.question.nodeOptions.media.accept);
 const mediaType = computed(() => props.question.nodeOptions.media.type);
 const maxFileSize = computed(() => formOptions?.attachmentMaxSize ?? MAX_FILE_SIZE);
+const loading = computed(() => props.question.currentState.attachmentState.loading);
+const existingFileName = computed(() => props.question.currentState.attachmentState.intrinsicName ?? '');
 const confirmDeleteAction = ref(false);
 const fileError = ref<string | null>(null);
 
@@ -168,7 +170,10 @@ const onDrop = (event: DragEvent) => {
 		</template>
 		<template #default>
 			<div class="drag-and-drop" :class="{ 'disabled': isDisabled }" @drop.prevent.stop="onDrop" @dragover.prevent>
-				<div v-if="question.currentState.value" class="upload-content">
+				<div v-if="loading" class="skeleton-loading">
+					{{ existingFileName }}
+				</div>
+				<div v-else-if="question.currentState.value" class="upload-content">
 					<template v-if="fileType === 'image'">
 						<UploadImagePreview :image="objectURL" />
 					</template>
@@ -260,6 +265,14 @@ const onDrop = (event: DragEvent) => {
 .drag-and-drop {
 	padding: var(--odk-spacing-xxl);
 
+	.skeleton-loading {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		width: 300px;
+		height: 100px;
+	}
+
 	&.disabled {
 		color: var(--odk-muted-text-color);
 	}

packages/xforms-engine/src/client/UploadNode.ts

@@ -1,4 +1,5 @@
 import type { PartiallyKnownString } from '@getodk/common/types/string/PartiallyKnownString.ts';
+import type { BaseInstanceAttachmentState } from '../lib/reactivity/createInstanceAttachment.ts';
 import type { UnknownAppearanceDefinition } from '../parse/body/appearance/unknownAppearanceParser.ts';
 import type { UploadControlDefinition } from '../parse/body/control/UploadControlDefinition.ts';
 import type { LeafNodeDefinition } from '../parse/model/LeafNodeDefinition.ts';
@@ -15,6 +16,7 @@ export interface UploadNodeState extends BaseValueNodeState<UploadValue> {
 	get valueOptions(): null;
 	get value(): UploadValue;
 	get instanceValue(): InstanceAttachmentFileName;
+	get attachmentState(): BaseInstanceAttachmentState;
 }
 
 export interface UploadDefinition<V extends ValueType = ValueType> extends LeafNodeDefinition<V> {

packages/xforms-engine/src/instance/UploadControl.ts

@@ -13,7 +13,10 @@ import {
 	createAttributeState,
 	type AttributeState,
 } from '../lib/reactivity/createAttributeState.ts';
-import { createInstanceAttachment } from '../lib/reactivity/createInstanceAttachment.ts';
+import {
+	createInstanceAttachment,
+	type BaseInstanceAttachmentState,
+} from '../lib/reactivity/createInstanceAttachment.ts';
 import type { CurrentState } from '../lib/reactivity/node-state/createCurrentState.ts';
 import type { EngineState } from '../lib/reactivity/node-state/createEngineState.ts';
 import type { SharedNodeState } from '../lib/reactivity/node-state/createSharedNodeState.ts';
@@ -66,7 +69,8 @@ interface UploadControlStateSpec extends DescendantNodeStateSpec<InstanceAttachm
 	readonly attributes: Accessor<readonly Attribute[]>;
 	readonly valueOptions: null;
 	readonly value: SimpleAtomicState<InstanceAttachmentRuntimeValue>;
-	readonly instanceValue: Accessor<InstanceAttachmentFileName>;
+	readonly instanceValue: Accessor<InstanceAttachmentFileName>; // TODO merge this with state below?
+	readonly attachmentState: Accessor<BaseInstanceAttachmentState>;
 }
 
 export class UploadControl
@@ -143,6 +147,7 @@ export class UploadControl
 		const instanceAttachment = createInstanceAttachment(this);
 
 		this.instanceAttachment = instanceAttachment;
+
 		this.attributeState = createAttributeState(this.scope);
 		this.decodeInstanceValue = instanceAttachment.decodeInstanceValue;
 		this.getXPathValue = instanceAttachment.getInstanceValue;
@@ -162,6 +167,7 @@ export class UploadControl
 				value: instanceAttachment.valueState,
 				attributes: this.attributeState.getAttributes,
 				instanceValue: instanceAttachment.getInstanceValue,
+				attachmentState: instanceAttachment.getState,
 			},
 			this.instanceConfig
 		);

packages/xforms-engine/src/instance/attachments/InstanceAttachment.ts

@@ -1,5 +1,6 @@
 import type { Accessor } from 'solid-js';
 import type { InstancePayload } from '../../client/index.ts';
+import type { BaseInstanceAttachmentState } from '../../lib/reactivity/createInstanceAttachment.ts';
 import type { SimpleAtomicState, SimpleAtomicStateSetter } from '../../lib/reactivity/types.ts';
 import type { InstanceAttachmentContext } from '../internal-api/InstanceAttachmentContext.ts';
 import type { DecodeInstanceValue } from '../internal-api/InstanceValueContext.ts';
@@ -16,6 +17,8 @@ export interface InstanceAttachmentOptions {
 	readonly getValue: Accessor<InstanceAttachmentRuntimeValue>;
 	readonly setValue: SimpleAtomicStateSetter<InstanceAttachmentRuntimeValue>;
 	readonly valueState: SimpleAtomicState<InstanceAttachmentRuntimeValue>;
+
+	readonly getState: Accessor<BaseInstanceAttachmentState>;
 }
 
 export class InstanceAttachment {
@@ -58,12 +61,15 @@ export class InstanceAttachment {
 	readonly setValue: SimpleAtomicStateSetter<InstanceAttachmentRuntimeValue>;
 	readonly valueState: SimpleAtomicState<InstanceAttachmentRuntimeValue>;
 
+	readonly getState: Accessor<BaseInstanceAttachmentState>;
+
 	private constructor(options: InstanceAttachmentOptions) {
 		this.getFileName = options.getFileName;
 		this.getInstanceValue = options.getInstanceValue;
 		this.decodeInstanceValue = options.decodeInstanceValue;
 		this.getValue = options.getValue;
 		this.setValue = options.setValue;
 		this.valueState = options.valueState;
+		this.getState = options.getState;
 	}
 }

packages/xforms-engine/src/lib/client-reactivity/instance-state/prepareInstancePayload.ts

@@ -15,6 +15,9 @@ import { ErrorProductionDesignPendingError } from '../../../error/ErrorProductio
 import type { InstanceAttachmentsState } from '../../../instance/attachments/InstanceAttachmentsState.ts';
 import type { ClientReactiveSerializableInstance } from '../../../instance/internal-api/serialization/ClientReactiveSerializableInstance.ts';
 
+// TODO only collect files that have changed (based on filename) otherwise we're uploading files unnecessarily
+// TODO make sure this ^ works when async files haven't yet loaded or loading has failed
+// TODO this will also impact validation - required files that have not yet loaded are valid!
 const collectInstanceAttachmentFiles = (attachments: InstanceAttachmentsState): readonly File[] => {
 	const files = Array.from(attachments.entries()).map(([context, attachment]) => {
 		if (!context.isAttached() || !context.isRelevant()) {

packages/xforms-engine/src/lib/reactivity/createInstanceAttachment.ts

@@ -64,17 +64,20 @@ interface InstanceAttachmentValueOptions {
 	readonly nodeId: FormNodeID;
 	readonly writtenAt: Date | null;
 	readonly file: InstanceAttachmentRuntimeValue;
+	readonly loading: boolean;
+	readonly existingName?: string | null;
 }
 
-interface BaseInstanceAttachmentState {
+export interface BaseInstanceAttachmentState {
 	readonly computedName: string | null;
 	readonly intrinsicName: string | null;
 	readonly file: InstanceAttachmentRuntimeValue;
+	readonly loading: boolean;
 }
 
 interface BlankInstanceAttachmentState extends BaseInstanceAttachmentState {
 	readonly computedName: null;
-	readonly intrinsicName: null;
+	readonly intrinsicName: string | null;
 	readonly file: null;
 }
 
@@ -93,25 +96,26 @@ const instanceAttachmentState = (
 	context: InstanceAttachmentContext,
 	options: InstanceAttachmentValueOptions
 ): InstanceAttachmentState => {
-	const { nodeId, file, writtenAt } = options;
+	const { nodeId, file, writtenAt, loading, existingName } = options;
 
 	// No file -> no intrinsic name, no name to compute
 	if (file == null) {
 		return {
 			computedName: null,
-			intrinsicName: null,
+			intrinsicName: existingName ?? null,
 			file: null,
+			loading,
 		};
 	}
 
-	const intrinsicName = file.name;
-
 	// File exists, not written by client -> preserve instance input name
+	const intrinsicName = file.name;
 	if (writtenAt == null) {
 		return {
 			computedName: null,
 			intrinsicName,
 			file,
+			loading,
 		};
 	}
 
@@ -128,6 +132,7 @@ const instanceAttachmentState = (
 		computedName,
 		intrinsicName,
 		file,
+		loading,
 	};
 };
 
@@ -139,23 +144,32 @@ export const createInstanceAttachment = (
 		const { attachments } = rootDocument;
 
 		const filePromise = attachments.getInitialFileValue(context.instanceNode);
+		const existingName = context.instanceNode?.value ?? null;
 		const initialState = instanceAttachmentState(context, {
 			nodeId,
-			file: null, // TODO add a loading concept to distinguish from empty value
+			file: null,
 			writtenAt: null,
+			loading: !!filePromise,
+			existingName,
 		});
 
 		const [getState, setState] = createSignal<InstanceAttachmentState>(initialState);
 
 		if (filePromise) {
-			void Promise.resolve(filePromise).then((file: File) => {
-				const resolvedState = instanceAttachmentState(context, {
-					nodeId,
-					file,
-					writtenAt: null,
+			void Promise.resolve(filePromise)
+				.then((file: File) => {
+					const resolvedState = instanceAttachmentState(context, {
+						nodeId,
+						file,
+						writtenAt: null,
+						loading: false,
+						existingName,
+					});
+					setState(resolvedState);
+				})
+				.catch((_) => {
+					// TODO set error state
 				});
-				setState(resolvedState);
-			});
 		}
 
 		const decodeInstanceValue: DecodeInstanceValue = (value) => {
@@ -198,6 +212,7 @@ export const createInstanceAttachment = (
 				nodeId,
 				file: value,
 				writtenAt: new Date(),
+				loading: false,
 			});
 
 			return setState(updatedState).file;
@@ -219,6 +234,8 @@ export const createInstanceAttachment = (
 			getValue,
 			setValue,
 			valueState,
+
+			getState,
 		});
 	});
 };