Enhance layout and components with improved accessibility and performance

- Refactor JavaScript functions to prevent duplicate initializations on navigation
- Add skeleton loaders for invoices and services during loading states
- Introduce a new progress bar component with customizable properties
- Update dropdown and checkbox components for better styling and accessibility
- Improve modal and navigation components with enhanced animations and structure

themes/lucentui/views/invoices/index.blade.php

@@ -31,6 +31,14 @@
     </div>
 
     <div class="grid grid-cols-1 gap-3 md:gap-5">
+        {{-- Skeleton loaders shown during loading --}}
+        <div wire:loading.delay class="space-y-3 md:space-y-5">
+            @for($i = 0; $i < 3; $i++)
+                <x-skeleton.invoice-card />
+            @endfor
+        </div>
+
+        <div wire:loading.remove>
         @forelse ($invoices as $invoice)
             <a href="{{ route('invoices.show', $invoice) }}" wire:navigate class="block">
                 <div class="bg-gradient-to-br from-background-secondary/50 to-background-secondary/30 hover:bg-secondary/25 border border-neutral/50 p-6 rounded-xl shadow-lg
@@ -90,6 +98,7 @@
                 </a>
             </div>
         @endforelse
+        </div>
 
         {{ $invoices->links() }}
     </div>