loader export prima nota

app/Http/Livewire/Record.php

@@ -666,7 +666,12 @@ class Record extends Component
 
     public function exportWithDateRange()
     {
-        // Real-time validation for email fields
+
+        $this->isExporting = true;
+        $this->emit('$refresh'); // This forces Livewire to re-render
+
+        // Add a small delay to allow the view to update
+        usleep(100000);
         if ($this->sendViaEmail) {
             $this->validate([
                 'exportEmailAddress' => 'required|email',
@@ -689,7 +694,7 @@ class Record extends Component
             }
         } catch (\Illuminate\Validation\ValidationException $e) {
             $this->isExporting = false;
-            throw $e; // Re-throw validation exceptions to show field errors
+            throw $e;
         } catch (\Exception $e) {
             $this->isExporting = false;
             Log::error('Export error: ' . $e->getMessage());
@@ -701,6 +706,7 @@ class Record extends Component
             }
         } finally {
             $this->isExporting = false;
+            $this->emit('export-complete');
             $this->emit('hide-export-modal');
         }
     }
@@ -721,7 +727,7 @@ class Record extends Component
         return implode(', ', $causals);
     }
 
-        public function updatedExportFromDate()
+    public function updatedExportFromDate()
     {
         $this->updateEmailSubject();
     }

resources/views/livewire/records.blade.php

@@ -326,18 +326,17 @@
             </div>
             <div class="modal-footer" style="background-color: #FFF!important;">
                 <button type="button" class="btn--ui lightGrey me-2" data-bs-dismiss="modal">ANNULLA</button>
-                <button type="button" class="btn--ui primary" wire:click="exportWithDateRange" @if($isExporting) disabled @endif>
-                    @if($isExporting)
-                        <div class="d-flex align-items-center">
-                            <div class="spinner-border spinner-border-sm me-2" role="status">
-                                <span class="visually-hidden">Loading...</span>
-                            </div>
-                            <span id="exportButtonText">ELABORAZIONE...</span>
+                <button type="button" class="btn--ui primary" onclick="handleExportClick()" id="exportButton">
+                    <span id="loadingState" style="display: none;">
+                        <div class="spinner-border spinner-border-sm me-2" role="status">
+                            <span class="visually-hidden">Loading...</span>
                         </div>
-                    @else
-                        <i class="fas fa-download me-1" id="exportIcon"></i>
-                        <span id="exportButtonText">ESPORTA</span>
-                    @endif
+                        ELABORAZIONE...
+                    </span>
+                    <span id="normalState">
+                        <i class="fas fa-download me-1"></i>
+                        ESPORTA
+                    </span>
                 </button>
             </div>
         </div>
@@ -1128,5 +1127,32 @@
             }
         });
 
+
+        function handleExportClick() {
+            showExportLoading();
+
+            @this.call('exportWithDateRange');
+        }
+
+        function showExportLoading() {
+            document.getElementById('normalState').style.display = 'none';
+            document.getElementById('loadingState').style.display = 'inline-flex';
+            document.getElementById('exportButton').disabled = true;
+        }
+
+        function hideExportLoading() {
+            document.getElementById('normalState').style.display = 'inline-flex';
+            document.getElementById('loadingState').style.display = 'none';
+            document.getElementById('exportButton').disabled = false;
+        }
+
+        // Listen for when export is complete
+        Livewire.on('export-complete', function() {
+            hideExportLoading();
+        });
+
+        Livewire.on('hide-export-modal', function() {
+            hideExportLoading();
+        });
     </script>
 @endpush