Description

Create consistent loading states for the application, specifically for encryption/decryption operations.

Requirements

• Skeleton screens for editor during initial load
• Spinner for encryption/decryption actions
• Progress feedback for file processing
• Shimmer effects for content placeholders
• Loading states for each major operation
• Accessible loading announcements
• Must indicate what operation is happening

Acceptance Criteria

• Editor skeleton shows during page load
• Encryption spinner shows "Encrypting files..."
• Decryption spinner shows "Decrypting gist..."
• File processing shows progress if > 1 second
• Loading states prevent user interaction
• Screen readers announce loading states
• Smooth animations (no jarring transitions)
• Loading states match design tokens
• Clear indication when operation completes

Loading State Types

1. Page Load Skeleton

┌─────────────────────────────────────┐
│ ░░░░░░░░░░░░░░ (title skeleton)     │
│                                     │
│ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░    │
│ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░    │
│ ░░░░░░░░░░░░░░░░░░░░░              │
│                                     │
│ [░░░░░░░░] [░░░░░░░░]              │
└─────────────────────────────────────┘

2. Encryption/Decryption Spinner

┌─────────────────────────────────────┐
│                                     │
│         ⟳                           │
│    Encrypting files...              │
│                                     │
│    Please wait while we secure      │
│    your content                     │
│                                     │
└─────────────────────────────────────┘

3. File Processing Progress

┌─────────────────────────────────────┐
│   Processing large file...          │
│   ▓▓▓▓▓▓▓▓░░░░░░░░ 45%            │
│   main.js (2.3 MB)                  │
└─────────────────────────────────────┘

Component Structure

interface LoadingStateProps {
  type: 'skeleton' | 'spinner' | 'progress';
  message?: string;
  progress?: number; // 0-100 for progress type
  fullscreen?: boolean;
}

// Usage examples
<LoadingState type="spinner" message="Encrypting files..." />
<LoadingState type="progress" message="Processing" progress={45} />
<LoadingState type="skeleton" />

Technical Implementation

• Use CSS animations for smooth effects
• Implement with React Suspense boundaries where applicable
• Use shadcn/ui Skeleton component as base
• Create custom spinner with CSS
• Use framer-motion for complex animations
• Ensure animations respect prefers-reduced-motion

Accessibility Requirements

• Use role="status" and aria-live="polite" for announcements
• Provide clear text descriptions of what's loading
• Don't rely only on visual indicators
• Announce when loading completes
• Keyboard focus management during loading

Performance Considerations

• Show loading states only for operations > 100ms
• Use CSS transforms for animations (GPU accelerated)
• Avoid layout thrashing during transitions
• Consider using React.lazy for code splitting indicators

Related

• Used by all async operations
• Critical for feat: create gist viewer component #61 (GistViewer) during decryption
• Required for Implement CodeEditor component with CodeMirror v6 #54 (CodeEditor) initial load
• Part of Phase 4 UI Components