Composable Keeps recomposing - Loading Dialog Keeps Updating Multiple Times

Question

VisionBoardNameViewModel

I'm experiencing an issue where a ProgressDialog that displays loading information is persistently shown due to frequent recomposition of our Composable UI. This behavior is likely caused by how I manage and update data in our ViewModel and UseCase layers.

How can I solve this? Here is my code.

@HiltViewModel
class VisionBoardNameViewModel @Inject constructor(
        val getLastBoardDataUseCase: GetLastBoardDataUseCase
) : ViewModel() {
    
       
        private val _boardDataUiState = MutableStateFlow(BoardDataUiState())
        val boardDataUiState: Flow<BoardDataUiState> = _boardDataUiState.asStateFlow()
   
    
        fun getLastBoardData() = viewModelScope.launch {
    
            getLastBoardDataUseCase().collectLatest { response ->
                when (response) {
                    is Resource.Success -> {
                        _boardDataUiState.update { currentState ->
                            currentState.copy(boardData = response.data, isLoading = false)
                        }
                    }
    
                    is Resource.Failure -> {
                        _boardDataUiState.update { currentState ->
                            currentState.copy(error = response.message, isLoading = false)
                        }
                    }
    
                    is Resource.Loading -> {
                        _boardDataUiState.update { currentState ->
                            currentState.copy(isLoading = true)
                        }
                    }
                }
            }
        }
}

GetLastBoardDataUseCase

class GetLastBoardDataUseCase @Inject constructor(
        private val boardDataRepository: BoardDataRepository
) {
    
        operator fun invoke(): Flow<Resource<BoardData>> = flow {
            emit(Resource.Loading())
            try {
                emit(Resource.Success(boardDataRepository.getBoardList().first()))
            } catch (e: Exception) {
                emit(Resource.Failure(e.message.toString()))
            }
        }
}

VisionBoardNavigation

@Composable
fun VisionBoardNavigation(navController: NavHostController) {
    
    
       NavHost(
            navController = navController,
            startDestination = Screens.HomeScreen.route
        ) {
          
            composable(Screens.HomeScreen.route) { navBackStack ->
                
                    val boardName = navBackStack.arguments?.getString("boardName")
                    val boardUId = navBackStack.arguments?.getInt("boardUId")
    
                    boardUId?.let { homeViewModel.getBoardSectionList(it) }
    
                    val homeUiState by homeViewModel.sectionList.collectAsState()
    
                    HomeScreen(boardName.toString(), homeUiState)
                
            }
        }   
}

@Composable
fun HomeScreen(boardName: String = "Hey There", homeUiState: HomeScreenUIState) {

    var showLoading by remember {
        mutableStateOf(false)
    }

    LaunchedEffect(key1 = homeUiState.loading, block = {
        showLoading = homeUiState.loading
    })

    if (showLoading) {
        Dialog(
            onDismissRequest = { },
            DialogProperties(dismissOnBackPress = false, dismissOnClickOutside = false)
        ) {
            Box(
                contentAlignment = Alignment.Center,
                modifier = Modifier
                    .size(100.dp)
                    .background(White, shape = RoundedCornerShape(16.dp))
            ) {
                CircularProgressIndicator()
            }
        }
    }
    
} {

}

OUTPUT

Atul Sharma · Answer 1 · 2023-08-29T09:07:01.263

0

You can check my solution which explains multiple recomposition and use of LaunchedEffect in jetpack compose. https://stackoverflow.com/a/76969294/14972910

In this case showLoading variable is remebered and set to true in HomeScreen composable and so that whenever the HomeScreen recomposes then it will also recompose the dialog as the showLoading is true.

So you have to restrict HomeScreen for recomposition and you can use LaunchedEffect for that in the NavHost.

edited Aug 29 '23 at 09:07

answered Aug 29 '23 at 08:57

Atul Sharma

399
3
12

As per your reference I have already Implemented LaunchedEffected in my HomeScreen – Pratik Fagadiya Aug 29 '23 at 09:07
@PratikFagadiya I have edited my solution so check once again. – Atul Sharma Aug 29 '23 at 09:07
I have already tried that method where I were implemented LaunchedEfefct Inside My Navhost instead of HomeScreen But unfortunately it doesn't work for me – Pratik Fagadiya Aug 29 '23 at 09:09
@PratikFagadiya Try to pass `homeUiState.loading` as a parameter to `HomeScreen` composable and then use it this will also reduce unwanted variables. – Atul Sharma Aug 29 '23 at 09:39

score 0 · Answer 2 · answered Aug 29 '23 at 09:35

0

Try omitting the showLoading remember and also the LaunchedEffect block and instead directly check homeUiState.loading to change visibility of the CircularProgressIndicator.

    if (homeUiState.loading) {
        // circular progress composable
    }

answered Aug 29 '23 at 09:35

Mostafa Arian Nejad

1,278
1
19
32

score 0 · Answer 3 · answered Aug 29 '23 at 10:33

0

val showLoading by remember(homeUiState) {
  derivedStateOf { homeUiState.loading }
}

Try it like this and see if it works. If you want to learn more about the concept check this great article.

answered Aug 29 '23 at 10:33

F.Mysir

2,838
28
39

Composable Keeps recomposing - Loading Dialog Keeps Updating Multiple Times

3 Answers3