From c3dd24ff436e3ae5320fea754f8ab49a0ee0e2a3 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <5845193+andrasbacsai@users.noreply.github.com>
Date: Fri, 13 Jun 2025 07:16:44 +0200
Subject: [PATCH] refactor(navbar): simplify proxy status handling and enhance
 loading indicators for better user experience

---
 app/Livewire/Server/Navbar.php                | 12 ------
 .../views/livewire/server/navbar.blade.php    | 41 +++++++++----------
 2 files changed, 19 insertions(+), 34 deletions(-)

diff --git a/app/Livewire/Server/Navbar.php b/app/Livewire/Server/Navbar.php
index 6bfde2b9c..5381d1e19 100644
--- a/app/Livewire/Server/Navbar.php
+++ b/app/Livewire/Server/Navbar.php
@@ -116,23 +116,11 @@ public function showNotification()
 
         switch ($this->proxyStatus) {
             case 'running':
-                // $this->dispatch('success', 'Proxy is running.');
                 $this->loadProxyConfiguration();
                 break;
             case 'restarting':
                 $this->dispatch('info', 'Initiating proxy restart.');
                 break;
-                // case 'exited':
-                //     if (! $forceStop) {
-                //         $this->dispatch('info', 'Proxy is stopped manually.<br>Starting in a moment.');
-                //     }
-                //     break;
-            case 'starting':
-                // do nothing
-                break;
-            case 'stopping':
-                // do nothing
-                break;
             default:
                 break;
         }
diff --git a/resources/views/livewire/server/navbar.blade.php b/resources/views/livewire/server/navbar.blade.php
index 2bab36509..334e1922c 100644
--- a/resources/views/livewire/server/navbar.blade.php
+++ b/resources/views/livewire/server/navbar.blade.php
@@ -19,37 +19,34 @@
                     @elseif ($proxyStatus === 'starting')
                         <x-status.restarting status="Proxy Starting" noLoading />
                     @elseif (data_get($server, 'proxy.force_stop'))
-                        <x-status.stopped status="Proxy Stopped (Force Stop)" noLoading />
-                        <div wire:loading wire:target="checkProxy" class="badge badge-warning"></div>
-                        <div wire:loading wire:target="checkProxy"
-                            class="pl-2 pr-1 text-xs font-bold tracking-wider text-warning">
-                            Checking Ports Availability...
+                        <div wire:loading.remove wire:target="checkProxy">
+                            <x-status.stopped status="Proxy Stopped (Force Stop)" noLoading />
                         </div>
                     @elseif ($proxyStatus === 'exited')
-                        <x-status.stopped status="Proxy Exited" noLoading />
-                    @endif
-
-                    @if ($proxyStatus !== 'exited')
-                        <div wire:loading>
-                            <div class="flex items-center">
-                                <svg class="w-4 h-4 mx-1 ml-3 text-coollabs dark:text-warning animate-spin"
-                                    xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-                                    <circle class="opacity-25" cx="12" cy="12" r="10"
-                                        stroke="currentColor" stroke-width="4"></circle>
-                                    <path class="opacity-75" fill="currentColor"
-                                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
-                                    </path>
-                                </svg>
-                            </div>
+                        <div wire:loading.remove wire:target="checkProxy">
+                            <x-status.stopped status="Proxy Exited" noLoading />
                         </div>
-
-                        <button title="Refresh Status" wire:click='checkProxyStatus'
+                    @endif
+                    <div wire:loading wire:target="checkProxy" class="badge badge-warning"></div>
+                    <div wire:loading wire:target="checkProxy"
+                        class="pl-2 pr-1 text-xs font-bold tracking-wider text-warning">
+                        Checking Ports Availability...
+                    </div>
+                    @if ($proxyStatus !== 'exited')
+                        <button wire:loading.remove title="Refresh Status" wire:click='checkProxyStatus'
                             class="mx-1 dark:hover:fill-white fill-black dark:fill-warning">
                             <svg class="w-4 h-4" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                 <path
                                     d="M12 2a10.016 10.016 0 0 0-7 2.877V3a1 1 0 1 0-2 0v4.5a1 1 0 0 0 1 1h4.5a1 1 0 0 0 0-2H6.218A7.98 7.98 0 0 1 20 12a1 1 0 0 0 2 0A10.012 10.012 0 0 0 12 2zm7.989 13.5h-4.5a1 1 0 0 0 0 2h2.293A7.98 7.98 0 0 1 4 12a1 1 0 0 0-2 0a9.986 9.986 0 0 0 16.989 7.133V21a1 1 0 0 0 2 0v-4.5a1 1 0 0 0-1-1z" />
                             </svg>
                         </button>
+                        <button wire:loading title="Refreshing Status" wire:click='checkProxyStatus'
+                            class="mx-1 dark:hover:fill-white fill-black dark:fill-warning">
+                            <svg class="w-4 h-4 animate-spin" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                                <path
+                                    d="M12 2a10.016 10.016 0 0 0-7 2.877V3a1 1 0 1 0-2 0v4.5a1 1 0 0 0 1 1h4.5a1 1 0 0 0 0-2H6.218A7.98 7.98 0 0 1 20 12a1 1 0 0 0 2 0A10.012 10.012 0 0 0 12 2zm7.989 13.5h-4.5a1 1 0 0 0 0 2h2.293A7.98 7.98 0 0 1 4 12a1 1 0 0 0-2 0a9.986 9.986 0 0 0 16.989 7.133V21a1 1 0 0 0 2 0v-4.5a1 1 0 0 0-1-1z" />
+                            </svg>
+                        </button>
                     @endif
                 </div>
             </div>