Optimize Packery Layout Image Processing for Large Galleries

[matepak]

Description

Currently, the image processing for Packery layout in saveGalleryAsImage function performs all calculations and canvas operations on the main thread, which can cause performance issues with large galleries. This can lead to UI freezing and poor user experience when saving galleries with many images.

Current Implementation Issues

• All image processing occurs synchronously on the main thread
• Canvas operations for large galleries can block UI interactions
• No progress feedback during processing
• Potential memory issues with very large galleries

Proposed Solutions

1. Web Worker Implementation

   • Move image processing calculations to a Web Worker
   • Send gallery data and layout information to worker
   • Return processed canvas data back to main thread
   • Maintain UI responsiveness during processing

2. Chunked Processing

   • Break down image processing into smaller chunks
   • Process images in batches
   • Add progress indicator for user feedback

3. Memory Optimization

   • Implement cleanup of unused image data
   • Consider using OffscreenCanvas for better memory management
   • Add memory usage monitoring

Technical Considerations

• Need to serialize gallery data for Web Worker communication
• Handle canvas context in worker environment
• Maintain image quality while optimizing performance
• Consider browser compatibility for OffscreenCanvas

Acceptance Criteria

• Processing large galleries (100+ images) should not freeze the UI
• Add progress indicator during processing
• Maintain image quality and layout accuracy
• Support all major browsers
• Include error handling for memory limitations
• Add performance metrics logging

File Affected

• src/components/SaveGalleryImage.js