I was able to implement a tinder like a card stack using compose just looping and stacking the user profile card on top of them but When I load the screen. It's taking a few seconds to load and is not good UX so I need some suggestions on how can I minimize loading time. I tried using mutableState and limiting the maximum stack to render UI but this logic not working correctly. When I swipe a card, a new card will appear on Top of the stack. I want it to be on the bottom of the stack.
val maxStackSize = remember { mutableStateOf(MAX_CARD_STACK_SIZE) }
userList.reversed().forEachIndexed { index, (user, state) ->
if (state.swipedDirection == null && index < maxStackSize.value) {
ProfileCard(
Modifier
.swipableCard(
state = state,
blockedSwipeDirections = listOf(SwipeDirection.Down),
onSwiped = {},
onSwipeCancel = {}
)
.padding(SloTheme.dimensions.paddingMedium),
userList.getOrNull(index)?.user,
userList,
scope,
viewModel
)
}
LaunchedEffect(user, state.swipedDirection) {
if (state.swipedDirection != null) {
when (state.swipedDirection) {
SwipeDirection.Left -> {
maxStackSize.value++
}
SwipeDirection.Right -> {
viewModel.saveLikedUser(user.id)
viewModel.checkIfMutualLike(user)
maxStackSize.value++
}
SwipeDirection.Up -> {}
SwipeDirection.Down -> {}
else -> {}
}
}
}
}