From 7cb0c793b12fb5170c4c70bd19853d9ccd3a3d80 Mon Sep 17 00:00:00 2001
From: Jess Archer <jess@jessarcher.com>
Date: Fri, 6 Oct 2023 17:14:21 +1000
Subject: [PATCH] Add loading state to queues card

---
 resources/views/livewire/queues.blade.php | 251 ++++++++++++----------
 1 file changed, 136 insertions(+), 115 deletions(-)

diff --git a/resources/views/livewire/queues.blade.php b/resources/views/livewire/queues.blade.php
index b8bf7b03f..fb05f9950 100644
--- a/resources/views/livewire/queues.blade.php
+++ b/resources/views/livewire/queues.blade.php
@@ -26,132 +26,153 @@
     </x-pulse::card-header>
 
     <x-pulse::card-body :expand="$expand" wire:poll.5s="">
-        <div class="grid gap-3 mx-px mb-px">
-            @foreach ($queues as $queue => $readings)
-                <div>
-                    <h3 class="font-bold text-gray-700 dark:text-gray-300">
-                        {{ Str::after($queue, ':') }}
-                        @if ($showConnection)
-                            ({{ Str::before($queue, ':') }})
-                        @endif
-                    </h3>
-                    @php $latest = $readings->last() @endphp
-                    @php
-                        $highest = $readings->map(fn ($reading) => max(
-                            $reading->queued,
-                            $reading->processed,
-                            $reading->failed,
-                        ))->max()
-                    @endphp
+        <div
+            x-data="{
+                loadingNewDataset: false,
+                init() {
+                    Livewire.on('period-changed', () => (this.loadingNewDataset = true))
 
-                    <div class="mt-3 relative">
-                        <div class="absolute -left-px -top-2 max-w-fit h-4 flex items-center px-1 text-xs leading-none text-white font-bold bg-purple-500 rounded after:[--triangle-size:4px] after:border-l-purple-500 after:absolute after:right-[calc(-1*var(--triangle-size))] after:top-[calc(50%-var(--triangle-size))] after:border-t-[length:var(--triangle-size)] after:border-b-[length:var(--triangle-size)] after:border-l-[length:var(--triangle-size)] after:border-transparent">{{ number_format($highest) }}</div>
+                    Livewire.hook('commit', ({ component, succeed }) => {
+                        if (component.name === $wire.__instance.name) {
+                            succeed(() => this.loadingNewDataset = false)
+                        }
+                    })
+                }
+            }"
+            class="min-h-full flex flex-col"
+            :class="loadingNewDataset ? 'opacity-25 animate-pulse' : ''"
+        >
+            @if (count($queues) === 0)
+                <x-pulse::no-results class="flex-1" />
+            @else
+                <div class="grid gap-3 mx-px mb-px">
+                    @foreach ($queues as $queue => $readings)
+                        <div>
+                            <h3 class="font-bold text-gray-700 dark:text-gray-300">
+                                {{ Str::after($queue, ':') }}
+                                @if ($showConnection)
+                                    ({{ Str::before($queue, ':') }})
+                                @endif
+                            </h3>
+                            @php $latest = $readings->last() @endphp
+                            @php
+                                $highest = $readings->map(fn ($reading) => max(
+                                    $reading->queued,
+                                    $reading->processed,
+                                    $reading->failed,
+                                ))->max()
+                            @endphp
 
-                        <div
-                            wire:ignore
-                            class="h-12"
-                            x-data="{
-                                init() {
-                                    let chart = new Chart(
-                                        this.$refs.canvas,
-                                        {
-                                            type: 'line',
-                                            data: {
-                                                labels: @js(collect($readings)->pluck('date')),
-                                                datasets: [
-                                                    {
-                                                        label: 'Queued',
-                                                        borderColor: 'rgba(147,51,234,0.5)',
-                                                        borderWidth: 2,
-                                                        borderCapStyle: 'round',
-                                                        data: @js(collect($readings)->pluck('queued')),
-                                                        pointStyle: false,
-                                                        tension: 0.2,
-                                                        spanGaps: false,
-                                                    },
-                                                    {
-                                                        label: 'Processed',
-                                                        borderColor: '#9333ea',
-                                                        borderWidth: 2,
-                                                        borderCapStyle: 'round',
-                                                        data: @js(collect($readings)->pluck('processed')),
-                                                        pointStyle: false,
-                                                        tension: 0.2,
-                                                        spanGaps: false,
-                                                    },
-                                                    {
-                                                        label: 'Failed',
-                                                        borderColor: '#e11d48',
-                                                        borderWidth: 2,
-                                                        borderCapStyle: 'round',
-                                                        data: @js(collect($readings)->pluck('failed')),
-                                                        pointStyle: false,
-                                                        tension: 0.2,
-                                                        spanGaps: false,
-                                                    },
-                                                ],
-                                            },
-                                            options: {
-                                                maintainAspectRatio: false,
-                                                layout: {
-                                                    autoPadding: false,
-                                                    padding: {
-                                                        top: 1,
-                                                    },
-                                                },
-                                                scales: {
-                                                    x: {
-                                                        display: false,
+                            <div class="mt-3 relative">
+                                <div class="absolute -left-px -top-2 max-w-fit h-4 flex items-center px-1 text-xs leading-none text-white font-bold bg-purple-500 rounded after:[--triangle-size:4px] after:border-l-purple-500 after:absolute after:right-[calc(-1*var(--triangle-size))] after:top-[calc(50%-var(--triangle-size))] after:border-t-[length:var(--triangle-size)] after:border-b-[length:var(--triangle-size)] after:border-l-[length:var(--triangle-size)] after:border-transparent">{{ number_format($highest) }}</div>
+
+                                <div
+                                    wire:ignore
+                                    class="h-12"
+                                    x-data="{
+                                        init() {
+                                            let chart = new Chart(
+                                                this.$refs.canvas,
+                                                {
+                                                    type: 'line',
+                                                    data: {
+                                                        labels: @js(collect($readings)->pluck('date')),
+                                                        datasets: [
+                                                            {
+                                                                label: 'Queued',
+                                                                borderColor: 'rgba(147,51,234,0.5)',
+                                                                borderWidth: 2,
+                                                                borderCapStyle: 'round',
+                                                                data: @js(collect($readings)->pluck('queued')),
+                                                                pointStyle: false,
+                                                                tension: 0.2,
+                                                                spanGaps: false,
+                                                            },
+                                                            {
+                                                                label: 'Processed',
+                                                                borderColor: '#9333ea',
+                                                                borderWidth: 2,
+                                                                borderCapStyle: 'round',
+                                                                data: @js(collect($readings)->pluck('processed')),
+                                                                pointStyle: false,
+                                                                tension: 0.2,
+                                                                spanGaps: false,
+                                                            },
+                                                            {
+                                                                label: 'Failed',
+                                                                borderColor: '#e11d48',
+                                                                borderWidth: 2,
+                                                                borderCapStyle: 'round',
+                                                                data: @js(collect($readings)->pluck('failed')),
+                                                                pointStyle: false,
+                                                                tension: 0.2,
+                                                                spanGaps: false,
+                                                            },
+                                                        ],
                                                     },
-                                                    y: {
-                                                        display: false,
-                                                        min: 1,
-                                                        ticks: {
-                                                            stepSize: 1,
+                                                    options: {
+                                                        maintainAspectRatio: false,
+                                                        layout: {
+                                                            autoPadding: false,
+                                                            padding: {
+                                                                top: 1,
+                                                            },
                                                         },
-                                                    },
-                                                },
-                                                plugins: {
-                                                    legend: {
-                                                        display: false,
-                                                    },
-                                                    tooltip: {
-                                                        callbacks: {
-                                                            title: () => '',
-                                                            label: (context) => `${context.label} - ${context.dataset.label}: ${context.formattedValue}`
+                                                        scales: {
+                                                            x: {
+                                                                display: false,
+                                                            },
+                                                            y: {
+                                                                display: false,
+                                                                min: 1,
+                                                                ticks: {
+                                                                    stepSize: 1,
+                                                                },
+                                                            },
+                                                        },
+                                                        plugins: {
+                                                            legend: {
+                                                                display: false,
+                                                            },
+                                                            tooltip: {
+                                                                callbacks: {
+                                                                    title: () => '',
+                                                                    label: (context) => `${context.label} - ${context.dataset.label}: ${context.formattedValue}`
+                                                                },
+                                                                displayColors: false,
+                                                            },
                                                         },
-                                                        displayColors: false,
                                                     },
-                                                },
-                                            },
-                                        }
-                                    )
+                                                }
+                                            )
 
-                                    Livewire.on('queues-chart-update', ({ queues }) => {
-                                        if (chart === undefined) {
-                                            return
-                                        }
+                                            Livewire.on('queues-chart-update', ({ queues }) => {
+                                                if (chart === undefined) {
+                                                    return
+                                                }
 
-                                        if (queues['{{ $queue }}'] === undefined && chart) {
-                                            chart.destroy()
-                                            chart = undefined
-                                            return
-                                        }
+                                                if (queues['{{ $queue }}'] === undefined && chart) {
+                                                    chart.destroy()
+                                                    chart = undefined
+                                                    return
+                                                }
 
-                                        chart.data.labels = queues['{{ $queue }}'].map(reading => reading.date)
-                                        chart.data.datasets[0].data = queues['{{ $queue }}'].map(reading => reading.queued)
-                                        chart.data.datasets[1].data = queues['{{ $queue }}'].map(reading => reading.processed)
-                                        chart.data.datasets[2].data = queues['{{ $queue }}'].map(reading => reading.failed)
-                                        chart.update()
-                                    })
-                                }
-                            }"
-                        >
-                            <canvas x-ref="canvas" class="ring-1 ring-gray-900/10 dark:ring-gray-100/10 bg-white dark:bg-gray-800 rounded-md shadow-sm"></canvas>
+                                                chart.data.labels = queues['{{ $queue }}'].map(reading => reading.date)
+                                                chart.data.datasets[0].data = queues['{{ $queue }}'].map(reading => reading.queued)
+                                                chart.data.datasets[1].data = queues['{{ $queue }}'].map(reading => reading.processed)
+                                                chart.data.datasets[2].data = queues['{{ $queue }}'].map(reading => reading.failed)
+                                                chart.update()
+                                            })
+                                        }
+                                    }"
+                                >
+                                    <canvas x-ref="canvas" class="ring-1 ring-gray-900/10 dark:ring-gray-100/10 bg-white dark:bg-gray-800 rounded-md shadow-sm"></canvas>
+                                </div>
+                            </div>
                         </div>
-                    </div>
+                    @endforeach
                 </div>
-            @endforeach
+            @endif
         </div>
     </x-pulse::card-body>
 </x-pulse::card>