Add skeleton loading components for progressive UX

Implement standardized skeleton loading placeholders to reduce perceived
loading time and prevent layout shift during data fetches. These components
match actual content dimensions exactly, improving perceived responsiveness.

New skeleton components in src/components/skeletons/:
- SkeletonTable: Table/grid loading with customizable rows and cells
- SkeletonTableRow: Individual animated skeleton row
- SkeletonChart: Chart/graph loading with bars matching dimensions
- SkeletonStat: Stat card loading with label and value
- SkeletonFormField: Form input loading placeholder
- PageLoadingSkeleton: Convenience wrapper for page-level loading states

Implementation details:
- All skeletons use global 'skeleton-pulse' animation (2s cycle)
- Dimensions match real content to prevent layout shift on arrival
- Marked with aria-hidden and role=presentation for accessibility
- Theme-aware colors using Fluent UI tokens
- Respects prefers-reduced-motion setting

Updates:
- ChartStateWrapper: Uses SkeletonChart instead of spinner
- PageFeedback: Added PageLoadingSkeleton component
- App.tsx: Injects skeleton styles at startup
- Web-Design.md: Added § 8a with loading UX guidance and usage examples

All components tested (22 tests, 100% passing) and linted.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

frontend/src/utils/skeletonStyles.ts

@@ -0,0 +1,43 @@
+/**
+ * Global skeleton animation styles.
+ *
+ * This module injects CSS for skeleton animations into the document.
+ * It must be imported once at app initialization.
+ */
+
+const SKELETON_STYLES = `
+  @keyframes skeleton-pulse {
+    0%, 100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.5;
+    }
+  }
+`;
+
+/**
+ * Inject skeleton animation styles into the document head.
+ * Call this once during app initialization.
+ *
+ * @example
+ * ```tsx
+ * // In main.tsx or App.tsx
+ * injectSkeletonStyles();
+ * ```
+ */
+export function injectSkeletonStyles(): void {
+  if (typeof document === "undefined") {
+    return;
+  }
+
+  // Avoid injecting twice
+  if (document.getElementById("skeleton-styles")) {
+    return;
+  }
+
+  const style = document.createElement("style");
+  style.id = "skeleton-styles";
+  style.textContent = SKELETON_STYLES;
+  document.head.appendChild(style);
+}