better upgrade process for the user

resources/views/components/layout.blade.php

@@ -27,20 +27,41 @@
     @livewireScripts
     @auth
         <script>
-            Livewire.on('updateInitiated', () => {
-                let checkStatus = null;
-                console.log('Update initiated')
-                setInterval(async () => {
+            function checkIfIamDead() {
+                checkIfIamDeadInterval = setInterval(async () => {
+                    console.log('Checking server\'s pulse...')
+                    const res = await fetch('/api/health');
+                    if (!res.ok) {
+                        console.log('I\'m dead. Charging... Standby... Bzz... Bzz...')
+                    } else {
+                        console.log('I\'m alive!');
+                        checkHealth();
+                        if (checkIfIamDeadInterval) clearInterval(checkIfIamDeadInterval);
+                    }
+
+                    return;
+                }, 2000);
+            }
+
+            function checkHealth() {
+                checkHealthInterval = setInterval(async () => {
+                    console.log('Checking server\'s health...')
                     const res = await fetch('/api/health');
                     if (res.ok) {
-                        console.log('Server is back online')
-                        clearInterval(checkStatus);
+                        console.log('Server is back online. Reloading...')
+                        if (checkHealthInterval) clearInterval(checkHealthInterval);
                         window.location.reload();
                     } else {
-                        console.log('Waiting for server to come back online...');
+                        console.log('Waiting for server to come back from dead...');
                     }
                     return;
                 }, 2000);
+            }
+            Livewire.on('updateInitiated', () => {
+                let checkHealthInterval = null;
+                let checkIfIamDeadInterval = null;
+                console.log('Update initiated. Waiting for server to be dead...')
+                checkIfIamDead();
             })
         </script>
     @endauth

resources/views/components/navbar.blade.php

@@ -13,6 +13,7 @@
             @csrf
             <button type="submit">Logout</button>
         </form>
-        <livewire:check-update>
-        @endauth
+        <livewire:check-update />
+        <livewire:force-upgrade />
+    @endauth
 </nav>

resources/views/livewire/check-update.blade.php

@@ -1,14 +1,6 @@
 <div>
-    <button wire:click='checkUpdate'>Updates</button>
-    <div wire:loading wire:target="checkUpdate">
-        Checking for updates...
-    </div>
-    @if (auth()->user()->teams->contains(0))
-        <button wire:click='forceUpgrade'>Force Upgrade</button>
-        <div wire:loading wire:target="forceUpgrade">
-            Updating Coolify...
-        </div>
-    @endif
+    <button wire:loading.class="text-black bg-green-500" wire:loading.attr="disabled" wire:click='checkUpdate'>Check for
+        updates</button>
     @if ($updateAvailable)
         Update available
     @endif

resources/views/livewire/force-upgrade.blade.php

@@ -0,0 +1,6 @@
+<div>
+    @if (auth()->user()->teams->contains(0))
+        <button wire:loading.class="text-black bg-green-500" wire:loading.attr="disabled" wire:click='upgrade'>Force
+            Upgrade</button>
+    @endif
+</div>