Chris Farhood
ad3934860e
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>
112 lines
3.2 KiB
TypeScript
112 lines
3.2 KiB
TypeScript
/**
|
|
* Loading Skeleton Components
|
|
*
|
|
* Provides visual feedback during data loading with skeleton screens
|
|
* to improve perceived performance and user experience.
|
|
*/
|
|
|
|
import { Box, Skeleton } from '@mui/material';
|
|
import React from 'react';
|
|
|
|
/**
|
|
* Skeleton for SealedSecrets list view
|
|
*
|
|
* Shows placeholder rows while data is loading
|
|
*/
|
|
export function SealedSecretListSkeleton() {
|
|
return (
|
|
<Box p={2}>
|
|
{[1, 2, 3, 4, 5].map(i => (
|
|
<Skeleton
|
|
key={i}
|
|
variant="rectangular"
|
|
height={60}
|
|
sx={{ mb: 1, borderRadius: 1 }}
|
|
animation="wave"
|
|
/>
|
|
))}
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Skeleton for SealedSecret detail view
|
|
*
|
|
* Shows placeholder sections while resource is loading
|
|
*/
|
|
export function SealedSecretDetailSkeleton() {
|
|
return (
|
|
<Box p={3}>
|
|
{/* Title */}
|
|
<Skeleton variant="text" width="40%" height={40} sx={{ mb: 3 }} animation="wave" />
|
|
|
|
{/* Metadata section */}
|
|
<Skeleton variant="rectangular" height={200} sx={{ mb: 2, borderRadius: 1 }} animation="wave" />
|
|
|
|
{/* Encrypted data section */}
|
|
<Skeleton variant="rectangular" height={150} sx={{ mb: 2, borderRadius: 1 }} animation="wave" />
|
|
|
|
{/* Actions section */}
|
|
<Box sx={{ display: 'flex', gap: 2 }}>
|
|
<Skeleton variant="rectangular" width={120} height={36} sx={{ borderRadius: 1 }} animation="wave" />
|
|
<Skeleton variant="rectangular" width={120} height={36} sx={{ borderRadius: 1 }} animation="wave" />
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Skeleton for sealing keys list view
|
|
*
|
|
* Shows placeholder for certificate information
|
|
*/
|
|
export function SealingKeysListSkeleton() {
|
|
return (
|
|
<Box p={2}>
|
|
{[1, 2].map(i => (
|
|
<Box key={i} sx={{ mb: 3 }}>
|
|
<Skeleton variant="text" width="30%" height={32} sx={{ mb: 1 }} animation="wave" />
|
|
<Skeleton variant="rectangular" height={100} sx={{ borderRadius: 1, mb: 1 }} animation="wave" />
|
|
<Box sx={{ display: 'flex', gap: 1 }}>
|
|
<Skeleton variant="rectangular" width={100} height={28} sx={{ borderRadius: 1 }} animation="wave" />
|
|
<Skeleton variant="rectangular" width={100} height={28} sx={{ borderRadius: 1 }} animation="wave" />
|
|
</Box>
|
|
</Box>
|
|
))}
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Skeleton for certificate information
|
|
*
|
|
* Shows placeholder for certificate metadata
|
|
*/
|
|
export function CertificateInfoSkeleton() {
|
|
return (
|
|
<Box>
|
|
<Skeleton variant="text" width="60%" animation="wave" />
|
|
<Skeleton variant="text" width="40%" animation="wave" />
|
|
<Skeleton variant="text" width="50%" animation="wave" />
|
|
<Skeleton variant="text" width="45%" animation="wave" />
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Skeleton for controller health status
|
|
*
|
|
* Shows placeholder for health check information
|
|
*/
|
|
export function ControllerHealthSkeleton() {
|
|
return (
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
|
|
<Skeleton variant="circular" width={40} height={40} animation="wave" />
|
|
<Box sx={{ flex: 1 }}>
|
|
<Skeleton variant="text" width="40%" animation="wave" />
|
|
<Skeleton variant="text" width="60%" animation="wave" />
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|