From 759fbe5b3c66c152015cfd7da21276386db08125 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <5845193+andrasbacsai@users.noreply.github.com>
Date: Sun, 1 Nov 2026 14:50:14 +0100
Subject: [PATCH] feat(deployments): show spinners for in-progress status

---
 .../views/components/status-badge.blade.php   | 22 +++++++++++++++++++
 .../dashboard/active-deployments.blade.php    |  8 +++----
 .../livewire/deployments-indicator.blade.php  |  2 +-
 .../application/deployment/index.blade.php    |  6 +++++
 .../application/deployment/show.blade.php     |  4 ++++
 5 files changed, 37 insertions(+), 5 deletions(-)

diff --git a/resources/views/components/status-badge.blade.php b/resources/views/components/status-badge.blade.php
index a8f49e8bf5..72b58d9666 100644
--- a/resources/views/components/status-badge.blade.php
+++ b/resources/views/components/status-badge.blade.php
@@ -5,6 +5,7 @@
     'as' => 'span',
     'dynamic' => false,
     'pulse' => false, // ping the dot for a state that is still in progress
+    'spinning' => false, // show the loading spinner instead of the dot, e.g. for a running deployment
 ])
 
 @php
@@ -23,12 +24,19 @@
         @if ($dynamic)
             {{ $slot }}
         @else
+            @if ($spinning)
+                <svg class="loading-indicator size-3 shrink-0 animate-spin text-neutral-500 dark:text-fg-dim" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+                    <circle class="opacity-20" cx="12" cy="12" r="9" stroke="currentColor" stroke-width="2" />
+                    <path class="opacity-80" d="M21 12a9 9 0 0 0-9-9" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+                </svg>
+            @else
             <span class="relative flex size-1.5 shrink-0">
                 @if ($pulse)
                     <span class="absolute inline-flex size-full rounded-full opacity-75 motion-safe:animate-ping {{ $dotClasses[$type] ?? $dotClasses['neutral'] }}"></span>
                 @endif
                 <span class="relative inline-flex size-1.5 rounded-full {{ $dotClasses[$type] ?? $dotClasses['neutral'] }}"></span>
             </span>
+            @endif
             <span class="truncate">{{ collect([$label, $status])->filter()->join(' ') }}</span>
         @endif
     </button>
@@ -37,12 +45,19 @@
         @if ($dynamic)
             {{ $slot }}
         @else
+            @if ($spinning)
+                <svg class="loading-indicator size-3 shrink-0 animate-spin text-neutral-500 dark:text-fg-dim" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+                    <circle class="opacity-20" cx="12" cy="12" r="9" stroke="currentColor" stroke-width="2" />
+                    <path class="opacity-80" d="M21 12a9 9 0 0 0-9-9" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+                </svg>
+            @else
             <span class="relative flex size-1.5 shrink-0">
                 @if ($pulse)
                     <span class="absolute inline-flex size-full rounded-full opacity-75 motion-safe:animate-ping {{ $dotClasses[$type] ?? $dotClasses['neutral'] }}"></span>
                 @endif
                 <span class="relative inline-flex size-1.5 rounded-full {{ $dotClasses[$type] ?? $dotClasses['neutral'] }}"></span>
             </span>
+            @endif
             <span class="truncate">{{ collect([$label, $status])->filter()->join(' ') }}</span>
         @endif
     </a>
@@ -51,12 +66,19 @@
         @if ($dynamic)
             {{ $slot }}
         @else
+            @if ($spinning)
+                <svg class="loading-indicator size-3 shrink-0 animate-spin text-neutral-500 dark:text-fg-dim" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+                    <circle class="opacity-20" cx="12" cy="12" r="9" stroke="currentColor" stroke-width="2" />
+                    <path class="opacity-80" d="M21 12a9 9 0 0 0-9-9" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+                </svg>
+            @else
             <span class="relative flex size-1.5 shrink-0">
                 @if ($pulse)
                     <span class="absolute inline-flex size-full rounded-full opacity-75 motion-safe:animate-ping {{ $dotClasses[$type] ?? $dotClasses['neutral'] }}"></span>
                 @endif
                 <span class="relative inline-flex size-1.5 rounded-full {{ $dotClasses[$type] ?? $dotClasses['neutral'] }}"></span>
             </span>
+            @endif
             <span class="truncate">{{ collect([$label, $status])->filter()->join(' ') }}</span>
         @endif
     </span>
diff --git a/resources/views/livewire/dashboard/active-deployments.blade.php b/resources/views/livewire/dashboard/active-deployments.blade.php
index dc3ab8ed93..451a7a7837 100644
--- a/resources/views/livewire/dashboard/active-deployments.blade.php
+++ b/resources/views/livewire/dashboard/active-deployments.blade.php
@@ -81,14 +81,14 @@
                                     {{ $deployment->server_name ?: '-' }}
                                 </p>
                                 <span class="hidden @2xl:block">
-                                    <x-status-badge :status="$deploymentStatus" :type="$deploymentStatusType" />
+                                    <x-status-badge :status="$deploymentStatus" :type="$deploymentStatusType" :spinning="$deployment->status === 'in_progress'" />
                                 </span>
                                 <p class="hidden truncate text-[12px] text-neutral-500 @2xl:block dark:text-fg-dim">
                                     {{ $deployment->created_at?->diffForHumans() ?? '-' }}
                                 </p>
 
                                 <div class="mt-3 flex min-w-0 items-center gap-3 @2xl:hidden">
-                                    <x-status-badge :status="$deploymentStatus" :type="$deploymentStatusType" />
+                                    <x-status-badge :status="$deploymentStatus" :type="$deploymentStatusType" :spinning="$deployment->status === 'in_progress'" />
                                     <p class="min-w-0 truncate text-[11px] text-neutral-500 dark:text-fg-faint">
                                         {{ $environmentPath ?: '-' }}
                                         <span class="px-1 text-neutral-300 dark:text-white/15">·</span>
@@ -141,14 +141,14 @@
                                     {{ $deployment->server_name ?: '-' }}
                                 </p>
                                 <span class="hidden @2xl:block">
-                                    <x-status-badge :status="$deploymentStatus" :type="$deploymentStatusType" />
+                                    <x-status-badge :status="$deploymentStatus" :type="$deploymentStatusType" :spinning="$deployment->status === 'in_progress'" />
                                 </span>
                                 <p class="hidden truncate text-[12px] text-neutral-500 @2xl:block dark:text-fg-dim">
                                     {{ $deployment->created_at?->diffForHumans() ?? '-' }}
                                 </p>
 
                                 <div class="mt-3 flex min-w-0 items-center gap-3 @2xl:hidden">
-                                    <x-status-badge :status="$deploymentStatus" :type="$deploymentStatusType" />
+                                    <x-status-badge :status="$deploymentStatus" :type="$deploymentStatusType" :spinning="$deployment->status === 'in_progress'" />
                                     <p class="min-w-0 truncate text-[11px] text-neutral-500 dark:text-fg-faint">
                                         {{ $environmentPath ?: '-' }}
                                         <span class="px-1 text-neutral-300 dark:text-white/15">·</span>
diff --git a/resources/views/livewire/deployments-indicator.blade.php b/resources/views/livewire/deployments-indicator.blade.php
index 7d745f7066..c325949389 100644
--- a/resources/views/livewire/deployments-indicator.blade.php
+++ b/resources/views/livewire/deployments-indicator.blade.php
@@ -48,7 +48,7 @@
                                 <p class="truncate text-[13px] font-semibold text-black dark:text-fg">
                                     {{ $deployment->application_name }}
                                 </p>
-                                <x-status-badge :status="$deploymentStatus" :type="$deploymentStatusType"
+                                <x-status-badge :status="$deploymentStatus" :type="$deploymentStatusType" :spinning="$deployment->status === 'in_progress'"
                                     class="shrink-0" />
                             </div>
 
diff --git a/resources/views/livewire/project/application/deployment/index.blade.php b/resources/views/livewire/project/application/deployment/index.blade.php
index c5fe02f54b..c3afa9176f 100644
--- a/resources/views/livewire/project/application/deployment/index.blade.php
+++ b/resources/views/livewire/project/application/deployment/index.blade.php
@@ -276,6 +276,7 @@
                             @unless ($embedded)
                                 <span class="min-w-0">
                                     <x-status-badge as="button" :status="$statusLabel" :type="$statusType"
+                                        :spinning="$deploymentStatus === 'in_progress'"
                                         class="table-filter-value table-filter-badge" title="Filter by {{ $statusLabel }}"
                                         wire:click="toggleDeploymentFilter('status:{{ $deploymentStatus }}')" />
                                 </span>
@@ -333,6 +334,10 @@
                                     <span>{{ \Carbon\Carbon::parse(data_get($deployment, 'created_at'))->diffForHumans(syntax: \Carbon\CarbonInterface::DIFF_ABSOLUTE, short: true) }}</span>
                                     <x-loading compact x-cloak x-show="selecting === '{{ data_get($deployment, 'deployment_uuid') }}'"
                                         aria-label="Loading deployment logs..." />
+                                    @if ($deploymentStatus === 'in_progress')
+                                        <x-loading compact x-show="selecting !== '{{ data_get($deployment, 'deployment_uuid') }}'"
+                                            aria-label="Deployment in progress" />
+                                    @else
                                     <span x-show="selecting !== '{{ data_get($deployment, 'deployment_uuid') }}'" @class([
                                         'size-2 shrink-0 rounded-full',
                                         'bg-emerald-500' => $statusType === 'success',
@@ -340,6 +345,7 @@
                                         'bg-red-500' => $statusType === 'error',
                                         'bg-neutral-400 dark:bg-neutral-500' => $statusType === 'neutral',
                                     ])></span>
+                                    @endif
                                 </a>
                             @endif
                             <a href="{{ $deploymentUrl }}" {!! $deploymentLinkAttributes !!} class="deployment-row-link absolute inset-0"
diff --git a/resources/views/livewire/project/application/deployment/show.blade.php b/resources/views/livewire/project/application/deployment/show.blade.php
index 4b23b18e3f..cd21bcafd9 100644
--- a/resources/views/livewire/project/application/deployment/show.blade.php
+++ b/resources/views/livewire/project/application/deployment/show.blade.php
@@ -336,6 +336,9 @@
                                 </button>
                                 </div>
                                 <span class="flex shrink-0 items-center gap-1.5 text-xs font-medium text-neutral-600 dark:text-fg-dim">
+                                    @if ($deploymentStatus === 'in_progress')
+                                        <x-loading compact />
+                                    @else
                                     <span @class([
                                         'size-2 shrink-0 rounded-full',
                                         'bg-emerald-500' => $deploymentStatusType === 'success',
@@ -343,6 +346,7 @@
                                         'bg-red-500' => $deploymentStatusType === 'error',
                                         'bg-neutral-400 dark:bg-neutral-500' => $deploymentStatusType === 'neutral',
                                     ])></span>
+                                    @endif
                                     {{ $deploymentStatusLabel }}
                                 </span>
                             </div>