From 32929a9fe7ef67c5279bc54bf63312d30e4feec3 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <5845193+andrasbacsai@users.noreply.github.com>
Date: Sun, 2 Nov 2025 17:04:56 +0100
Subject: [PATCH] fix: use x-show for activity monitors to enable reactive
 visibility
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add importRunning to x-data entangle bindings
- Change S3 download activity monitor from @if to x-show for real-time visibility
- Change database restore activity monitor from @if to x-show for real-time visibility
- Activity monitors now display reactively as state changes instead of only on page load
- Both monitors now visible immediately when processes start

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../project/database/import.blade.php         | 45 +++++++++----------
 1 file changed, 21 insertions(+), 24 deletions(-)

diff --git a/resources/views/livewire/project/database/import.blade.php b/resources/views/livewire/project/database/import.blade.php
index 49f51af5a..3568c85f7 100644
--- a/resources/views/livewire/project/database/import.blade.php
+++ b/resources/views/livewire/project/database/import.blade.php
@@ -8,7 +8,8 @@
     s3DownloadedFile: $wire.entangle('s3DownloadedFile'),
     s3FileSize: $wire.entangle('s3FileSize'),
     s3StorageId: $wire.entangle('s3StorageId'),
-    s3Path: $wire.entangle('s3Path')
+    s3Path: $wire.entangle('s3Path'),
+    importRunning: $wire.entangle('importRunning')
 }">
     <script type="text/javascript" src="{{ URL::asset('js/dropzone.js') }}"></script>
     @script
@@ -147,25 +148,23 @@
                         </div>
                     </div>
 
-                    @if ($s3DownloadInProgress)
-                        <div class="pt-2">
-                            <div class="text-sm text-warning">Downloading from S3... This may take a few minutes for large
-                                backups.</div>
-                            <livewire:activity-monitor :activityId="$currentActivityId" header="S3 Download Progress" :showWaiting="false" />
+                    <div x-show="s3DownloadInProgress" class="pt-2">
+                        <div class="text-sm text-warning">Downloading from S3... This may take a few minutes for large
+                            backups.</div>
+                        <livewire:activity-monitor :activityId="$currentActivityId" header="S3 Download Progress" :showWaiting="false" />
+                    </div>
+
+                    <div x-show="s3DownloadedFile && !s3DownloadInProgress" class="pt-2">
+                        <div class="text-sm text-success">File downloaded successfully and ready for restore.</div>
+                        <div class="flex gap-2 pt-2">
+                            <x-forms.button class="w-full" wire:click='restoreFromS3'>
+                                Restore Database from S3
+                            </x-forms.button>
+                            <x-forms.button class="w-full" wire:click='cancelS3Download'>
+                                Cancel
+                            </x-forms.button>
                         </div>
-                    @elseif ($s3DownloadedFile)
-                        <div class="pt-2">
-                            <div class="text-sm text-success">File downloaded successfully and ready for restore.</div>
-                            <div class="flex gap-2 pt-2">
-                                <x-forms.button class="w-full" wire:click='restoreFromS3'>
-                                    Restore Database from S3
-                                </x-forms.button>
-                                <x-forms.button class="w-full" wire:click='cancelS3Download'>
-                                    Cancel
-                                </x-forms.button>
-                            </div>
-                        </div>
-                    @endif
+                    </div>
                 </div>
             @endif
 
@@ -174,11 +173,9 @@
                 <div>Location: <span x-text="filename ?? 'N/A'"></span> <span x-text="filesize">/ </span></div>
                 <x-forms.button class="w-full my-4" wire:click='runImport'>Restore Backup</x-forms.button>
             </div>
-            @if ($importRunning)
-                <div class="container w-full mx-auto">
-                    <livewire:activity-monitor :activityId="$currentActivityId" header="Database Restore Output" :showWaiting="false" />
-                </div>
-            @endif
+            <div class="container w-full mx-auto" x-show="importRunning">
+                <livewire:activity-monitor :activityId="$currentActivityId" header="Database Restore Output" :showWaiting="false" />
+            </div>
         @else
             <div>Database must be running to restore a backup.</div>
         @endif