Walkthrough - Smoother Image Loading Implementation

I have implemented several enhancements to eliminate the 0.5s "blank" period and layout jumps when entering the chat room. The loading experience is now much more polished with animated shimmer placeholders and aggressive prefetching.

Changes Made

1. Visual Polish with Shimmer

Created ShimmerModifier.kt: A reusable Modifier extension that applies an animated linear gradient to any Composable, simulating a "loading" state.
Updated Message_Messaging.kt:
- Replaced AsyncImage with SubcomposeAsyncImage in ImageMessageContent and VideoMessageContent.
- Added a loading slot that displays a shimmer effect while the image is being fetched or decoded.
- Implemented layout reservation using Modifier.aspectRatio() or a default height. This prevents the list from "jumping" once the image resolution is known.

2. State & Model Enhancements

Updated MessageUiModel.kt: Added an optional aspectRatio property. This is ready for future back-end integration to provide exact dimensions before loading.

3. Synchronized Prefetching

Updated ChatViewModel:
- Refined prefetchMedia to focus on the top 10 most recent messages, ensuring the user sees images immediately upon entering.
- Synchronized the ImageRequest parameters (like crossfade) with the UI to ensure maximum cache hits.

Verification Results

Visual Smoothness: Images now transition from a smooth shimmer animation to the actual content, removing the jarring "blank" state.
Layout Stability: The chat list is more stable during loading as space is reserved for media items.
Instant Loading: Cached images now appear nearly instantly due to optimized prefetching and memory cache synchronization.

Tip

Once the back-end provides the aspectRatio metadata, update the mapping in MessageUiModel.kt to eliminate the remaining layout jumps entirely.

2.5 KiB Raw Blame History