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

fix: use x-show for S3 download message to hide reactively on completion

Browse source 
Problem:
- "Downloading from S3..." message stayed visible after download finished
- @if conditional only evaluates on server-side render, not reactive
- Event listener sets s3DownloadInProgress=false but view doesn't update

Solution:
- Wrap outer container with x-show="s3DownloadInProgress" for reactive hiding
- Keep @if for activity-monitor to control when it's rendered in DOM
- Message and success state now toggle reactively via Alpine.js entangle
- When download finishes, message hides immediately without page refresh

🤖 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 17:15:04 +01:00
parent f2a017a063
commit fcc52f943c
1 changed files with 17 additions and 17 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

@ -147,25 +147,25 @@
</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>
<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)
<livewire:activity-monitor wire:key="s3-download-{{ $resource->uuid }}" header="S3 Download Progress" :showWaiting="false" />
@endif
</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