mutableStateOf updating in view model but no effect in @Compose

Question

I do have a mutableStateof in my HiltViewModel named loading. I am updating the value of loading from a function in the view model which is being passed to @composable function and being used there. The case is that the loading value is updating perfectly in the viewModel but not reflecting in the @Composable function. My viewModel is:

@HiltViewModel
class AuthenticationViewModel @Inject constructor(
    private val repository: AppRepository,
    application: Application
): ViewModel() {
   val loading = mutableStateOf(false)

   fun update() = viewModelScope.launch {
      loading.value = true
   }
}

loading value is updated here but not reflecting in the @composable

@Composable
fun LoginScreen(
    viewModel: AuthenticationViewModel,
    actions: MainActions
) {
    val loading = viewModel.loading.value

    //Loading is another composable function where bool value is passed
    Loading(state = loading)
    CustomNavigationButton(title = "Sign In",enabled = true,onClick = 
    {viewModel.update()})
}

Now when I click on the navigation button the view model function is being called and the loading state is also being updated but not reflected back in the @Composable

Loading Composable is:

@Composable
fun Loading(state:Boolean) {
    var showDialog by remember { mutableStateOf(state) }

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

Answer 1

The Issue is in the Loader composable function. if condition was always set to false as the mutable state was never updating in that specific composable function. Replaced:

@Composable
fun Loading(state:Boolean) {
    var showDialog by remember { mutableStateOf(state) }

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

with

@Composable
fun Loading(state:Boolean) {
    if(state){
        Dialog(onDismissRequest = {}, DialogProperties(
            dismissOnBackPress = false,dismissOnClickOutside = false
        )) {
            Box(
                modifier = Modifier.size(100.dp).background(Color.White, shape = RoundedCornerShape(8.dp)),
                contentAlignment= Alignment.Center,
            ){
                CircularProgressIndicator()
            }
        }
    }
}