usite-sas-bic/sirpremiumv2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: mostrar indicador de carga al subir imagen en el chat web

Browse Source 
Reemplaza el @if ($procesandoImagen) de PHP (que nunca se veía porque
se activa y desactiva en el mismo request) por un indicador Alpine.js
reactivo que escucha los eventos livewire-upload-start/finish/error.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Lizandro
2026-07-29 20:22:57 +00:00
co-authored by Claude Sonnet 4.6
parent 16315da176
commit 7408a413ff
1 changed files with 13 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/livewire/chat/public-chat.blade.php
+13 -12
View File
@@ -161,7 +161,10 @@
{{-- ══ PASO 3: Interfaz de chat ══ --}} {{-- ══ PASO 3: Interfaz de chat ══ --}}
@else @else
<div class="flex-1 flex flex-col min-h-0 bg-[#0b141a] relative" <div class="flex-1 flex flex-col min-h-0 bg-[#0b141a] relative"
x-data="{ uploading: false }"> x-data="{ uploading: false }"
@livewire-upload-start.window="uploading = true"
@livewire-upload-finish.window="uploading = false"
@livewire-upload-error.window="uploading = false">
{{-- Header --}} {{-- Header --}}
<div class="bg-[#202c33] shadow-md flex-shrink-0 safe-top safe-left safe-right"> <div class="bg-[#202c33] shadow-md flex-shrink-0 safe-top safe-left safe-right">
@@ -614,18 +617,16 @@
{{-- Input + upload --}} {{-- Input + upload --}}
@if ($estadoConv !== 'cerrada') @if ($estadoConv !== 'cerrada')
<div class="bg-[#202c33] flex-shrink-0 safe-bottom safe-left safe-right" style="flex-shrink:0;"> <div class="bg-[#202c33] flex-shrink-0 safe-bottom safe-left safe-right" style="flex-shrink:0;">
{{-- Indicador de procesando imagen --}} {{-- Indicador subiendo / analizando imagen --}}
@if ($procesandoImagen) <div x-show="uploading" x-cloak class="px-4 pt-2 pb-1">
<div class="px-4 pt-2 pb-1"> <div class="flex items-center gap-2 text-[#8696a0] text-xs">
<div class="flex items-center gap-2 text-[#8696a0] text-xs"> <svg class="w-4 h-4 animate-spin text-[#00a884]" fill="none" viewBox="0 0 24 24">
<svg class="w-4 h-4 animate-spin text-[#00a884]" fill="none" viewBox="0 0 24 24"> <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle> <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8z"></path>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8z"></path> </svg>
</svg> Subiendo imagen...
Analizando comprobante con IA...
</div>
</div> </div>
@endif </div>
<div class="flex items-end gap-2 px-3 py-2.5"> <div class="flex items-end gap-2 px-3 py-2.5">
{{-- Botón adjuntar foto --}} {{-- Botón adjuntar foto --}}
<label class="flex-shrink-0 cursor-pointer text-[#8696a0] active:text-[#00a884] transition" style="min-width:44px; min-height:44px; display:flex; align-items:center; justify-content:center;"> <label class="flex-shrink-0 cursor-pointer text-[#8696a0] active:text-[#00a884] transition" style="min-width:44px; min-height:44px; display:flex; align-items:center; justify-content:center;">