Sigta UI · Kit

Job

One piece of long-running work: an import, an export, a queue run. The compass draws its circle as far round as the work has come, the stage line says what is happening now, and the moment it turns done the circle rises into the mark's arc with a burst. Its state is plain markup, so a Livewire poll that re-renders it moves it along.

States

Exporting the Q3 ledger

Queued Waiting for a worker

Importing 1,204 contacts

62%

Running Matching duplicates

312 duplicates merged so far.

Rebuilding the search index

Running Crawling pages

Sending the October newsletter

Done 4,210 delivered

Syncing Dinero invoices

Failed Step 3 of 4 · API timed out

Source

<div class="flex max-w-xl flex-col gap-2.5">
        <sigta:job heading="Exporting the Q3 ledger" state="queued" stage="Waiting for a worker" />
        <sigta:job heading="Importing 1,204 contacts" :value="62" stage="Matching duplicates" description="312 duplicates merged so far." />
        <sigta:job heading="Rebuilding the search index" stage="Crawling pages" />
        <sigta:job heading="Sending the October newsletter" state="done" stage="4,210 delivered" />
        <sigta:job heading="Syncing Dinero invoices" state="failed" stage="Step 3 of 4 · API timed out">
            <x-slot:actions><sigta:button size="sm">Retry</sigta:button></x-slot:actions>
        </sigta:job>
    </div>

Livewire — a live queue (wire:poll) in a [data-sigta-motion] list

Background work

Importing 1,204 contacts

34%

Running Matching duplicates 00:00:00

Exporting the Q3 ledger

Queued Waiting for a worker 00:00:00

<div wire:poll.1s="tick">
    <div data-sigta-motion class="space-y-2.5">
        @foreach ($jobs as $job)
            <sigta:job wire:key="job-{{ $job->id }}" :heading="$job->name"
                       :state="$job->state" :value="$job->progress" :stage="$job->stage" />
        @endforeach
    </div>
</div>