feat: add credential loading states with reusable skeleton and spinner components (Closes #70)

frontend/__tests__/loading-states.test.tsx

@@ -0,0 +1,96 @@
+import { render, screen } from '@testing-library/react';
+import { LoadingSpinner } from '../src/components/loading/loading-spinner';
+import { SkeletonCard } from '../src/components/loading/skeleton-card';
+import { SkeletonAnalytics } from '../src/components/loading/skeleton-analytics';
+
+describe('LoadingSpinner', () => {
+  it('renders default spinner', () => {
+    const { container } = render(<LoadingSpinner />);
+    const spinner = container.querySelector('[role="status"]');
+    expect(spinner).toBeInTheDocument();
+  });
+
+  it('renders with label', () => {
+    render(<LoadingSpinner label="Loading..." />);
+    const labels = screen.getAllByText('Loading...');
+    expect(labels.length).toBeGreaterThanOrEqual(1);
+    expect(labels[0]).toBeInTheDocument();
+  });
+
+  it('renders with custom size', () => {
+    const { container } = render(<LoadingSpinner size="sm" />);
+    const spinner = container.querySelector('[role="status"]');
+    expect(spinner).toBeInTheDocument();
+  });
+
+  it('renders with custom className', () => {
+    const { container } = render(<LoadingSpinner className="my-4" />);
+    const spinner = container.querySelector('[role="status"]');
+    expect(spinner).toBeInTheDocument();
+  });
+
+  it('has sr-only text for accessibility', () => {
+    render(<LoadingSpinner />);
+    expect(screen.getByText('Loading...')).toBeInTheDocument();
+  });
+
+  it('has aria-live polite for screen readers', () => {
+    render(<LoadingSpinner label="fetching data" />);
+    const statuses = screen.getAllByRole('status');
+    expect(statuses.length).toBeGreaterThanOrEqual(1);
+    expect(statuses[0]).toHaveAttribute('aria-live', 'polite');
+  });
+});
+
+describe('SkeletonCard', () => {
+  it('renders default skeleton with 3 cards', () => {
+    const { container } = render(<SkeletonCard />);
+    const skeleton = screen.getByTestId('skeleton-card');
+    expect(skeleton).toBeInTheDocument();
+    // Should have 3 skeleton card items
+    const items = container.querySelectorAll('.rounded-lg');
+    expect(items.length).toBeGreaterThanOrEqual(3);
+  });
+
+  it('renders custom count', () => {
+    const { container } = render(<SkeletonCard count={5} />);
+    const items = container.querySelectorAll('.rounded-lg');
+    expect(items.length).toBeGreaterThanOrEqual(5);
+  });
+
+  it('has aria-busy true', () => {
+    render(<SkeletonCard />);
+    const skeleton = screen.getByTestId('skeleton-card');
+    expect(skeleton).toHaveAttribute('aria-busy', 'true');
+  });
+
+  it('has accessible label', () => {
+    render(<SkeletonCard label="Loading vault" />);
+    const skeleton = screen.getByTestId('skeleton-card');
+    expect(skeleton).toHaveAttribute('aria-label', 'Loading vault');
+  });
+
+  it('has sr-only text', () => {
+    render(<SkeletonCard />);
+    expect(screen.getByText('Loading credentials...')).toBeInTheDocument();
+  });
+});
+
+describe('SkeletonAnalytics', () => {
+  it('renders analytics skeleton', () => {
+    const { container } = render(<SkeletonAnalytics />);
+    const skeleton = screen.getByTestId('skeleton-analytics');
+    expect(skeleton).toBeInTheDocument();
+  });
+
+  it('has aria-busy true', () => {
+    render(<SkeletonAnalytics />);
+    const skeleton = screen.getByTestId('skeleton-analytics');
+    expect(skeleton).toHaveAttribute('aria-busy', 'true');
+  });
+
+  it('has sr-only text', () => {
+    render(<SkeletonAnalytics />);
+    expect(screen.getByText('Loading analytics dashboard...')).toBeInTheDocument();
+  });
+});

frontend/src/components/credential-analytics-dashboard.tsx

@@ -1,3 +1,4 @@
+import { SkeletonAnalytics } from './loading/skeleton-analytics';
 import { useState, useEffect } from 'react';
 import {
   LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer,
@@ -98,11 +99,7 @@ export function CredentialAnalyticsDashboard() {
   }, []);
 
   if (loading || !data) {
-    return (
-      <div className="flex justify-center items-center h-64">
-        <div className="text-green-200">Loading analytics...</div>
-      </div>
-    );
+    return <SkeletonAnalytics />;
   }
 
   const pieData = [

frontend/src/components/credential-edit-modal.tsx

@@ -1,8 +1,9 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { X, Edit2, CheckCircle } from 'lucide-react';
+import { LoadingSpinner } from './loading/loading-spinner';
 
 interface Credential {
   id: string;
@@ -26,25 +27,35 @@ export function CredentialEditModal({
 }: CredentialEditModalProps) {
   const [vaccineType, setVaccineType] = useState('');
   const [vaccinationDate, setVaccinationDate] = useState('');
+  const [isSaving, setIsSaving] = useState(false);
 
   useEffect(() => {
     if (credential && isOpen) {
       setVaccineType(credential.vaccineType);
       setVaccinationDate(credential.vaccinationDate);
+      setIsSaving(false);
     }
   }, [credential, isOpen]);
 
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    if (credential) {
-      onSave({
-        ...credential,
-        vaccineType,
-        vaccinationDate,
-      });
-      onClose();
-    }
-  };
+  const handleSubmit = useCallback(
+    (e: React.FormEvent) => {
+      e.preventDefault();
+      if (credential && !isSaving) {
+        setIsSaving(true);
+        // Simulate async save
+        setTimeout(() => {
+          onSave({
+            ...credential,
+            vaccineType,
+            vaccinationDate,
+          });
+          setIsSaving(false);
+          onClose();
+        }, 800);
+      }
+    },
+    [credential, isSaving, onSave, onClose, vaccineType, vaccinationDate]
+  );
 
   if (!credential) return null;
 
@@ -90,7 +101,8 @@ export function CredentialEditModal({
                   type="text"
                   value={vaccineType}
                   onChange={(e) => setVaccineType(e.target.value)}
-                  className="w-full bg-white/10 border border-white/20 rounded p-3 sm:p-2 text-white outline-none focus:border-green-400 text-base sm:text-sm"
+                  disabled={isSaving}
+                  className="w-full bg-white/10 border border-white/20 rounded p-3 sm:p-2 text-white outline-none focus:border-green-400 text-base sm:text-sm disabled:opacity-50"
                   required
                 />
               </div>
@@ -100,7 +112,8 @@ export function CredentialEditModal({
                   type="text"
                   value={vaccinationDate}
                   onChange={(e) => setVaccinationDate(e.target.value)}
-                  className="w-full bg-white/10 border border-white/20 rounded p-3 sm:p-2 text-white outline-none focus:border-green-400 text-base sm:text-sm"
+                  disabled={isSaving}
+                  className="w-full bg-white/10 border border-white/20 rounded p-3 sm:p-2 text-white outline-none focus:border-green-400 text-base sm:text-sm disabled:opacity-50"
                   required
                 />
               </div>
@@ -109,16 +122,24 @@ export function CredentialEditModal({
                 <button
                   type="button"
                   onClick={onClose}
-                  className="px-4 py-3 sm:py-2 bg-white/10 text-white rounded hover:bg-white/20 transition-colors touch-manipulation order-2 sm:order-1"
+                  disabled={isSaving}
+                  className="px-4 py-3 sm:py-2 bg-white/10 text-white rounded hover:bg-white/20 transition-colors touch-manipulation order-2 sm:order-1 disabled:opacity-50 disabled:cursor-not-allowed"
                 >
                   Cancel
                 </button>
                 <button
                   type="submit"
-                  className="px-4 py-3 sm:py-2 bg-green-500 text-white rounded hover:bg-green-600 active:bg-green-700 transition-colors flex items-center justify-center gap-2 touch-manipulation order-1 sm:order-2"
+                  disabled={isSaving}
+                  className="px-4 py-3 sm:py-2 bg-green-500 text-white rounded hover:bg-green-600 active:bg-green-700 transition-colors flex items-center justify-center gap-2 touch-manipulation order-1 sm:order-2 disabled:opacity-50 disabled:cursor-not-allowed min-w-[140px]"
                 >
-                  <CheckCircle className="w-4 h-4" />
-                  Save Changes
+                  {isSaving ? (
+                    <LoadingSpinner size="sm" label="Saving..." />
+                  ) : (
+                    <>
+                      <CheckCircle className="w-4 h-4" />
+                      Save Changes
+                    </>
+                  )}
                 </button>
               </div>
             </form>

frontend/src/components/health-credential-vault.tsx

@@ -7,6 +7,7 @@ import { AnimatedProgress, SuccessOverlay, SuccessToast } from './animations';
 import { DeletionConfirmationModal } from './deletion-confirmation-modal';
 import { CredentialDetailsModal } from './credential-details-modal';
 import { CredentialEditModal } from './credential-edit-modal';
+import { SkeletonCard } from './loading/skeleton-card';
 import { useAccessibility } from '@/contexts/AccessibilityContext';
 
 interface HealthCredentialVaultProps {
@@ -22,6 +23,7 @@ interface Credential {
 
 export function HealthCredentialVault({ walletAddress }: HealthCredentialVaultProps) {
   const [credentials, setCredentials] = useState<Credential[]>([]);
+  const [initialLoading, setInitialLoading] = useState(true);
   const [uploadProgress, setUploadProgress] = useState<number | null>(null);
   const [showSuccess, setShowSuccess] = useState(false);
   const [toast, setToast] = useState<{ show: boolean; title: string; description?: string }>({
@@ -39,6 +41,14 @@ export function HealthCredentialVault({ walletAddress }: HealthCredentialVaultPr
   const { announceToScreenReader } = useAccessibility();
   const fileInputRef = useRef<HTMLInputElement>(null);
 
+  useEffect(() => {
+    // Simulate initial loading of credentials from storage
+    const timer = setTimeout(() => {
+      setInitialLoading(false);
+    }, 1200);
+    return () => clearTimeout(timer);
+  }, []);
+
   const simulateUpload = useCallback((fileName: string) => {
     setUploadProgress(0);
     announceToScreenReader('Uploading file...');
@@ -210,7 +220,9 @@ export function HealthCredentialVault({ walletAddress }: HealthCredentialVaultPr
       {/* Credentials list */}
       <div className="space-y-3 sm:space-y-4" role="list" aria-label="Uploaded credentials">
         <AnimatePresence mode="popLayout">
-          {credentials.length === 0 ? (
+          {initialLoading ? (
+            <SkeletonCard count={3} label="Loading credentials" />
+          ) : credentials.length === 0 ? (
             <motion.div
               key="empty"
               className="text-center py-6 sm:py-8 text-green-200"

frontend/src/components/loading/index.ts

@@ -0,0 +1,3 @@
+export { LoadingSpinner } from './loading-spinner';
+export { SkeletonCard } from './skeleton-card';
+export { SkeletonAnalytics } from './skeleton-analytics';

frontend/src/components/loading/loading-spinner.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import { motion } from 'framer-motion';
+
+interface LoadingSpinnerProps {
+  size?: 'sm' | 'md' | 'lg';
+  label?: string;
+  className?: string;
+}
+
+const SIZE_CLASSES = {
+  sm: 'w-4 h-4 border-2',
+  md: 'w-8 h-8 border-[3px]',
+  lg: 'w-12 h-12 border-4',
+} as const;
+
+export function LoadingSpinner({ size = 'md', label, className = '' }: LoadingSpinnerProps) {
+  const spinner = (
+    <motion.div
+      className={`${SIZE_CLASSES[size]} rounded-full border-green-500/20 border-t-green-400 border-r-green-400 inline-block ${className}`}
+      aria-label={label || 'Loading'}
+      aria-live="polite"
+      animate={{ rotate: 360 }}
+      transition={{ duration: 0.8, repeat: Infinity, ease: 'linear' }}
+    >
+      <span className="sr-only">{label || 'Loading...'}</span>
+    </motion.div>
+  );
+
+  if (!label) return (
+    <div role="status" aria-label="Loading" aria-live="polite">
+      {spinner}
+    </div>
+  );
+
+  return (
+    <div className="flex items-center gap-3" role="status" aria-live="polite">
+      {spinner}
+      <span className="text-sm text-green-200">{label}</span>
+    </div>
+  );
+}
+
+export { LoadingSpinner as default };

frontend/src/components/loading/skeleton-analytics.tsx

@@ -0,0 +1,68 @@
+'use client';
+
+const SkeletonPulse = ({ className }: { className: string }) => (
+  <div className={`relative overflow-hidden rounded bg-white/10 ${className}`}>
+    <div className="absolute inset-0 animate-pulse bg-gradient-to-r from-transparent via-white/10 to-transparent" />
+  </div>
+);
+
+export function SkeletonAnalytics() {
+  return (
+    <div className="space-y-4 sm:space-y-6" role="status" aria-label="Loading analytics" aria-busy="true" data-testid="skeleton-analytics">
+      {/* Header */}
+      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 sm:gap-4">
+        <SkeletonPulse className="h-7 sm:h-8 w-48 sm:w-64" />
+        <div className="flex gap-2 w-full sm:w-auto">
+          <SkeletonPulse className="h-10 sm:h-9 w-28 sm:w-32" />
+          <SkeletonPulse className="h-10 sm:h-9 w-32 sm:w-36" />
+        </div>
+      </div>
+
+      {/* Status bar */}
+      <SkeletonPulse className="h-10 sm:h-12 w-full" />
+
+      {/* Stat cards */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3 sm:gap-4">
+        {[1, 2, 3].map((i) => (
+          <div key={i} className="bg-white/5 rounded-lg p-3 sm:p-4 border border-white/10">
+            <SkeletonPulse className="h-3 sm:h-4 w-28 sm:w-36 mb-2 sm:mb-3" />
+            <SkeletonPulse className="h-8 sm:h-9 w-16 sm:w-20 mb-2" />
+            <SkeletonPulse className="h-3 sm:h-3.5 w-36 sm:w-44" />
+          </div>
+        ))}
+      </div>
+
+      {/* Charts */}
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 sm:gap-6">
+        <div className="bg-white/5 rounded-lg p-3 sm:p-4 border border-white/10 lg:col-span-2">
+          <SkeletonPulse className="h-5 sm:h-6 w-40 sm:w-52 mb-3 sm:mb-4" />
+          <SkeletonPulse className="h-48 sm:h-64 w-full" />
+        </div>
+        <div className="bg-white/5 rounded-lg p-3 sm:p-4 border border-white/10">
+          <SkeletonPulse className="h-5 sm:h-6 w-32 sm:w-40 mb-3 sm:mb-4" />
+          <SkeletonPulse className="h-48 sm:h-64 w-full rounded-full" />
+        </div>
+      </div>
+
+      {/* Activity feed */}
+      <div className="bg-white/5 rounded-lg p-3 sm:p-4 border border-white/10">
+        <SkeletonPulse className="h-5 sm:h-6 w-36 sm:w-44 mb-3 sm:mb-4" />
+        <div className="space-y-2 sm:space-y-3">
+          {[1, 2, 3].map((i) => (
+            <div key={i} className="flex items-start gap-3 sm:gap-4">
+              <SkeletonPulse className="w-8 h-8 sm:w-10 sm:h-10 rounded-full flex-shrink-0" />
+              <div className="flex-1 space-y-1.5">
+                <SkeletonPulse className="h-3 sm:h-4 w-3/4 max-w-[240px]" />
+                <SkeletonPulse className="h-2.5 sm:h-3 w-1/3 max-w-[120px]" />
+              </div>
+              <SkeletonPulse className="h-5 sm:h-6 w-14 sm:w-16 rounded-full" />
+            </div>
+          ))}
+        </div>
+      </div>
+      <span className="sr-only">Loading analytics dashboard...</span>
+    </div>
+  );
+}
+
+export { SkeletonAnalytics as default };