Concorde documentation (crawl) · interactive version

Concorde functional component — Queue. > Try offline: serviceURL="/docs-mock-api" — see Local API demos. Row rendering: Data flow (.items property binding). Doc ID: core/components/functional/queue/queue. Keywords: Concorde, supersoniks, core/components/functional/queue/queue, queue, Queue, functional component, sonic-queue, web component, serviceURL="/docs-mock-api", .items, dataProvider, …/list-item/0, …/1, dataProviderExpression, $offset, $limit, lazyload, dataFilterProvider. URL: https://concorde.supersoniks.org/crawl/core/components/functional/queue/queue.html.

Queue

Try offline: serviceURL="/docs-mock-api" — see Local API demos. Row rendering: Data flow (.items property binding).

sonic-queue loads data in batches. Each batch is an internal List with its own dataProvider (…/list-item/0, …/1, …).

Mechanism Role
dataProviderExpression API path template; $offset and $limit are replaced per batch
lazyload Load the next batch when the user scrolls near the end
dataFilterProvider Publisher id of a form (formDataProvider); field values are merged into the request query string
filteredFields Optional list of form field names to exclude from the query (space-separated) — omit when every field should be sent
.items, .noItems, .separator, .skeleton Lit callbacks forwarded to each batch list (use the dot — functions are properties, not attributes)

Lazy load — $offset and $limit

When the expression contains $offset and $limit, the queue:

  1. Fetches the first batch with offset=0 (or the initial offset attribute) and per_page=$limit.
  2. On scroll, appends a batch with offset increased by the previous batch size.
  3. Stops when a batch returns fewer rows than limit (or none).

The doc mock implements this on GET /docs-mock-api/api/users?offset=…&per_page=… (paginateUsers in src/docs/mock-api/router.ts).

Wrap the queue in a fixed height with overflow-y-auto so lazy load triggers when scrolling inside the box (same layout as the TS starter demo-queue-templates).

Try scrolling after load — batches of 4 users. Search e.g. George, Bluth, or zzz for empty results.

Expression example

html`<sonic-queue
  lazyload
  serviceURL="/docs-mock-api"
  dataProviderExpression="api/users?offset=$offset&limit=$limit"
  key="data"
  limit="4"
  class="grid max-h-96 overflow-y-auto"
  .items=${this.renderUser}
></sonic-queue>`;

Without $offset in the expression, the queue behaves like a single list (one batch), e.g. geo communes below.

Filter — dataFilterProvider + q

One search field (name="q") on formDataProvider="filter". The queue listens via dataFilterProvider="filter" and, on change:

  1. Resets loaded batches.
  2. Appends each non-empty form field to the query (here only q — no filteredFields needed).
  3. Fetches again from offset 0.

Use filteredFields only when the form has extra fields that must not be sent to the API (e.g. filteredFields="rememberMe internalId").

The mock API filters before pagination — same haystack logic as the starter (filterDocsUsers in src/docs/mock-api/fixtures.ts, used by paginateUsers in router.ts / Service Worker):

const haystack = `${first_name} ${last_name} ${email}`.toLowerCase();
return haystack.includes(q);

Simple batch (no lazy scroll)

Geo communes: expression uses $limit only (no $offset) — one request, one batch.

HTML <template> children

Optional for hosts without Lit — see HTML integration.