Export Functionality Reorganization and UI Enhancements

Summary

Reorganized export functionality to centralize it on the Export page and added individual loading animations for record augmentation.

Why Care

These changes improve user experience by providing clearer separation of concerns between record management and export operations, while adding visual feedback during AI augmentation processes.

Implementation

Changes Made

  • Removed Export All button from src/components/RecordCollector.js
  • Added Download Local functionality to src/components/ExportPage.js
  • Implemented individual loading animations in src/components/AugmentPage.js and src/components/RecordCard.js
  • Updated icon imports across components

Technical Details

Export Functionality Reorganization

  • File: src/components/RecordCollector.js
    • Removed handleExportAll function (lines 18-47)
    • Removed Download icon import
    • Simplified header button layout to only show "Import CSV" and "Delete All"
  • File: src/components/ExportPage.js
    • Added Download icon import
    • Implemented handleDownloadLocal function with CSV export logic
    • Added "Download Local" button between "Select All" and "Push to Remote" buttons
    • Button shows selected record count and is disabled when no records selected

Individual Loading Animations

  • File: src/components/AugmentPage.js
    • Added processingRecords state (Set) to track individual record processing
    • Updated handleAugment function to add/remove record IDs from processing set
    • Pass isProcessing prop to RecordCard based on processing status
  • File: src/components/RecordCard.js
    • Added isProcessing prop (defaults to false)
    • Implemented loading overlay with spinner and "Augmenting..." text
    • Overlay appears when isProcessing is true with backdrop blur effect

Integration Points

  • Export functionality now properly separated between Record Collector (management) and Export page (export operations)
  • Loading animations provide real-time feedback during AI augmentation process
  • Consistent visual design maintained across components

Documentation

  • Export page now provides both local download and remote push options
  • Loading animations clearly indicate which records are being processed
  • User can select specific records for export rather than being forced to export all