From c758de9e7c859f4cb8ecb2665888a782bfd281a2 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <5845193+andrasbacsai@users.noreply.github.com>
Date: Sun, 2 Nov 2025 19:11:39 +0100
Subject: [PATCH] fix: use server-side @if instead of client-side x-show for
 activity monitor
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The ActivityMonitor component was never rendered because:
1. x-show hides elements with CSS but doesn't affect DOM rendering
2. @if on ActivityMonitor evaluated to false on initial page load
3. When s3DownloadInProgress became true, x-show showed the div
4. But ActivityMonitor was never in the DOM to receive events
5. dispatch('activityMonitor') event was lost

Changed to use @if exclusively for all S3 download UI states:
- Button visibility controlled by @if instead of x-show
- Download progress section controlled by @if
- Downloaded file section controlled by @if
- Livewire automatically re-renders when state changes
- ActivityMonitor is properly added to DOM and receives events

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

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

diff --git a/resources/views/livewire/project/database/import.blade.php b/resources/views/livewire/project/database/import.blade.php
index cc3032019..bc6f884d7 100644
--- a/resources/views/livewire/project/database/import.blade.php
+++ b/resources/views/livewire/project/database/import.blade.php
@@ -138,25 +138,28 @@
                         </x-forms.button>
                     </div>
 
-                    <div x-show="s3FileSize && !s3DownloadedFile && !s3DownloadInProgress" class="pt-2">
-                        <div class="text-sm">File found in S3 ({{ formatBytes($s3FileSize ?? 0) }})</div>
-                        <div class="flex gap-2 pt-2">
-                            <x-forms.button class="w-full" wire:click='downloadFromS3'>
-                                Download & Prepare for Restore
-                            </x-forms.button>
+                    @if ($s3FileSize && !$s3DownloadedFile && !$s3DownloadInProgress)
+                        <div class="pt-2">
+                            <div class="text-sm">File found in S3 ({{ formatBytes($s3FileSize ?? 0) }})</div>
+                            <div class="flex gap-2 pt-2">
+                                <x-forms.button class="w-full" wire:click='downloadFromS3'>
+                                    Download & Prepare for Restore
+                                </x-forms.button>
+                            </div>
                         </div>
-                    </div>
+                    @endif
 
-                    <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>
-                        @if ($s3DownloadInProgress)
+                    @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 wire:key="s3-download-{{ $resource->uuid }}" header="S3 Download Progress"
                                 :showWaiting="false" />
-                        @endif
-                    </div>
+                        </div>
+                    @endif
 
-                    <div x-show="s3DownloadedFile && !s3DownloadInProgress" class="pt-2">
+                    @if ($s3DownloadedFile && !$s3DownloadInProgress)
+                        <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'>
@@ -166,7 +169,8 @@
                                 Cancel
                             </x-forms.button>
                         </div>
-                    </div>
+                        </div>
+                    @endif
                 </div>
             @endif