LoadFactory type

Load factory type - creates async boundaries with fetcher/renderer pattern

The renderer receives a state object with reactive properties: - status: Reactive<‘pending’ | ‘ready’ | ‘error’> - data: Reactive<T | undefined> - error: Reactive<unknown | undefined>

User controls how to render based on state - typically using match() on state.status.

Signature:

export type LoadFactory = <T, TElement>(fetcher: () => Promise<T>, renderer: (state: LoadState<T>) => RefSpec<TElement>) => RefSpec<TElement>;

References: LoadState, RefSpec

Example

load(
  () => fetch('/api/data').then(r => r.json()),
  (state) => match(state.status, (status) => {
    switch (status) {
      case 'pending': return el('div')('Loading...');
      case 'error': return el('div')(`Error: ${state.error()}`);
      case 'ready': return DataView(state.data()!);
    }
  })
)