Kordant/tasks/android-production/09-image-caching.md

09. Image Caching & Coil Optimization

meta: id: android-production-09 feature: android-production priority: P2 depends_on: [] tags: [performance, caching, production]

objective:

• Optimize Coil image caching and loading for better performance and reduced network usage

deliverables:

• Coil cache configuration
• Image loading optimization
• Lazy loading for lists
• Memory and disk cache limits

steps:

1. Configure Coil:
   • Set up ImageLoader in KordantApp.kt
   • Configure memory cache (50MB)
   • Configure disk cache (100MB)
   • Set crossfade animation
   • Configure placeholder and error drawables
2. Optimize image loading:
   • Use appropriate image sizes (thumbnail vs full)
   • Enable image transformations (circle crop for avatars)
   • Use WebP format where supported
   • Configure request priorities
3. Implement lazy loading:
   • Use LazyColumn for all lists
   • Implement pagination for long lists
   • Add prefetching for adjacent items
   • Show skeleton placeholders while loading
4. Add offline support:
   • Cache images for offline viewing
   • Show cached images when offline
   • Handle network errors gracefully
5. Optimize memory usage:
   • Clear memory cache on low memory
   • Limit concurrent image loads
   • Cancel loads for off-screen items
6. Add tests:
   • Test cache hit/miss behavior
   • Test scrolling performance with many images

tests:

• Unit: Test cache configuration
• Performance: Test scrolling with 1000 images
• Memory: Verify no memory leaks

acceptance_criteria:

• Coil ImageLoader configured with 50MB memory / 100MB disk cache
• Lazy loading on all lists with pagination
• Image placeholders while loading
• Error state for failed loads
• Cache cleared on low memory
• Offline image viewing working
• Smooth 60fps scrolling on image-heavy screens
• No memory leaks in image loading
• Crossfade animation on image load
• Appropriate image sizes requested from backend

validation:

• Scroll through alert list → smooth, no stuttering
• Turn on airplane mode → cached images still visible
• Monitor memory → stable during image browsing
• Check cache directory → images stored with correct expiration

notes:

• Coil is already included in dependencies (libs.coil.compose)
• Configuration happens in Application class
• Use rememberAsyncImagePainter for Compose integration
• Test on low-end devices for performance validation