Android Clean Architecture Field Guide

@Composable
fun LoginScreen(
  viewModel: AuthViewModel = hiltViewModel(),
  onSuccess: () -> Unit,
) {
  val uiState by viewModel.uiState.collectAsStateWithLifecycle()
  val snackbar = remember { SnackbarHostState() }

  LaunchedEffect(uiState) {
    when (val s = uiState) {
      is AuthUiState.Success -> onSuccess()
      is AuthUiState.Error   -> snackbar.showSnackbar(s.message)
      else -> {}
    }
  }

  Scaffold(snackbarHost = { SnackbarHost(snackbar) }) { pad ->
    Box(modifier = Modifier.padding(pad)) {
      LoginForm(
        isLoading = uiState is AuthUiState.Loading,
        onLogin   = viewModel::login,
      )
    }
  }
}

@Composable
fun AppNavGraph(navController: NavHostController) {
  NavHost(
    navController = navController,
    startDestination = "login",
  ) {
    composable("login") {
      LoginScreen(
        onSuccess = { navController.navigate("home") {
          popUpTo("login") { inclusive = true }
        }}
      )
    }

    composable(
      route = "product/{id}",
      arguments = listOf(navArgument("id") {
        type = NavType.StringType
      }),
      // shared element transition destination
      enterTransition = {
        fadeIn(tween(300)) + slideIntoContainer(
          towards = SlideDirection.Start,
          animationSpec = tween(300, easing = EaseOutCubic),
        )
      },
      exitTransition = {
        fadeOut(tween(200)) + slideOutOfContainer(
          towards = SlideDirection.End,
          animationSpec = tween(200),
        )
      },
    ) { backStack ->
      val id = backStack.arguments?.getString("id")!!
      ProductDetailScreen(productId = id)
    }
  }
}

@Composable
fun AnimatedProductList(products: List<Product>) {
  LazyColumn {
    itemsIndexed(products) { index, product ->
      var visible by remember { mutableStateOf(false) }

      LaunchedEffect(Unit) {
        delay(index * 60L)  // stagger per item
        visible = true
      }

      AnimatedVisibility(
        visible = visible,
        enter = fadeIn(tween(350)) +
          slideInVertically(
            initialOffsetY = { it / 5 },
            animationSpec = tween(350, easing = EaseOutCubic),
          ),
      ) {
        ProductCard(product = product)
      }
    }
  }
}

// Requires Compose 1.7+ / BOM 2024.09+
// SharedTransitionLayout wraps NavHost

@Composable
fun AppNavGraph() {
  SharedTransitionLayout {
    NavHost(...) {
      composable("products") {
        ProductListScreen(
          sharedTransitionScope = this@SharedTransitionLayout,
          animatedVisibilityScope = this@composable,
        )
      }
      composable("product/{id}") {
        ProductDetailScreen(
          sharedTransitionScope = this@SharedTransitionLayout,
          animatedVisibilityScope = this@composable,
        )
      }
    }
  }
}

// In list item — mark the shared element
Image(
  painter = ...,
  modifier = Modifier.sharedElement(
    state = rememberSharedContentState(
      key = "product-image-${product.id}"),
    animatedVisibilityScope = animatedVisibilityScope,
    boundsTransform = { _, _ ->
      tween(400, easing = EaseInOutCubic)
    },
  ),
)

// Same key on detail screen — framework
// handles the morph automatically

@Composable
fun SearchResultsArea(uiState: SearchUiState) {
  AnimatedContent(
    targetState = uiState,
    transitionSpec = {
      (fadeIn(tween(220)) +
        slideInVertically { it / 10 })
      .togetherWith(
        fadeOut(tween(180)) +
          slideOutVertically { -it / 10 }
      )
    },
    label = "search-results",
  ) { state ->
    when (state) {
      is SearchUiState.Loading  -> ShimmerList()
      is SearchUiState.Loaded   -> ResultList(state.items)
      is SearchUiState.Empty    -> EmptyState()
      is SearchUiState.Error    -> ErrorView(state.msg)
    }
  }
}

@Composable
fun LottieView(
  assetRes: Int,
  modifier: Modifier = Modifier,
  iterations: Int = LottieConstants.IterateForever,
) {
  val composition by rememberLottieComposition(
    LottieCompositionSpec.RawRes(assetRes)
  )
  val progress by animateLottieCompositionAsState(
    composition  = composition,
    iterations   = iterations,
    isPlaying    = true,
    restartOnPlay = false,
  )
  LottieAnimation(
    composition = composition,
    progress    = { progress },
    modifier    = modifier,
  )
}

// Usage:
LottieView(assetRes = R.raw.success_check,
  modifier = Modifier.size(120.dp))

LottieView(assetRes = R.raw.empty_state,
  iterations = LottieConstants.IterateForever)