feat: design system skeleton loaders component

frontend/src/components/ui/Skeleton.css

@@ -0,0 +1,84 @@
+.skeleton {
+  display: block;
+  background-color: var(--skeleton-bg, rgba(0, 0, 0, 0.11));
+  position: relative;
+  overflow: hidden;
+}
+
+/* Dark mode fallback */
+@media (prefers-color-scheme: dark) {
+  .skeleton {
+    background-color: var(--skeleton-bg, rgba(255, 255, 255, 0.13));
+  }
+}
+
+/* Variants */
+.skeleton--text {
+  height: auto;
+  transform: scale(1, 0.6);
+  border-radius: 4px;
+  transform-origin: 0 50%;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.skeleton--text:empty::before {
+  content: '\00a0';
+}
+
+.skeleton--circular {
+  border-radius: 50%;
+}
+
+.skeleton--rounded {
+  border-radius: 8px;
+}
+
+.skeleton--rectangular {
+  border-radius: 0;
+}
+
+/* Animations */
+.skeleton--pulse {
+  animation: skeleton-pulse 1.5s ease-in-out 0.5s infinite;
+}
+
+@keyframes skeleton-pulse {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.skeleton--wave::after {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  content: '';
+  animation: skeleton-wave 1.6s linear 0.5s infinite;
+  transform: translateX(-100%);
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
+}
+
+@keyframes skeleton-wave {
+  0% {
+    transform: translateX(-100%);
+  }
+  50% {
+    transform: translateX(100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+.skeleton--none {
+  animation: none;
+}

frontend/src/components/ui/Skeleton.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './Skeleton.css';
+
+/**
+ * Skeleton Loader Component
+ *
+ * Used to indicate loading state while content is being fetched.
+ * Provides a shimmering animation effect.
+ */
+export const Skeleton = ({
+  variant = 'text',
+  width,
+  height,
+  className = '',
+  animation = 'wave',
+  ...props
+}) => {
+  const classes = ['skeleton', `skeleton--${variant}`, `skeleton--${animation}`, className]
+    .filter(Boolean)
+    .join(' ');
+
+  const style = {
+    ...(width && { width: typeof width === 'number' ? `${width}px` : width }),
+    ...(height && { height: typeof height === 'number' ? `${height}px` : height }),
+  };
+
+  return (
+    <span className={classes} style={style} aria-hidden="true" data-testid="skeleton" {...props} />
+  );
+};
+
+Skeleton.propTypes = {
+  variant: PropTypes.oneOf(['text', 'circular', 'rectangular', 'rounded']),
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  className: PropTypes.string,
+  animation: PropTypes.oneOf(['wave', 'pulse', 'none']),
+};
+
+export default Skeleton;

frontend/src/components/ui/Skeleton.test.jsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { Skeleton } from './Skeleton';
+
+describe('Skeleton', () => {
+  it('renders correctly with default props', () => {
+    const { getByTestId } = render(<Skeleton />);
+    const element = getByTestId('skeleton');
+    expect(element.className).toContain('skeleton');
+    expect(element.className).toContain('skeleton--text');
+    expect(element.className).toContain('skeleton--wave');
+  });
+
+  it('applies the correct variant class', () => {
+    const { getByTestId } = render(<Skeleton variant="circular" />);
+    const element = getByTestId('skeleton');
+    expect(element.className).toContain('skeleton--circular');
+  });
+
+  it('applies the correct animation class', () => {
+    const { getByTestId } = render(<Skeleton animation="pulse" />);
+    const element = getByTestId('skeleton');
+    expect(element.className).toContain('skeleton--pulse');
+  });
+
+  it('applies inline width and height correctly when strings', () => {
+    const { getByTestId } = render(<Skeleton width="100%" height="2rem" />);
+    const element = getByTestId('skeleton');
+    expect(element.style.width).toBe('100%');
+    expect(element.style.height).toBe('2rem');
+  });
+
+  it('applies inline width and height correctly when numbers', () => {
+    const { getByTestId } = render(<Skeleton width={100} height={50} />);
+    const element = getByTestId('skeleton');
+    expect(element.style.width).toBe('100px');
+    expect(element.style.height).toBe('50px');
+  });
+
+  it('accepts additional class names', () => {
+    const { getByTestId } = render(<Skeleton className="custom-class" />);
+    const element = getByTestId('skeleton');
+    expect(element.className).toContain('custom-class');
+  });
+});

frontend/src/components/ui/index.js

@@ -18,3 +18,4 @@ export {
   DEFAULT_PAGE_SIZE_OPTIONS,
 } from './Pagination.jsx';
 export { Tooltip, Popover, PLACEMENTS } from './Tooltip.jsx';
+export { Skeleton } from './Skeleton.jsx';