feat: implement skeleton loading screens for all views (Phase 3.5)

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>
This commit is contained in:
2026-02-11 22:17:10 -05:00
parent 2cb815f921
commit ad3934860e
7 changed files with 657 additions and 14 deletions
@@ -6,7 +6,7 @@
*/
import { K8s } from '@kinvolk/headlamp-plugin/lib';
import { Link, Loader } from '@kinvolk/headlamp-plugin/lib/CommonComponents';
import { Link } from '@kinvolk/headlamp-plugin/lib/CommonComponents';
import {
NameValueTable,
SectionBox,
@@ -23,6 +23,7 @@ import { canDecryptSecrets } from '../lib/rbac';
import { SealedSecret } from '../lib/SealedSecretCRD';
import { SealedSecretScope } from '../types';
import { DecryptDialog } from './DecryptDialog';
import { SealedSecretDetailSkeleton } from './LoadingSkeletons';
/**
* Format scope for display
@@ -61,8 +62,9 @@ export function SealedSecretDetail() {
}
}, [namespace]);
// Show loading skeleton while data is being fetched
if (!sealedSecret) {
return <Loader title="Loading SealedSecret..." />;
return <SealedSecretDetailSkeleton />;
}
// Memoize callbacks to prevent re-renders