29 lines
2.5 KiB
Markdown
29 lines
2.5 KiB
Markdown
# 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](file:///home/eric/StudioProjects/Kotlin-Chat-Software/app/src/main/java/com/example/login_v3/home/Message/UI/Detail/Message_Component/ShimmerModifier.kt)**: A reusable Modifier extension that applies an animated linear gradient to any Composable, simulating a "loading" state.
|
|
- **Updated [Message_Messaging.kt](file:///home/eric/StudioProjects/Kotlin-Chat-Software/app/src/main/java/com/example/login_v3/home/Message/UI/Detail/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](file:///home/eric/StudioProjects/Kotlin-Chat-Software/app/src/main/java/com/example/login_v3/home/Message/UI/Detail/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](file:///home/eric/StudioProjects/Kotlin-Chat-Software/app/src/main/java/com/example/login_v3/home/Message/ViewModel/Detail/Message_Messaging_ViewModel.kt)**:
|
|
- 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.
|