fix: terminal view loading in async

app/Livewire/Terminal/Index.php

@@ -14,13 +14,25 @@ class Index extends Component
 
     public $containers = [];
 
+    public bool $isLoadingContainers = true;
+
     public function mount()
     {
         if (! auth()->user()->isAdmin()) {
             abort(403);
         }
         $this->servers = Server::isReachable()->get();
+    }
+
+    public function loadContainers()
+    {
+        try {
             $this->containers = $this->getAllActiveContainers();
+        } catch (\Exception $e) {
+            return handleError($e, $this);
+        } finally {
+            $this->isLoadingContainers = false;
+        }
     }
 
     private function getAllActiveContainers()

resources/views/livewire/terminal/index.blade.php

@@ -8,7 +8,12 @@
         <x-helper
             helper="If you're having trouble connecting to your server, make sure that the port is open.<br><br><a class='underline' href='https://coolify.io/docs/knowledge-base/server/firewall/#terminal' target='_blank'>Documentation</a>"></x-helper>
     </div>
-    <div>
+    <div x-init="$wire.loadContainers()">
+        @if ($isLoadingContainers)
+            <div class="pt-1">
+                <x-loading text="Loading servers and containers..." />
+            </div>
+        @else
             <form class="flex flex-col gap-2 justify-center xl:items-end xl:flex-row"
                 wire:submit="$dispatchSelf('connectToContainer')">
                 <x-forms.select id="server" required wire:model.live="selected_uuid">
@@ -29,6 +34,6 @@
                 <x-forms.button type="submit">Connect</x-forms.button>
             </form>
             <livewire:project.shared.terminal />
+        @endif
     </div>
-
 </div>