From b58cc05b8aea540b0347fe54a0a1adad9343940f Mon Sep 17 00:00:00 2001
From: Andras Bacsai <andras.bacsai@gmail.com>
Date: Tue, 12 Nov 2024 09:52:22 +0100
Subject: [PATCH] fix: terminal view loading in async

---
 app/Livewire/Terminal/Index.php               | 14 +++++-
 .../views/livewire/terminal/index.blade.php   | 45 ++++++++++---------
 2 files changed, 38 insertions(+), 21 deletions(-)

diff --git a/app/Livewire/Terminal/Index.php b/app/Livewire/Terminal/Index.php
index 945b25714..a24a237c5 100644
--- a/app/Livewire/Terminal/Index.php
+++ b/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();
-        $this->containers = $this->getAllActiveContainers();
+    }
+
+    public function loadContainers()
+    {
+        try {
+            $this->containers = $this->getAllActiveContainers();
+        } catch (\Exception $e) {
+            return handleError($e, $this);
+        } finally {
+            $this->isLoadingContainers = false;
+        }
     }
 
     private function getAllActiveContainers()
diff --git a/resources/views/livewire/terminal/index.blade.php b/resources/views/livewire/terminal/index.blade.php
index 357295002..0471a44a4 100644
--- a/resources/views/livewire/terminal/index.blade.php
+++ b/resources/views/livewire/terminal/index.blade.php
@@ -8,27 +8,32 @@
         <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>
-        <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">
-                @foreach ($servers as $server)
-                    @if ($loop->first)
-                        <option disabled value="default">Select a server or container</option>
-                    @endif
-                    <option value="{{ $server->uuid }}">{{ $server->name }}</option>
-                    @foreach ($containers as $container)
-                        @if ($container['server_uuid'] == $server->uuid)
-                            <option value="{{ $container['uuid'] }}">
-                                {{ $server->name }} -> {{ $container['name'] }}
-                            </option>
+    <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">
+                    @foreach ($servers as $server)
+                        @if ($loop->first)
+                            <option disabled value="default">Select a server or container</option>
                         @endif
+                        <option value="{{ $server->uuid }}">{{ $server->name }}</option>
+                        @foreach ($containers as $container)
+                            @if ($container['server_uuid'] == $server->uuid)
+                                <option value="{{ $container['uuid'] }}">
+                                    {{ $server->name }} -> {{ $container['name'] }}
+                                </option>
+                            @endif
+                        @endforeach
                     @endforeach
-                @endforeach
-            </x-forms.select>
-            <x-forms.button type="submit">Connect</x-forms.button>
-        </form>
-        <livewire:project.shared.terminal />
+                </x-forms.select>
+                <x-forms.button type="submit">Connect</x-forms.button>
+            </form>
+            <livewire:project.shared.terminal />
+        @endif
     </div>
-
 </div>