Loading on Demand

// What one call receives
interface LoadContext {
  range: DateRange;      // a stretch not loaded yet; may be smaller than the screen
  timeZone: TimeZoneId;  // the scheduler's zone, for a server that wants it
  signal: AbortSignal;   // aborted when the range changes before this load settles
}

// A week is loaded. The reader switches to the month view: two calls go out,
// one for the days before the week and one for the days after it. The week
// itself is not asked for again.

// Return everything that overlaps the range, in any of the date forms the
// scheduler reads. Events entirely outside are dropped.

-- "Overlaps [from, to)": starts before the range ends and ends after it starts.
-- Both ends exclusive on the right, which is how the scheduler thinks too.
SELECT * FROM events
WHERE starts_at < :to
  AND ends_at   > :from
ORDER BY starts_at;

const source: EventSourceFn = async ({ range, signal }) => {
  // Pass the signal on. A reader who clicks Next three times quickly makes three
  // loads; the first two are aborted and their fetches cancelled, and an abort
  // never reaches onLoadError.
  const response = await fetch(url(range), { signal });
  return response.json();
};

<Scheduler
  {source}
  onLoadError={(error) => {
    // The range that failed is not marked as loaded, so coming back to it asks again.
    toast.error('Could not load events', { description: String(error) });
  }}
/>

<script lang="ts">
  let version = $state(0);

  // The loader belongs to the source function. A new function is a new loader
  // with an empty cache, so the visible range is fetched again. The derived
  // reads version and returns a fresh function; the read has to be outside
  // the async body, since the body runs later, when the scheduler calls it.
  const source = $derived.by<EventSourceFn>(() => {
    void version;
    return async ({ range, signal }) => load(range, signal);
  });
</script>

<Scheduler {source} />
<Button label="Reload" onclick={() => (version += 1)} />

<script lang="ts">
  let team = $state('all');

  // Filters the server applies travel the same way: read them in the derived
  // so a change makes a new source, which fetches again.
  const source = $derived.by<EventSourceFn>(() => {
    const selected = team;
    return async ({ range, signal }) => {
      const params = new URLSearchParams({ from: iso(range.start), to: iso(range.end), team: selected });
      return (await fetch(`/api/events?${params}`, { signal })).json();
    };
  });
</script>

<Select items={teams} bind:value={team} />
<Scheduler {source} />

<!-- Saving works the same with a source. A confirmed change also updates the
     cache, so going back to a range shows the moved event without a refetch. -->
<Scheduler
  {source}
  onMutate={async (mutation) => {
    await api.save(mutation);
  }}
/>