hi everybody, how do you guys show and hide a progress indicator while some data is being loaded?

# compose

[Manuel Lorenzo]

hi everybody,

how do you guys show and hide a progress indicator while some data is being loaded?

[Kaustubh Patange]

Compose allow us to write code in a declarative approach. All you have to do is describe how the layout should look.

@Composeable fun compose() {
   ...
   if (!isLoaded) {
       ShowProgressBar()
   } 
   ...
}

[Manuel Lorenzo]

well in my case, I have something similar and it doesn’t fully work

[Manuel Lorenzo]

@Composable
fun RemotiCircularProgressIndicator(
    modifier: Modifier = Modifier,
    isLoading: Boolean = true,
    setIsLoading: (Boolean) -> Unit = {}
) {
    if (isLoading) {
        CircularProgressIndicator(
            modifier.then(
                Modifier
                    .fillMaxHeight(0.25f)
                    .fillMaxWidth(0.25f)
            )
        )
    }
}

[Manuel Lorenzo]

in my case, that’s always being shown

[Manuel Lorenzo]

I call it from another composable with

val (isLoading, setIsLoading) = remember { mutableStateOf(viewState.loading) }
RemotiCircularProgressIndicator(
            modifier = Modifier.align(Alignment.CenterHorizontally),
            isLoading = isLoading,
            setIsLoading = setIsLoading,
        )

[ppvi]

well looks like isLoading is never changing, looks like viewState.loading should be converted to state in a different way. LiveData.observeAsState() for example

[Manuel Lorenzo]

mmmm I didn’t think of converting it to a state itself

[ppvi]

otherwise compose doesn't know that it has to recompose

[Manuel Lorenzo]

thanks for the tip Jose 👍

[Colton Idle]

@ppvi do you think there would be a benefit to write a lint check that basically somehow be able to detect "Your type is not observable and so it will never recompose". I've hit this issue myself and so I'm just curious if there's more we can do here.