# Queue

**sonic-queue** loads content in batches based on the expression provided in the dataProviderExpression attribute.

* Each batch is loaded by a [List component](#core/components/functional/list/list.md/list) whose dataProvider is created from the dataProviderExpression attribute.
* Upon initialization, it looks at the dataFilterProvider attribute, which provides the address of a publisher.
If this attribute is found, Queue listens to the provided publisher and resets itself whenever the content of the publisher is modified.
The values provided in this publisher are added as parameters to each request.
* The key property can be used to target a specific property in the API response as fetch does.
 
List extends the mixin [Subscriber](#docs/_core-concept/subscriber.md/subscriber)


<sonic-code>
  <template>
    <sonic-queue
        class="grid grid-cols-3 gap-3"
        dataProviderExpression="communes?limit=$limit"
        limit="30"
        serviceURL="https://geo.api.gouv.fr/"
        debug
      >
      <template>
        <div data-bind ::inner-html="$nom" class="bg-neutral-100 p-2">
          queue
        </div>
      </template>
    </sonic-queue>
  </template>
</sonic-code>

<sonic-code>
  <template>
    <sonic-queue
      lazyload
      dataProviderExpression="api/users?page=$offset&per_page=$limit"
      offset="2"
      limit="5"
      dataFilterProvider="filter"
      targetRequestDuration="500"
      serviceURL="https://reqres.in"
      key="data"
      debug
    >
        <template>
          <div class="flex px-4 py-3 items-center gap-4">
            <sonic-image data-bind ::src="$avatar" rounded="full" ratio="1/1" class="w-20 block"></sonic-image>
            <div>
              <div class="text-bold text-2xl mb-2">
                <span data-bind ::inner-html="$first_name"></span>
                <span data-bind ::inner-html="$last_name"></span>
              </div>
              <sonic-button data-bind ::href="mailto|$email" size="xs" variant="outline"> Contact </sonic-button>
            </div>
          </div>
          <div class="border-0 border-t-2 border-t-neutral-200 w-full border-solid"></div>
        </template>
    </sonic-queue>
  </template>
</sonic-code>

<sonic-code>
  <template>
    <sonic-list
      lazyload
      fetch
      dataProvider="api/users?page=2&per_page=5"
      serviceURL="https://reqres.in"
      key="data"
      debug
    >
      <template>
        <div class="flex px-4 py-3 items-center gap-4">
          <sonic-image data-bind ::src="$avatar" rounded="full" ratio="1/1" class="w-20 block"></sonic-image>
          <div>
            <div class="text-bold text-2xl mb-2">
              <span data-bind ::inner-html="$first_name"></span>
              <span data-bind ::inner-html="$last_name"></span>
            </div>
            <sonic-button data-bind ::href="mailto|$email" size="xs" variant="outline"> Contact </sonic-button>
          </div>
        </div>
        <div class="border-0 border-t-2 border-t-neutral-200 w-full border-solid"></div>
      </template>
    </sonic-list>
  </template>
</sonic-code>