Joseph.Rawlings
f7766b6d67
- 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
26 lines
1.1 KiB
PHP
26 lines
1.1 KiB
PHP
{{-- Skeleton loader for invoice card --}}
|
|
<div class="bg-gradient-to-br from-background-secondary/50 to-background-secondary/30 border border-neutral/50 p-6 rounded-xl shadow-lg
|
|
flex flex-col md:flex-row items-start md:items-center justify-between gap-4 animate-pulse">
|
|
|
|
<div class="flex items-start md:items-center gap-4 flex-grow">
|
|
{{-- Icon skeleton --}}
|
|
<div class="p-3 rounded-full flex-shrink-0 bg-blue-500/20 w-12 h-12"></div>
|
|
|
|
<div class="flex flex-col flex-grow">
|
|
{{-- Title skeleton --}}
|
|
<div class="h-6 bg-neutral/20 rounded-lg w-40 mb-2"></div>
|
|
{{-- Amount and date skeleton --}}
|
|
<div class="h-4 bg-neutral/20 rounded w-56 mb-1"></div>
|
|
{{-- Due date skeleton --}}
|
|
<div class="h-3 bg-neutral/20 rounded w-36"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-3 flex-shrink-0 mt-3 md:mt-0">
|
|
{{-- Status badge skeleton --}}
|
|
<div class="h-7 bg-neutral/20 rounded-full w-20"></div>
|
|
{{-- Arrow skeleton --}}
|
|
<div class="h-6 w-6 bg-neutral/20 rounded"></div>
|
|
</div>
|
|
</div>
|