0

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 -> {}
                    }
                }
            }
        }
  • Normally if you add an Item to the list it would be at the bottom automatically but because you "reversed()" the list it's on top.. So remove the reversed() and try again – helpinghand Oct 18 '22 at 08:08

0 Answers0