From 46d26ce2404c8d8ec4708d6de3cfe7eb02e9a22b Mon Sep 17 00:00:00 2001
From: Alexander Gabriel <alexander.gabriel@digital-infinity.de>
Date: Wed, 27 May 2026 00:30:01 +0200
Subject: [PATCH] preview while processing

---
 app/Livewire/CameraCapture.php                    |  2 +-
 resources/views/livewire/camera-capture.blade.php | 14 +++++++++-----
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/app/Livewire/CameraCapture.php b/app/Livewire/CameraCapture.php
index 2bcbd06..779202f 100644
--- a/app/Livewire/CameraCapture.php
+++ b/app/Livewire/CameraCapture.php
@@ -50,7 +50,7 @@ class CameraCapture extends Component
     {
         $recentPhotos = PhotoJob::latest()->take(10)->get()->map(fn($job) => [
             '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,
         ]);
 
diff --git a/resources/views/livewire/camera-capture.blade.php b/resources/views/livewire/camera-capture.blade.php
index bd663b8..337aeb0 100644
--- a/resources/views/livewire/camera-capture.blade.php
+++ b/resources/views/livewire/camera-capture.blade.php
@@ -32,11 +32,15 @@
                 @foreach ($recentPhotos as $photo)
                     <div class="relative">
                         @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">
-                                <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">
-                                    <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"/>
-                                </svg>
+                            <div class="relative w-full aspect-square">
+                                <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"/>
+                                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"/>
+                                    </svg>
+                                </div>
                             </div>
                         @else
                             <img src="{{ $photo['url'] }}" alt="Photo #{{ $photo['id'] }}"