I've multiple network requests in single screen ha...

# compose

[rajesh]

I've multiple network requests in single screen having different observers as below

val user by remember(profileViewModel) { profileViewModel.user }.collectAsState()
val posts by remember(profileViewModel) { profileViewModel.posts }.collectAsState()

when (user) {
	is UiState.Loading -> {
		CircularProgressIndicator(
			modifier = Modifier.wrapContentWidth(CenterHorizontally)
		)
	}
	is UiState.Success -> {
		(user as UiState.Success).data?.let {
			ProfileView(user = it)
		}
	}
}

when (posts) {
	is UiState.Loading -> {
		CircularProgressIndicator(
			modifier = Modifier.wrapContentWidth(CenterHorizontally)
		)
	}
	is UiState.Success -> {
		(posts as UiState.Success).data?.let {
			PostView(post = it)
		}
	}
}

How do i make sure that PostView() is drawn below ProfileView()?

[Zun]

Just a guess but you can already build empty views that accept the data as state parameter and once your ViewModel has data they will be passed automatically to that view

[martinsumera]

Wrap the both when cases with Column.

Column {
    when (user) ….
    when (posts) ….
}

[rajesh]

@martinsumera its not working as expected

[martinsumera]

What is the result and what is your expectation?

[rajesh]

result is once there is data available for posts, it removes user screen. my expectation is it user data should be above and post data below it

[Zun]

what about

Column {
TopView()
BottomView()
}

fun TopView() {
// load async data
}

[rajesh]

same result. once TopView gets data, it replace BottomView

[Zun]

can you share your code?

[rajesh]

fun ProfileScreen(profileViewModel: ProfileViewModel) {
	Column {
		ProfileView(profileViewModel)
		PostView(profileViewModel)
	}
}

fun ProfileView(profileViewModel: ProfileViewModel) {
    val user by remember(profileViewModel) { profileViewModel.user }.collectAsState()
    when (user) {
        is UiState.Loading -> {
            CircularProgressIndicator(
                modifier = Modifier.wrapContentWidth(CenterHorizontally)
            )
        }
        is UiState.Success -> {
            (user as UiState.Success).data?.let { user ->
                Scaffold(
                    topBar = { ProfileAppBar(user) }
                ) { innerPadding ->
                    val modifier = Modifier.padding(innerPadding)
                    Column(modifier = modifier) {
                        UserInfo(user = user)
                        Spacer(modifier = Modifier.padding(top = 10.dp))
                    }
                }
            }
        }
    }
}


fun PostView(profileViewModel: ProfileViewModel) {
    val posts by remember(profileViewModel) { profileViewModel.posts }.collectAsState()

    when (posts) {
        is UiState.Loading -> {
            CircularProgressIndicator(
                modifier = Modifier.wrapContentWidth(CenterHorizontally)
            )
        }
        is UiState.Success -> {
            Log.d(TAG, "posts: ${(posts as UiState.Success).data}")
            (posts as UiState.Success).data?.let { posts ->
                lazyGridFor(posts) { post, index ->
                    GridItem(post = post) {
                    }
                }
            }
        }
    }
}