coil-compose

What problem does it solve?

Coil-based image loading in Jetpack Compose can be verbose and error-prone without a guiding pattern. This Skill provides the recommended approach to loading images from URLs, handling loading states, and applying transformations with Coil for a smooth, efficient user experience.

Core Features & Use Cases

• AsyncImage: Primary composable for most scenarios with automatic size resolution and standard parameters.
• rememberAsyncImagePainter: Use when a Painter is required (e.g., Canvas or Icon) or when you need to observe load state manually.
• SubcomposeAsyncImage: When a custom slot API is needed to render different states (Loading, Success, Error).
• Performance & Best Practices: Use a single ImageLoader, enable crossfade, and set proper contentScale to avoid oversized loads.
• Use Case: Load a user avatar from a URL with a placeholder and error fallback within a list item.

Quick Start

Use AsyncImage with a sample URL and placeholder to immediately render an image in a Compose screen.