Finalize making providers asynchronous

Orbitale · Oct 18, 2023 · 3a28bea · 3a28bea
1 parent 093c073
commit 3a28bea
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 38 deletions.
diff --git a/src/lib/admin/Crud/CrudEdit.svelte b/src/lib/admin/Crud/CrudEdit.svelte
@@ -17,18 +17,16 @@
 	export let operation: CrudOperation<object>;
 	export let requestParameters: KeyValueObject = {};
 
-	let defaultData: undefined | null | Record<string, unknown> = crud.options.stateProvider.provide(
+	let defaultData: Promise<undefined | null | Record<string, unknown>> = crud.options.stateProvider.provide(
 		operation,
 		requestParameters
 	);
 
-	let mounted = false;
-
-	onMount(() => {
-		if (!defaultData) {
+	onMount(async () => {
+		const data = await defaultData;
+		if (!data) {
 			defaultData = crud.options.stateProvider.provide(operation, requestParameters);
 		}
-		mounted = true;
 	});
 
 	function onSubmitData(event: CustomEvent<Record<string, unknown>>) {
@@ -38,32 +36,32 @@
 	}
 </script>
 
-{#if !defaultData}
-	{#if mounted}
+{#await defaultData}
+	<FormGroup><TextInputSkeleton /></FormGroup>
+	<FormGroup><CheckboxSkeleton /></FormGroup>
+	<FormGroup><TextAreaSkeleton /></FormGroup>
+	<FormGroup><ButtonSkeleton /></FormGroup>
+{:then}
+	{#if !defaultData}
 		<InlineNotification kind="error">
 			{$_('error.crud.entity.not_found')}
 		</InlineNotification>
 	{:else}
-		<FormGroup><TextInputSkeleton /></FormGroup>
-		<FormGroup><CheckboxSkeleton /></FormGroup>
-		<FormGroup><TextAreaSkeleton /></FormGroup>
-		<FormGroup><ButtonSkeleton /></FormGroup>
+		<CrudForm
+				{operation}
+				{defaultData}
+				on:click
+				on:keydown
+				on:mouseover
+				on:mouseenter
+				on:mouseleave
+				on:submit
+				on:submitData
+				on:submitData={onSubmitData}
+		>
+			<svelte:fragment slot="form-header">
+				<h2>{$_(operation.label, { values: { name: $_(crud.options.label.singular) } })}</h2>
+			</svelte:fragment>
+		</CrudForm>
 	{/if}
-{:else}
-	<CrudForm
-		{operation}
-		{defaultData}
-		on:click
-		on:keydown
-		on:mouseover
-		on:mouseenter
-		on:mouseleave
-		on:submit
-		on:submitData
-		on:submitData={onSubmitData}
-	>
-		<svelte:fragment slot="form-header">
-			<h2>{$_(operation.label, { values: { name: $_(crud.options.label.singular) } })}</h2>
-		</svelte:fragment>
-	</CrudForm>
-{/if}
+{/await}
diff --git a/src/lib/admin/Crud/CrudList.svelte b/src/lib/admin/Crud/CrudList.svelte
@@ -16,6 +16,7 @@
 	import DataTable from '$lib/admin/DataTable/DataTable.svelte';
 
 	import { _ } from 'svelte-i18n';
+	import {onMount} from "svelte";
 
 	export let crud: CrudDefinition<unknown>;
 	export let operation: CrudOperation<unknown>;
@@ -30,20 +31,30 @@
 		throw new Error(`No StateProvider was given to the "${crud.name}" CRUD.`);
 	}
 
-	const rows: Promise<unknown> = crud.options.stateProvider.provide(operation, requestParameters)
-		.then((r: unknown) => {
-			console.info(r);
-			if (r && !Array.isArray(r)) {
+	function getResults() {
+		return crud.options.stateProvider.provide(operation, requestParameters).then((results) => {
+			console.info(results);
+			if (results && !Array.isArray(results)) {
 				throw new Error(
-					'CrudList expected state provider to return an array, current result is non-empty and not an array.'
+						'CrudList expected state provider to return an array, current result is non-empty and not an array.'
 				);
 			}
-			if (!r || !r?.length) {
-				r = [createEmptyRow(operation)];
+			if (!results || !results?.length) {
+				results = [createEmptyRow(operation)];
 			}
 
-			return r;
+			return results;
 		});
+	}
+
+	let rows: Promise<unknown> = getResults();
+
+	onMount(async () => {
+		const data = await rows;
+		if (!data) {
+			rows = getResults();
+		}
+	});
 
 	let globalActions: Array<Action> = [];
 	if (operation instanceof List<unknown> || operation.options?.globalActions?.length) {