diff --git a/packages/app/src/lib/components/AvatarGroup.houdini.svelte b/packages/app/src/lib/components/AvatarGroup.houdini.svelte
index 9469a0f7a..0961690d6 100644
--- a/packages/app/src/lib/components/AvatarGroup.houdini.svelte
+++ b/packages/app/src/lib/components/AvatarGroup.houdini.svelte
@@ -2,7 +2,7 @@
import { fragment, graphql, PendingValue, type AvatarGroup } from '$houdini';
import Avatar from '$lib/components/Avatar.svelte';
import LoadingText from '$lib/components/LoadingText.svelte';
- import { loading, mapLoading, type MaybeLoading } from '$lib/loading';
+ import { Loading, loading, mapLoading, type MaybeLoading } from '$lib/loading';
import { refroute } from '$lib/navigation';
import { isDark } from '$lib/theme';
@@ -34,7 +34,7 @@
{...$$restProps}
{src}
href=""
- alt={mapLoading($data?.name ?? PendingValue, (n) => `Logo de ${n}`)}
+ alt={new Loading($data?.name).then(name => `Logo de ${name}`)}
help={$data?.name}
/>
diff --git a/packages/app/src/lib/components/BookingBeneficiary.svelte b/packages/app/src/lib/components/BookingBeneficiary.svelte
index c32bd911c..ed2b96094 100644
--- a/packages/app/src/lib/components/BookingBeneficiary.svelte
+++ b/packages/app/src/lib/components/BookingBeneficiary.svelte
@@ -1,14 +1,14 @@
- {#if $data && loaded($data.paymentMethod)}
-
-
{DISPLAY_PAYMENT_METHODS[$data.paymentMethod]}
+ {#if $data?.loaded()}
+
+
{DISPLAY_PAYMENT_METHODS[$data.v.paymentMethod]}
{:else}
{/if}
diff --git a/packages/app/src/lib/components/BookingStatus.svelte b/packages/app/src/lib/components/BookingStatus.svelte
index ddd647640..99c66e99d 100644
--- a/packages/app/src/lib/components/BookingStatus.svelte
+++ b/packages/app/src/lib/components/BookingStatus.svelte
@@ -1,6 +1,7 @@
- {#if !allLoaded($data) || !$data}
+ {#if !$data?.loaded()}
..
- {:else if $data.opposed}
+ {:else if $data.v.opposed}
- {:else if $data.verified}
+ {:else if $data.v.verified}
- {:else if $data.cancelled}
+ {:else if $data.v.cancelled}
- {:else if $data.paid}
+ {:else if $data.v.paid}
{:else}
{/if}
-
{
- if (opposed) return 'En opposition';
- if (verified) return 'Scannée';
- if (cancelled) return 'Annulée';
- if (paid) return 'Payée';
- return 'En attente de paiement';
- },
- )
- : PendingValue}
+ {
+ if (opposed) return 'En opposition';
+ if (verified) return 'Scannée';
+ if (cancelled) return 'Annulée';
+ if (paid) return 'Payée';
+ return 'En attente de paiement';
+ })}
/>
diff --git a/packages/app/src/lib/components/LoadingTextNew.svelte b/packages/app/src/lib/components/LoadingTextNew.svelte
new file mode 100644
index 000000000..dbe2238af
--- /dev/null
+++ b/packages/app/src/lib/components/LoadingTextNew.svelte
@@ -0,0 +1,65 @@
+
+
+
+{#if unwrapped === undefined || unwrapped === null}
+
+ {#each loadingTextLines() as line}
+ {line}
+
+ {/each}
+
+
+{:else}
+
+ {unwrapped}
+
+{/if}
+
+
diff --git a/packages/app/src/lib/loading.ts b/packages/app/src/lib/loading.ts
index 8b5f52708..479b86634 100644
--- a/packages/app/src/lib/loading.ts
+++ b/packages/app/src/lib/loading.ts
@@ -1,5 +1,6 @@
import { dev } from '$app/environment';
-import { PendingValue } from '$houdini';
+import { fragment, FragmentStore, PendingValue, type Fragment } from '$houdini';
+import { derived, type Readable } from 'svelte/store';
export { default as LoadingChurros } from '$lib/components/LoadingChurros.svelte';
export { default as LoadingSpinner } from '$lib/components/LoadingSpinner.svelte';
@@ -30,13 +31,16 @@ export function loading
(value: MaybeLoading, fallback: T): T {
return value === PendingValue || value === null || value === undefined ? fallback : value;
}
-export type AllLoaded = T extends object
- ? { [K in keyof T]: AllLoaded }
- : T extends unknown[]
- ? AllLoaded[]
- : T extends typeof PendingValue
- ? never
- : T;
+export type AllLoaded =
+ T extends Loading
+ ? U
+ : T extends object
+ ? { [K in keyof T]: AllLoaded }
+ : T extends unknown[]
+ ? AllLoaded[]
+ : T extends typeof PendingValue
+ ? never
+ : T;
export type DeepMaybeLoading = T extends object
? { [K in keyof T]: DeepMaybeLoading }
@@ -73,7 +77,7 @@ export function allLoaded(value: T): value is AllLoaded {
else if (typeof value === 'object' && value !== null)
return Object.values(value).every((item) => allLoaded(item));
- return loaded(value);
+ return value instanceof Loading ? value.loaded() : loaded(value);
}
export function mapLoading(
@@ -106,3 +110,52 @@ accusantium enim et repudiandae omnis cum dolorem nemo id quia facilis.
Et dolorem perferendis et rerum suscipit qui voluptatibus quia et nihil nostrum 33 omnis soluta.
Nam minus minima et perspiciatis velit et eveniet rerum et nihil voluptates aut eaque ipsa et
ratione facere!`;
+
+export function loadingFragment<
+ Store extends FragmentStore,
+ Data = Store extends FragmentStore ? D : any,
+>(fragmentRef: Fragment | null, store: Store): Readable> {
+ return derived([fragment(fragmentRef, store)], ([$store]) =>
+ $store ? new Loading($store) : null,
+ );
+}
+
+export class Loading {
+ v: typeof PendingValue | AllLoaded;
+
+ constructor(value?: T) {
+ if (value instanceof Loading) this.v = value.v;
+ if (value !== undefined && allLoaded(value)) this.v = value;
+ this.v = PendingValue;
+ }
+
+ static collect(values: Array>): Loading {
+ if (values.some((v) => !v.loaded())) return new Loading([PendingValue] as Value[]);
+ return new Loading(values as Value[]);
+ }
+
+ loading(): this is { v: typeof PendingValue } {
+ return !this.loaded();
+ }
+
+ loaded(): this is { v: AllLoaded } {
+ if (simulatingLoadingState()) return false;
+ return this.v !== PendingValue;
+ }
+
+ map(mapper: (value: AllLoaded) => O): Loading {
+ return new Loading(this.loaded() ? mapper(this.v) : PendingValue);
+ }
+
+ unwrap(fallback: Fallback): T | Fallback;
+ unwrap(): T | undefined;
+ unwrap(fallback?: Fallback) {
+ return this.loaded() ? this.v : fallback;
+ }
+
+ then(mapper: (value: AllLoaded) => Out, fallback: Fallback): T | Fallback;
+ then(mapper: (value: AllLoaded) => Out): T | undefined;
+ then(mapper: (value: AllLoaded) => Out, fallback?: Fallback) {
+ return this.map(mapper).unwrap(fallback);
+ }
+}