From 7408a413ffffc4dca258829b87e79d31468030c5 Mon Sep 17 00:00:00 2001
From: Lizandro <lizandrogd@gmail.com>
Date: Wed, 29 Jul 2026 20:22:57 +0000
Subject: [PATCH] fix: mostrar indicador de carga al subir imagen en el chat
 web
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 .../views/livewire/chat/public-chat.blade.php | 25 ++++++++++---------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/resources/views/livewire/chat/public-chat.blade.php b/resources/views/livewire/chat/public-chat.blade.php
index 5212e14..0f328c5 100755
--- a/resources/views/livewire/chat/public-chat.blade.php
+++ b/resources/views/livewire/chat/public-chat.blade.php
@@ -161,7 +161,10 @@
     {{-- ══ PASO 3: Interfaz de chat ══ --}}
     @else
         <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 --}}
             <div class="bg-[#202c33] shadow-md flex-shrink-0 safe-top safe-left safe-right">
@@ -614,18 +617,16 @@
             {{-- Input + upload --}}
             @if ($estadoConv !== 'cerrada')
                 <div class="bg-[#202c33] flex-shrink-0 safe-bottom safe-left safe-right" style="flex-shrink:0;">
-                    {{-- Indicador de procesando imagen --}}
-                    @if ($procesandoImagen)
-                        <div class="px-4 pt-2 pb-1">
-                            <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">
-                                    <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>
-                                </svg>
-                                Analizando comprobante con IA...
-                            </div>
+                    {{-- Indicador subiendo / analizando imagen --}}
+                    <div x-show="uploading" x-cloak class="px-4 pt-2 pb-1">
+                        <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">
+                                <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>
+                            </svg>
+                            Subiendo imagen...
                         </div>
-                    @endif
+                    </div>
                     <div class="flex items-end gap-2 px-3 py-2.5">
                         {{-- 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;">