ProcessingQueueCard
A priority-focused card component for displaying scan uploads that need user attention. Features dynamic status indicators, progress bars, and contextual actions.
Design Principles
- Priority Visual Hierarchy: Uses larger cards with more spacing than history items
- Status-driven UI: Different visual states for processing, queued, and failed uploads
- Linear Progress Bars: Animated progress indicators for active processing
- Contextual Actions: Shows retry button only for failed items
- Zero-latency Feel: Hover states and smooth transitions under 16ms
Examples
Processing Status
Queued Status
Failed Status (with Retry)
Usage
import { ProcessingQueueCard } from '@/components/ui/ProcessingQueueCard';
// Basic usage
<ProcessingQueueCard
upload={scanUpload}
onRetry={handleRetry}
onRename={handleRename}
onDelete={handleDelete}
/>Interface
interface ScanUpload {
id: string;
created_at: string;
scan_title: string;
processing_status: 'queued' | 'processing' | 'review_pending' | 'failed' | 'timeout' | 'cancelled' | 'completed';
results?: {
summary_image_path?: string;
total_cards_detected?: number;
};
error_message?: string;
}
interface ProcessingQueueCardProps {
upload: ScanUpload;
onRetry?: (uploadId: string) => void;
onRename?: (upload: ScanUpload) => void;
onDelete?: (uploadId: string, title: string) => void;
}Status States
⏳ Processing
Shows animated linear progress bar with "Processing cards..." message
⏰ Queued
Displays "Waiting in queue for processing..." with yellow styling
❌ Failed
Shows error message and retry button with red error styling
Best Practices
✅ Do
- Use in priority sections for items needing attention
- Provide clear error messages for failed states
- Implement retry functionality for failed uploads
- Keep scan titles descriptive but concise
❌ Don't
- Use for completed items (use ScanHistoryTable instead)
- Show retry button for non-failed states
- Override the built-in status styling
- Use for more than 10 items at once (overwhelming)