Hi, I’ve implemented an android app that uses Pagi...

# compose

[Fahime Ghasemi]

Hi, I’ve implemented an android app that uses Paging Library for showing list. There is a search bar that shows a progress icon when I enter a keyword for searching. I want to change that progress icon when the result of search comes. My problem is that when I change the state related to search bar icon nothing happens. I’ll send the screen shot of my app and the codes related to search bar, feed list and search screen. I’m be very thankful if somebody helps me

[Colton Idle]

"when I change the state related to search bar icon nothing happens."

that seems sus. Please post minimal code if possible and we'll try to take a look!

[Fahime Ghasemi]

I’ve send the pictures and these are the codes

@Composable
fun FeedScreen(viewModel: FeedViewModel, state: FeedState = rememberFeedState()) {
    Log.i("fahi","FeedScreen")
    Column {
        Appbar(state.lazyGridState, state.query,state.searching) {
            state.query = it
        }

        LaunchedEffect(key1 = state.query.text, block = {
            if (state.query.text.isEmpty()) {
                state.result = viewModel.feed
            }
            else {
                state.searching = true
                state.result = viewModel.search(state.query.text)
            }
        })
        FeedList(state.lazyGridState, state.result)
        {
            Log.i("fahi","onDataLoaded")
                state.searching = false
        }
    }
}

[Fahime Ghasemi]

@Composable
fun SearchBar(
    modifier: Modifier = Modifier,
    searching: Boolean,
    value: TextFieldValue,
    onValueChange: (TextFieldValue) -> Unit
) {
    val focusManager = LocalFocusManager.current
    CustomTextField(
        value = value,
        onValueChange = onValueChange,
        leadingIcon = {
            if (searching) {
                LineFadeProgressIndicator(modifier = Modifier.padding(start = 4.dp).wrapContentWidth())
            } else {
                Icon(
                    Icons.Filled.Search,
                    null,
                    modifier = Modifier.padding(start = 4.dp),
                    tint = Hint
                )
            }
        },
        trailingIcon = null,
        modifier = modifier
            .background(
                searchBackground,
                RoundedCornerShape(10.dp)
            )
            .padding(0.dp),
        fontSize = 17.sp,
        keyboardOptions = KeyboardOptions(imeAction = ImeAction.Search),
        keyboardActions = KeyboardActions(onSearch = {
            focusManager.clearFocus()
        }),
        placeholderText = stringResource(id = R.string.search)
    )
}

[Fahime Ghasemi]

@Composable
fun FeedList(
    lazyGridState: LazyGridState = rememberLazyGridState(),
    feedList: Flow<PagingData<Feed>>,
    modifier: Modifier = Modifier,
    onDataLoaded: () -> Unit
) {
    Log.i("fahi", "recompose FeedList")
    val res = feedList.collectAsLazyPagingItems()

    Box(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp)
    ) {
        LazyVerticalGrid(
            state = lazyGridState,
            columns = GridCells.Fixed(2),
            verticalArrangement = Arrangement.spacedBy(16.dp),
            horizontalArrangement = Arrangement.spacedBy(16.dp)
        ) {
            items(res.itemCount, key = { index ->
                index
            })
            { index ->
                res[index]?.let {
                    FeedItem(it)
                }
            }
            res.apply {
                when {
                    loadState.refresh is LoadState.Loading -> {
                        item(span = { GridItemSpan(maxLineSpan) }) {
                            LineFadeProgressIndicator(modifier = Modifier.wrapContentWidth())
                        }

                    }
                    loadState.append is LoadState.Loading -> {
                        item(span = { GridItemSpan(maxLineSpan) }) {
                            LineFadeProgressIndicator(modifier = Modifier.wrapContentWidth())
                        }
                    }
                    loadState.prepend is LoadState.Loading -> {
                        item(span = { GridItemSpan(maxLineSpan) }) {
                            LineFadeProgressIndicator(modifier = Modifier.wrapContentWidth())
                        }
                    }
                    else ->
                    {
                        onDataLoaded()
                    }
                }
            }
        }
    }
}

[Colton Idle]

state: FeedState = rememberFeedState()

hm. ive never seen this pattern before 🤔

I would typically will just have my feed state live in my feed view model since vM is a state holder

[Fahime Ghasemi]

I sent the code for search screen, app bar and feed list.