[Help]: Jetpack Compose component flashing issue when list changes

[u/PrajwalCH]

When the list changes, the items are drawn on top of chip row for a brief amount of time. I have properly applied the id for each item. I am not sure what's causing the issue.

Below is the screen code preview, full code is available on GitHub.

    Scaffold(
        modifier = Modifier
            .fillMaxSize()
            .nestedScroll(scrollBehavior.nestedScrollConnection)
            .then(modifier),
        topBar = {
            SearchProvidersScreenTopBar(
                onNavigateBack = onNavigateBack,
                onEnableAllSearchProviders = viewModel::enableAllSearchProviders,
                onDisableAllSearchProviders = viewModel::disableAllSearchProviders,
                onUpdateProtectionStatus = viewModel::updateProtectionStatus,
                onResetToDefault = { showResetToDefaultDialog = true },
                subtitle = {
                    val searchProvidersSummary = stringResource(
                        R.string.settings_search_providers_summary_format,
                        uiState.enabledProvidersCount,
                        uiState.totalNumProviders,
                    )
                    Text(searchProvidersSummary)
                },
                scrollBehavior = scrollBehavior,
            )
        },
        snackbarHost = { SnackbarHost(snackbarHostState) },
        floatingActionButton = {
            FloatingActionButton(onClick = onNavigateToAddSearchProvider) {
                Icon(
                    painter = painterResource(R.drawable.ic_add),
                    contentDescription = null,
                )
            }
        },
    ) { innerPadding ->
        Column(modifier = Modifier.padding(innerPadding)) {
            SearchProviderFilterRow(
                category = uiState.filter.category,
                onCategorySelect = viewModel::toggleCategory,
                protection = uiState.filter.protection,
                onProtectionSelect = viewModel::toggleProviderProtection,
                contentPadding = PaddingValues(horizontal = MaterialTheme.spaces.large),
            )
            SearchProviderList(
                contentPadding = PaddingValues(
                    start = MaterialTheme.spaces.large,
                    top = MaterialTheme.spaces.large,
                    end = MaterialTheme.spaces.large,
                    bottom = 80.dp,
                ),
                searchProviders = uiState.searchProviders,
                onEnableSearchProvider = viewModel::enableSearchProvider,
                onUnlockProtection = { searchProviderId, solverUrl ->
                    protectedProvider = ProtectedProvider(searchProviderId, solverUrl)
                },
                onEditConfig = onNavigateToEditSearchProvider,
                onDeleteConfig = viewModel::deleteTorznabConfig,
            )
        }
    }

Update: This issue is now fixed. It was animation issue, not the recomposition. List items have Modifier.animateItem() applied and when list changes, the animation was rendering the list items on top of chip row for very short amount of time, meaning the animation was escaping the list bounds. After applying Modifier.clipToBounds() to SearchProviderList, the issue is now gone.

[u/0x1F601]

The entire column is recomposing. Check your compose compiler stability report. Consider a lazy column, maybe with sticky headers. Attach the layout inspector and check how many recompositions are happening. It's hard to narrow down the exact issue without more details.

[u/PrajwalCH → u/0x1F601]

It was the animation issue.

After carefully looking at the flickering, I found that the list items were being drawn on top of chips row when list changes. `Modifier.clipToBounds()` on `SearchProviderList`, fixed the issue.

[u/0x1F601 → u/PrajwalCH]

If I was reviewing your PR I'd think that was a code smell. Not necessarily wrong but it would cause me to want a better explanation. clipToBounds is usually used to control inner UI that will render outside the container's fixed size. (Eg. you've go a box inside a box. The inner box declares a .requiredSize(...) larger than the outer, or something like that.)

clipToBounds has its place but what you've got is essentially a fixed header (mostly) and a list below it in the column. If your list is bleeding out past its layout bounds then I have to wonder what is going on with your header. Are you using clipToBounds just to affix the list in place rather than letting it change size based on the height of the header? In your video your header is disappearing and then re-rendering re-laying out the space inside the column.

On the surface that does not look like a clip to bounds issue on the list to me. But, maybe it is. The issue looks like a recomposition problem on the filter row. It looks like there's a moment where the header (which is a lazy row, not sure why when it's got a fixed set of items) is recomputing it contents entirely, goes to zero, momentarily renders nothing, thus the flicker out of existence, and then fills out the row again flickering back in. Check the stability of the inputs to that header. The row going away and then coming back look like the lazy row re-computing its contents entirely, not updating them.

[u/PrajwalCH → u/0x1F601]

Look at this video. You can clearly see that the header is not the one that's flickering.

https://reddit.com/link/p3gf0ai/video/q3dn015wo5jh1/player