ui/loadable.svelte.ts view source
Base reactive state class with loading/error management.
Provides the common loading/error pattern shared by all state classes.
Subclasses add domain-specific $state fields and methods that call
the protected run helper for async operations.
generics
TError
stringexamples
class ItemsState extends Loadable {
items: Array<Item> = $state([]);
async fetch(): Promise<void> {
await this.run(async () => {
const response = await fetch('/api/items');
if (!response.ok) throw new Error('failed to fetch');
this.items = await response.json();
});
}
}// structured errors via map_error
class FormState extends Loadable<{field: string; message: string}> {
async submit(data: FormData): Promise<void> {
await this.run(
() => post_form(data),
(e) => ({field: 'form', message: e instanceof Error ? e.message : 'unknown'}),
);
}
}loading
error
type TError | null
error_data
The raw caught value from the last failed run(), for programmatic inspection.
type unknown
run
Run an async operation with loading/error handling.
Sets loading to true, clears error and error_data, runs fn, catches errors.
Pass map_error to produce structured errors instead of strings.
type <T>(fn: () => Promise<T>, map_error?: ((e: unknown) => TError) | undefined): Promise<T | undefined>
fn
() => Promise<T>map_error?
((e: unknown) => TError) | undefinedPromise<T | undefined>the result or undefined if the operation failed
reset
Reset loading and error state. Subclasses override to clear data.
type (): void
void