Lottie animations not rendered in snapshots

[damianogiusti]

Description

Opening issue here as a follow-up for the thread in the Kotlin Slack channel.

Performing snapshots on Composables with Lottie animations sometimes produces blank content. However, when launching the app the animations are displayed correctly.
Some animations present warnings such as Convert your Illustrator layers to shape layers and Animation contains merge paths but they are disabled, but they are working fine at runtime. I assume this is not causing the issue since they sometimes get rendered by Paparazzi. Also, Lottie files without warnings are not working as well.

I apologise for being vague telling that this happens "sometimes", but unfortunately I've not been able to find the root cause after days of investigation.

Worth to mention that I already use the custom Lottie executor LottieTask.EXECUTOR = Executor(Runnable::run).

Steps to Reproduce

We use this custom Composable to perform an initial setup of the Lottie animation that we need to render

@Composable
internal fun rememberLottieAnimationState(
    @RawRes animationId: Int,
    isPlaying: Boolean = true,
    iterateForever: Boolean = true,
    restartOnPlay: Boolean = true
): LottieAnimationState {

    val composition by rememberLottieComposition(
        spec = LottieCompositionSpec.RawRes(animationId)
    )
    val animatable = animateLottieCompositionAsState(
        composition = composition,
        iterations = if (iterateForever) LottieConstants.IterateForever else 1,
        isPlaying = isPlaying,
        restartOnPlay = restartOnPlay
    )

    // Restart animation when animationId changes
    LaunchedEffect(animationId) {
        animatable as LottieAnimatable
        animatable.resetToBeginning()
    }

    return LottieAnimationState(composition, animatable.progress)
}

And then this is the Composable we use to render the actual animation:

@Composable
internal fun AnimatedContent(item: HelpCenterItem, modifier: Modifier = Modifier) {

    val animationState = rememberLottieAnimationState(
        animationId = item.assetName,
        iterateForever = false
    )
    val animationWidth = 373f  //In px
    val animationHeight = 352f //In px

    LottieAnimation(
        animationState.composition,
        { animationState.progress },
        contentScale = ContentScale.FillWidth,
        enableMergePaths = true,
        //By default Lottie fills all the height available, this doesn't work
        //well in a scrollable container. For this reason it's important to specify
        //the animation aspect ratio
        modifier = modifier
            .fillMaxWidth()
            .padding(vertical = 64.dp)
            .aspectRatio(animationWidth / animationHeight)
    )
}

For our tests we use TestParameterInjector to perform screenshots in a bunch of different locales, and a test method body look like this:

paparazzi.unsafeUpdateConfig(deviceConfig = DeviceConfig.PIXEL_4.copy(locale = locale)) // locale is parametrized 
paparazzi.snapshot(
    name = screenshotName
) {
   MyComposable()
}

Expected behavior

The screenshots are rendered using the first visible frame of the Lottie animation.

Additional information:

• Paparazzi Version: 1.3.5
• Compile SDK: 34
• Gradle Version: 8.9
• Android Gradle Plugin Version: 8.7.2

[awochniak-allegro]

Do you have any updates here?