I am trying to show a circular progress indicator, when syncing of files start by setting syncing state to true.
when syncing ends the variable becomes false.

This is the code of my MainViewModel.

public val syncing  = MutableStateFlow(false)

fun syncFiles(context: Context) {
        if ((getApplication<MainApplication>()).dropboxClient?.isClientReady() != true) {
            showShortToast(context, "Dropbox is not connected")
            return;
        }

        viewModelScope.launch {
            syncing.update {true}
            val result = withContext(Dispatchers.IO) {
                var result = false;
                try {
                    getApplication<MainApplication>().initlializeDropboxFromLocalCreds()
                    updateMyData()
                    saveFiles()
                    Timber.d(bookRepo.getAllBooks().joinToString(", "))
                    result = true;
                } catch (it: Exception) {
                    Timber.tag("Error").e(it.toString())
                    result = false
                }
                syncing.update {false}
                result;
            }

            if (result) {
                showShortToast(context, "Books synced properly")
            } else {
                showShortToast(context, "Couldn't sync books")
            }
        }
}

But the state doesn’t change inside the composable.

I have debugged the issue and the composable only constructs one time at start of the app.

fun MainPage(
    innerPadding: PaddingValues,
    modifier: Modifier = Modifier,
    navigateToReader: (filePath: String) -> Unit,
    mainViewModel: MainViewModel = viewModel()
) {

    Box {
        val state by  mainViewModel.syncing.collectAsState()
        if (state) {
            CircularProgressIndicator(
//                progress = { currentProgress },
                modifier = Modifier.fillMaxWidth(),
                color = MaterialTheme.colorScheme.primary,
                trackColor = MaterialTheme.colorScheme.surfaceVariant,
            )
        } else {
            Column(
                modifier = Modifier
                    .padding(innerPadding)
                    .padding(horizontal = 15.dp, vertical = 20.dp),
                verticalArrangement = Arrangement.spacedBy(16.dp),
            ) {
                Greeting(navigateToReader = navigateToReader)
            }
        }
    }
}

I have tried mutableStateOf, remember in combination with mutableStateOf but nothing is working.

Please explain why this is happening.

I have tried mutableStateOf, remember in combination with mutableStateOf but nothing is working.

I have tried debugging the issue but composable only composes once.

I expect the state to change to true on start of syncing and false when syncing ends, (which is happening).
UI should update accordingly to show circular progress indicator (which is not happening).