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:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user