Consistent Skeleton Loading Across All List Pages

Released in v0.1.66

Overview

All major list pages in the dashboard now use skeleton card animations during data loading, replacing the previous inconsistency where some pages showed a bare spinner with a text label.

This applies to:

• Deduction Claims Index — updated in v0.1.66
• Properties List — skeleton cards (existing)
• Tenancies List — skeleton cards (existing)
• Check-Out List — skeleton cards (existing)

What skeleton loading means for users

Rather than seeing a spinning icon and waiting for content to "pop in", the UI now renders placeholder shapes that mirror the real content layout. This technique — sometimes called a skeleton screen — gives the page a sense of immediate responsiveness and reduces the perceived load time.

On the Deduction Claims Index, this means:

1. When you navigate to /dashboard/deductions, 3–4 skeleton rows appear instantly.
2. Each skeleton row matches the width, height, and shape of a real deduction claim entry.
3. As data loads, the skeletons are smoothly replaced by the actual claim cards.

Consistency across the dashboard

Every list-based page in the dashboard now follows the same loading pattern, using the shared SkeletonCard component. This means:

• No page shows a full-page spinner with a text label.
• Loading states look and behave the same regardless of which section of the app you navigate to.
• The loading experience is predictable and professional, particularly on the financially critical Deductions section.

Technical note

Skeleton cards are rendered using the SkeletonCard component pattern, first established in work-queue.tsx. The Deduction Claims Index was updated to adopt this same pattern, removing the Loader2-based spinner that was the last remaining inconsistency across list pages.