preview while processing

This commit is contained in:
Alexander Gabriel 2026-05-27 00:30:01 +02:00
parent 8d1faefb45
commit 46d26ce240
2 changed files with 10 additions and 6 deletions

View File

@ -50,7 +50,7 @@ class CameraCapture extends Component
{ {
$recentPhotos = PhotoJob::latest()->take(10)->get()->map(fn($job) => [ $recentPhotos = PhotoJob::latest()->take(10)->get()->map(fn($job) => [
'id' => $job->id, 'id' => $job->id,
'url' => Storage::disk('public')->url($job->image_path), 'url' => Storage::disk('public')->url($job->image_path) . '?v=' . $job->updated_at->timestamp,
'status' => $job->status, 'status' => $job->status,
]); ]);

View File

@ -32,12 +32,16 @@
@foreach ($recentPhotos as $photo) @foreach ($recentPhotos as $photo)
<div class="relative"> <div class="relative">
@if ($photo['status'] === 'processing') @if ($photo['status'] === 'processing')
<div class="w-full aspect-square rounded-lg border border-gray-700 bg-gray-900 flex flex-col items-center justify-center gap-2"> <div class="relative w-full aspect-square">
<svg class="w-8 h-8 text-gray-500 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"> <img src="{{ $photo['url'] }}" alt="Photo #{{ $photo['id'] }}"
class="w-full aspect-square object-cover rounded-lg border border-gray-700">
<div class="absolute inset-0 rounded-lg bg-black/50 flex items-center justify-center">
<svg class="w-8 h-8 text-white animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/> <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"/> <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"/>
</svg> </svg>
</div> </div>
</div>
@else @else
<img src="{{ $photo['url'] }}" alt="Photo #{{ $photo['id'] }}" <img src="{{ $photo['url'] }}" alt="Photo #{{ $photo['id'] }}"
class="w-full aspect-square object-cover rounded-lg border border-gray-700 cursor-pointer" class="w-full aspect-square object-cover rounded-lg border border-gray-700 cursor-pointer"