useInfiniteQuery: how to reliably distinguish initial load from confirmed empty result?

[uriva]

When using useInfiniteQuery on a page that may legitimately have zero results, I'm finding it tricky to render an "empty state" without flashing it briefly during the initial load.

The natural pattern would be:

const { data, isLoading } = useInfiniteQuery({ items: { $: { limit: 20 } } });
const items = data?.items ?? [];

if (isLoading) return <Spinner />;
if (items.length === 0) return <EmptyState />;
return <List items={items} />;

In practice, on first mount I sometimes see the empty state flash for a moment before the real results appear. It looks like isLoading flips to false (or data becomes a defined object with an empty array) before the actual page of results has arrived from the server, so items.length === 0 is briefly true even though there are items on the server.

A few questions:

1. Is there a recommended way to distinguish "we haven't received the first page yet" from "first page arrived and is genuinely empty"?
2. Is there a field on the result (something like pageInfo, an endCursor, a hasLoaded flag, etc.) that's intended for this?
3. What's the idiomatic pattern people use for empty states with useInfiniteQuery?

Currently I'm working around it by gating the empty state behind a setTimeout, but that feels like a hack. Would love to know if there's a cleaner approach, or if this is something the hook could expose more directly.

Thanks!

[uriva]

For reference, I'm on @instantdb/react@1.0.21.

[nezaj]

@uriva we just pushed up v1.0.41, does this work for you?

[uriva]

gemini 3.5:

Thanks @nezaj! I took a look under the hood at @instantdb/react-common and @instantdb/core in v1.0.41.

While v1.0.41 beautifully resolves the flicker when query dependencies/parameters change (by leveraging getInfiniteQueryInitialSnapshot to preserve cached state), it unfortunately still flashes empty state on cold starts (first mount with an empty local cache).

Here is the exact code path causing this:

1. subscribeInfiniteQuery starter sub fires synchronously

When useInfiniteQuery is mounted, useInfiniteQuerySubscription.js sets up the subscription:

const sub = core.subscribeInfiniteQuery(query, (resp) => {
    stateCacheRef.current = {
        ...resp,
        isLoading: false, // <-- Unconditionally forces isLoading: false
    };
    cb();
}, opts);

Inside @instantdb/core's subscribeInfiniteQuery, the starter db.subscribeQuery is fired. Because InstantDB is local-first, it executes synchronously against the local store.
Since the local cache is empty, it returns rows = [] (length 0), which is less than pageSize:

if (rows.length < pageSize) {
    setForwardChunk(PRE_BOOTSTRAP_CURSOR, {
        data: rows,
        status: 'pre-bootstrap',
    });
    return;
}

2. pushUpdate discards the underlying loading/syncing status

setForwardChunk calls pushUpdate(), which emits the result:

const pushUpdate = () => {
    if (!isActive)
        return;
    const { chunks, data } = normalizeChunks(forwardChunks, reverseChunks);
    cb({
        data: { [entity]: data },
        chunks,
        canLoadNextPage: readCanLoadNextPage(forwardChunks),
    });
};

Note that the underlying db.subscribeQuery does know it is loading/syncing (its subscription response typically has isLoading: true), but pushUpdate() doesn't forward any loading status or sync status from the starter query response in the emitted resp.

3. Synchronous override to isLoading: false

Because cb is called synchronously during subscription setup, the outer React hook callback executes and sets stateCacheRef.current.isLoading = false with data: { [entity]: [] } before the first render completes.

Thus, the hook immediately returns { data: [], isLoading: false } on the first render cycle of a cold start, causing a brief empty state flash until the WebSocket receives the actual rows from the server and updates the subscription.