From a777db1234f0a2a089ad40279cf221fb0267d659 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <andras.bacsai@gmail.com>
Date: Wed, 27 Mar 2024 14:50:56 +0100
Subject: [PATCH] fix: async service loads

---
 app/Livewire/Project/New/Select.php           |   2 +-
 .../livewire/project/new/select.blade.php     | 129 +++++++++---------
 2 files changed, 65 insertions(+), 66 deletions(-)

diff --git a/app/Livewire/Project/New/Select.php b/app/Livewire/Project/New/Select.php
index 00a243624..b1842547e 100644
--- a/app/Livewire/Project/New/Select.php
+++ b/app/Livewire/Project/New/Select.php
@@ -49,7 +49,6 @@ public function mount()
     }
     public function render()
     {
-        $this->loadServices();
         return view('livewire.project.new.select');
     }
 
@@ -74,6 +73,7 @@ public function updatedSelectedEnvironment()
     public function loadServices(bool $force = false)
     {
         try {
+            $this->loadingServices = true;
             if (count($this->allServices) > 0 && !$force) {
                 if (!$this->search) {
                     $this->services = $this->allServices;
diff --git a/resources/views/livewire/project/new/select.blade.php b/resources/views/livewire/project/new/select.blade.php
index b218c9557..c3030f304 100644
--- a/resources/views/livewire/project/new/select.blade.php
+++ b/resources/views/livewire/project/new/select.blade.php
@@ -1,4 +1,4 @@
-<div x-data x-init="$wire.loadServers">
+<div x-data x-init="$wire.loadServers" x-init="$wire.loadServices">
     <div class="flex flex-col gap-4 lg:flex-row ">
         <h1>New Resource</h1>
         <div class="w-full pb-4 lg:w-96 lg:pb-0">
@@ -383,10 +383,10 @@ class="w-[4.5rem]
             <div class="pb-4 text-xs">Trademarks Policy: The respective trademarks mentioned here are owned by the
                 respective
                 companies, and use of them does not imply any affiliation or endorsement.</div>
-            <div class="grid justify-start grid-cols-1 gap-4 text-left xl:grid-cols-2">
-                @if ($loadingServices)
-                    <span class="loading loading-xs loading-spinner"></span>
-                @else
+            @if ($loadingServices)
+                <x-loading text="Loading services..." />
+            @else
+                <div class="grid justify-start grid-cols-1 gap-4 text-left xl:grid-cols-2">
                     @forelse ($services as $serviceName => $service)
                         @if (data_get($service, 'minversion') && version_compare(config('version'), data_get($service, 'minversion'), '<'))
                             <x-resource-view wire="setType('one-click-service-{{ $serviceName }}')">
@@ -457,74 +457,73 @@ class="w-[4.5rem]
                     @empty
                         <div class="w-96">No service found. Please try to reload the list!</div>
                     @endforelse
-                @endif
-            </div>
+            @endif
+    </div>
 
-        @endif
-        @if ($current_step === 'servers')
-            <h2>Select a server</h2>
-            <div class="pb-5"></div>
-            <div class="flex flex-col justify-center gap-4 text-left xl:flex-row xl:flex-wrap">
-                @forelse($servers as $server)
-                    <div class="w-full lg:w-64 box group" wire:click="setServer({{ $server }})">
-                        <div class="flex flex-col mx-6">
-                            <div class="font-bold group-hover:dark:text-white">
-                                {{ $server->name }}
-                            </div>
-                            <div class="text-xs group-hover:dark:text-white">
-                                {{ $server->description }}</div>
+    @endif
+    @if ($current_step === 'servers')
+        <h2>Select a server</h2>
+        <div class="pb-5"></div>
+        <div class="flex flex-col justify-center gap-4 text-left xl:flex-row xl:flex-wrap">
+            @forelse($servers as $server)
+                <div class="w-full lg:w-64 box group" wire:click="setServer({{ $server }})">
+                    <div class="flex flex-col mx-6">
+                        <div class="font-bold group-hover:dark:text-white">
+                            {{ $server->name }}
                         </div>
+                        <div class="text-xs group-hover:dark:text-white">
+                            {{ $server->description }}</div>
                     </div>
-                @empty
-                    <div>
-                        <div>No validated & reachable servers found. <a class="underline dark:text-white"
-                                href="/servers">
-                                Go to servers page
-                            </a></div>
-                    </div>
-                @endforelse
-            </div>
-            {{-- @if ($isDatabase)
+                </div>
+            @empty
+                <div>
+                    <div>No validated & reachable servers found. <a class="underline dark:text-white" href="/servers">
+                            Go to servers page
+                        </a></div>
+                </div>
+            @endforelse
+        </div>
+        {{-- @if ($isDatabase)
                 <div class="text-center">Swarm clusters are excluded from this type of resource at the moment. It will
                     be activated soon. Stay tuned.</div>
             @endif --}}
-        @endif
-        @if ($current_step === 'destinations')
-            <h2>Select a destination</h2>
-            <div>Destinations are used to segregate resources by network. If you are unsure, select the default
-                Standalone Docker (coolify).</div>
-            <div class="flex flex-col justify-center gap-4 text-left xl:flex-row xl:flex-wrap">
-                @if ($server->isSwarm())
-                    @foreach ($swarmDockers as $swarmDocker)
-                        <div class="box group" wire:click="setDestination('{{ $swarmDocker->uuid }}')">
-                            <div class="flex flex-col mx-6">
-                                <div class="font-bold group-hover:dark:text-white">
-                                    Swarm Docker <span class="text-xs">({{ $swarmDocker->name }})</span>
-                                </div>
+    @endif
+    @if ($current_step === 'destinations')
+        <h2>Select a destination</h2>
+        <div>Destinations are used to segregate resources by network. If you are unsure, select the default
+            Standalone Docker (coolify).</div>
+        <div class="flex flex-col justify-center gap-4 text-left xl:flex-row xl:flex-wrap">
+            @if ($server->isSwarm())
+                @foreach ($swarmDockers as $swarmDocker)
+                    <div class="box group" wire:click="setDestination('{{ $swarmDocker->uuid }}')">
+                        <div class="flex flex-col mx-6">
+                            <div class="font-bold group-hover:dark:text-white">
+                                Swarm Docker <span class="text-xs">({{ $swarmDocker->name }})</span>
                             </div>
                         </div>
-                    @endforeach
-                @else
-                    @foreach ($standaloneDockers as $standaloneDocker)
-                        <div class="box group" wire:click="setDestination('{{ $standaloneDocker->uuid }}')">
-                            <div class="flex flex-col mx-6">
-                                <div class="font-bold group-hover:dark:text-white">
-                                    Standalone Docker <span class="text-xs">({{ $standaloneDocker->name }})</span>
-                                </div>
-                                <div class="text-xs group-hover:dark:text-white">
-                                    Network: {{ $standaloneDocker->network }}</div>
+                    </div>
+                @endforeach
+            @else
+                @foreach ($standaloneDockers as $standaloneDocker)
+                    <div class="box group" wire:click="setDestination('{{ $standaloneDocker->uuid }}')">
+                        <div class="flex flex-col mx-6">
+                            <div class="font-bold group-hover:dark:text-white">
+                                Standalone Docker <span class="text-xs">({{ $standaloneDocker->name }})</span>
                             </div>
+                            <div class="text-xs group-hover:dark:text-white">
+                                Network: {{ $standaloneDocker->network }}</div>
                         </div>
-                    @endforeach
-                @endif
-            </div>
-        @endif
-        @if ($current_step === 'existing-postgresql')
-            <form wire:submit='addExistingPostgresql' class="flex items-end gap-4">
-                <x-forms.input placeholder="postgres://username:password@database:5432" label="Database URL"
-                    id="existingPostgresqlUrl" />
-                <x-forms.button type="submit">Add Database</x-forms.button>
-            </form>
-        @endif
-    </div>
+                    </div>
+                @endforeach
+            @endif
+        </div>
+    @endif
+    @if ($current_step === 'existing-postgresql')
+        <form wire:submit='addExistingPostgresql' class="flex items-end gap-4">
+            <x-forms.input placeholder="postgres://username:password@database:5432" label="Database URL"
+                id="existingPostgresqlUrl" />
+            <x-forms.button type="submit">Add Database</x-forms.button>
+        </form>
+    @endif
+</div>
 </div>