preview while processing
This commit is contained in:
parent
8d1faefb45
commit
46d26ce240
@ -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,
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
|||||||
@ -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"
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user