43 lines
2.1 KiB
Markdown
43 lines
2.1 KiB
Markdown
# Smoother Image Loading Implementation Plan
|
|
|
|
This plan addresses the 0.5s "blank" period and layout jumps when loading images in the chat room.
|
|
|
|
## User Review Required
|
|
|
|
> [!IMPORTANT]
|
|
> To perfectly eliminate layout jumps, we would eventually need to store image dimensions in the database. For this first iteration, I will focus on visual smoothness and aggressive prefetching to reduce the "blank" time.
|
|
|
|
## Proposed Changes
|
|
|
|
### 1. Visual Polish
|
|
|
|
#### [NEW] [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)
|
|
- Implement a reusable `shimmer()` Modifier extension to provide a smooth, animated loading state.
|
|
|
|
#### [MODIFY] [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)
|
|
- Update `ImageMessageContent` and `VideoMessageContent` to use `SubcomposeAsyncImage`.
|
|
- Display a shimmer placeholder during the `Loading` state.
|
|
- Use a default aspect ratio (e.g., 4:3) for the placeholder to reserve space and reduce layout jumps.
|
|
|
|
### 2. Prefetching Optimization
|
|
|
|
#### [MODIFY] [ChatViewModel](file:///home/eric/StudioProjects/Kotlin-Chat-Software/app/src/main/java/com/example/login_v3/home/Message/ViewModel/Detail/Message_Messaging_ViewModel.kt)
|
|
- Update `prefetchMedia` to use the same `ImageRequest` configuration (crossfade, scale, etc.) as the UI.
|
|
- Increase prefetching priority for the most recent messages.
|
|
|
|
### 3. State Management
|
|
|
|
#### [MODIFY] [MessageUiModel.kt](file:///home/eric/StudioProjects/Kotlin-Chat-Software/app/src/main/java/com/example/login_v3/home/Message/UI/Detail/MessageUiModel.kt)
|
|
- Add an optional `aspectRatio` property to allow future dimension caching.
|
|
|
|
## Verification Plan
|
|
|
|
### Automated Tests
|
|
- Build and run the app.
|
|
- Check logcat for any Coil-related errors.
|
|
|
|
### Manual Verification
|
|
- Enter a chat room with multiple images.
|
|
- Verify that a shimmer effect is visible immediately.
|
|
- Verify that the layout is more stable during image loading.
|
|
- Test with both network images and cached images.
|