A Jetpack Compose library providing a customizable shimmer effect modifier and predefined skeleton loaders for Jetpack Compose, and Kotlin Multiplatform (incl. Compose Multiplatform).

✨ Special about this library: Seamless Global Synchronization: Create a unified loading experience with zero effort. Shimmer effects are automatically coordinated across your entire screen, ensuring animations flow perfectly from left-to-right. Just apply the modifier—the library handles the timing for you.

Note: Watch the demo below to see global sync in action. Notice how elements on the right side of the screen wait for the shimmer "pulse" to reach them, creating a unified transition.

Add the dependency to your commonMain source set or module-level build.gradle.kts:

implementation("dev.seyfarth:compose-shimmer-skeleton:1.0.1")

If you use a version catalog, add the following to your gradle/libs.versions.toml file:

[versions]
composeShimmerSkeleton = "1.0.1"

[libraries]
compose-shimmer-skeleton = { module = "dev.seyfarth:compose-shimmer-skeleton", version.ref = "composeShimmerSkeleton" }

Then in your commonMain source set or module-level build.gradle.kts, you can use the dependency like this:

implementation(libs.compose.shimmer.skeleton)

The shimmer effect is accessible via the shimmerEffect modifier.

@Composable
fun LoadingItem(isLoading: Boolean) {
    Box(
        modifier = Modifier
            .size(128.dp)
            .shimmerEffect(
                visible = isLoading,
            )
    )
    Box(
        modifier = Modifier
            .shimmerEffect(
                visible = isLoading,
                shape = CircleShape,
            )
    )
}

• Multiplatform Ready: Works on Android, iOS, JVM Desktop, and Compose for Web (Wasm & JS) supported by Compose Multiplatform.
• Modifier Based: Apply a shimmer effect to any Composable using Modifier.shimmerEffect().
• Coordinated Animation: Shimmers are automatically synchronized across the screen, creating a polished, unified loading experience.
• Customizable: Fine-tune colors, duration, width, travel distance, and angle of the shimmer.
• Lightweight: Minimal overhead, optimized for performance.

• [x] Add support for Web targets.
• [ ] Add pre-defined skeleton loaders.
• [ ] Add better Light/Dark theme support.
• [ ] Add support integrating the shimmer effect better in the individual App's Theme.