rosslh/coolify
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: use server-side @if instead of client-side x-show for activity monitor

Browse source 
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>
This commit is contained in:
Andras Bacsai 2025-11-02 19:11:39 +01:00
parent d37378ec02
commit c758de9e7c
1 changed files with 19 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
resources/views/livewire/project/database/import.blade.php
View file

@ -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