Created comprehensive skeleton components providing visual feedback during
data loading. This improves perceived performance and provides a better
user experience with consistent loading states across all views.
Changes:
- NEW: src/components/LoadingSkeletons.tsx (+105 lines)
- SealedSecretListSkeleton - 5 placeholder rows
- SealedSecretDetailSkeleton - title + sections + actions
- SealingKeysListSkeleton - 2 certificate placeholders
- CertificateInfoSkeleton - metadata lines
- ControllerHealthSkeleton - chip + info layout
- All use wave animation and realistic layouts
- UPDATED: SealedSecretList.tsx
- Use loading state from useList() hook
- Show skeleton during data fetch
- Smooth transition to real data
- UPDATED: SealedSecretDetail.tsx
- Replace Headlamp Loader with custom skeleton
- Better layout matching
- No layout shift
- UPDATED: SealingKeysView.tsx
- Add loading state detection
- Show skeleton for certificates
- Professional loading UX
- UPDATED: ControllerStatus.tsx
- Replace CircularProgress with skeleton
- Match chip + info layout
- Consistent with other components
Benefits:
- Improved perceived performance
- Reduced layout shift (skeletons match real components)
- Consistent loading experience (wave animation)
- Better user feedback during data loading
Build: 356.44 kB (98.01 kB gzipped) - +1.52 kB (+0.4%)
Time: 4.78s
Progress: 11/14 phases complete (79%)
Generated with [Claude Code](https://claude.ai/code)
via [Happy](https://happy.engineering)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Co-Authored-By: Happy <yesreply@happy.engineering>
