Compose performance optimization (#137)

* 람다 함수를 함수 참조 형태로 변경

* derivedStateOf 를 remember 로 감싸줌

* commit compose debug metrics update

* 드롭다운 메뉴 위치조정

* compose release metric update

* bandalart 관련 ui component 패키징

core/ui/src/main/kotlin/com/nexters/bandalart/android/core/ui/component/BandalartDropDownMenu.kt

@@ -46,7 +46,7 @@ fun BandalartDropDownMenu(
  expanded = isDropDownMenuOpened,
  onDismissRequest = { openDropDownMenu(false) },
  offset = DpOffset(
- x = (-50).dp,
+ x = (-18).dp,
  y = 0.dp,
  ),
  ) {

feature/home/src/main/kotlin/com/nexters/bandalart/android/feature/home/BandalartBottomSheet.kt

@@ -87,9 +87,9 @@ import com.nexters.bandalart.android.feature.home.model.BandalartCellUiModel
 import com.nexters.bandalart.android.feature.home.model.UpdateBandalartMainCellModel
 import com.nexters.bandalart.android.feature.home.model.UpdateBandalartSubCellModel
 import com.nexters.bandalart.android.feature.home.model.UpdateBandalartTaskCellModel
-import com.nexters.bandalart.android.feature.home.ui.BandalartColorPicker
-import com.nexters.bandalart.android.feature.home.ui.BandalartDatePicker
-import com.nexters.bandalart.android.feature.home.ui.BandalartEmojiPicker
+import com.nexters.bandalart.android.feature.home.ui.bandalart.BandalartColorPicker
+import com.nexters.bandalart.android.feature.home.ui.bandalart.BandalartDatePicker
+import com.nexters.bandalart.android.feature.home.ui.bandalart.BandalartEmojiPicker
 import java.time.LocalDateTime
 import kotlinx.coroutines.launch
 

feature/home/src/main/kotlin/com/nexters/bandalart/android/feature/home/HomeScreen.kt

@@ -1,4 +1,3 @@
-@file:OptIn(ExperimentalMaterial3Api::class)
 @file:SuppressLint("StringFormatInvalid")
 
 package com.nexters.bandalart.android.feature.home
@@ -15,32 +14,32 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
-import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.Surface
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.derivedStateOf
 import androidx.compose.runtime.getValue
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
+import com.nexters.bandalart.android.core.designsystem.theme.Gray100
+import com.nexters.bandalart.android.core.designsystem.theme.Gray50
 import com.nexters.bandalart.android.core.ui.R
 import com.nexters.bandalart.android.core.ui.component.BandalartDeleteAlertDialog
 import com.nexters.bandalart.android.core.ui.component.LoadingScreen
 import com.nexters.bandalart.android.core.ui.component.NetworkErrorAlertDialog
 import com.nexters.bandalart.android.core.ui.extension.ThemeColor
-import com.nexters.bandalart.android.core.designsystem.theme.Gray100
-import com.nexters.bandalart.android.core.designsystem.theme.Gray50
 import com.nexters.bandalart.android.feature.home.model.BandalartDetailUiModel
-import com.nexters.bandalart.android.feature.home.ui.BandalartChart
-import com.nexters.bandalart.android.feature.home.ui.BandalartEmojiBottomSheet
-import com.nexters.bandalart.android.feature.home.ui.BandalartListBottomSheet
-import com.nexters.bandalart.android.feature.home.ui.BandalartSkeleton
+import com.nexters.bandalart.android.feature.home.ui.bandalart.BandalartChart
+import com.nexters.bandalart.android.feature.home.ui.bandalart.BandalartEmojiBottomSheet
+import com.nexters.bandalart.android.feature.home.ui.bandalart.BandalartListBottomSheet
+import com.nexters.bandalart.android.feature.home.ui.bandalart.BandalartSkeleton
 import com.nexters.bandalart.android.feature.home.ui.HomeHeader
 import com.nexters.bandalart.android.feature.home.ui.HomeTopBar
 import com.nexters.bandalart.android.feature.home.ui.ShareButton
@@ -58,7 +57,9 @@ internal fun HomeRoute(
 ) {
  val uiState by viewModel.uiState.collectAsStateWithLifecycle()
  val context = LocalContext.current
- val bandalartCount by derivedStateOf { uiState.bandalartList.size }
+ val bandalartCount by remember {
+ derivedStateOf { uiState.bandalartList.size }
+ }
 
  LaunchedEffect(viewModel) {
  viewModel.eventFlow.collect { event ->
@@ -81,24 +82,24 @@ internal fun HomeRoute(
  modifier = modifier,
  uiState = uiState,
  bandalartCount = bandalartCount,
- navigateToComplete = { key, title, emoji -> navigateToComplete(key, title, emoji) },
- getBandalartList = { key -> viewModel.getBandalartList(key) },
+ navigateToComplete = navigateToComplete,
+ getBandalartList = viewModel::getBandalartList,
  getBandalartDetail = viewModel::getBandalartDetail,
  createBandalart = viewModel::createBandalart,
  deleteBandalart = viewModel::deleteBandalart,
  // loadingChanged = { state -> viewModel.loadingChanged(state) },
- showSkeletonChanged = { state -> viewModel.showSkeletonChanged(state) },
- openDropDownMenu = { state -> viewModel.openDropDownMenu(state) },
- openEmojiBottomSheet = { state -> viewModel.openEmojiBottomSheet(state) },
- openBandalartDeleteAlertDialog = { state -> viewModel.openBandalartDeleteAlertDialog(state) },
- openCellBottomSheet = { state -> viewModel.openCellBottomSheet(state) },
- bottomSheetDataChanged = { state -> viewModel.bottomSheetDataChanged(state) },
- openBandalartListBottomSheet = { state -> viewModel.openBandalartListBottomSheet(state) },
- setRecentBandalartKey = { key -> viewModel.setRecentBandalartKey(key) },
- shareBandalart = { key -> viewModel.shareBandalart(key) },
+ showSkeletonChanged = viewModel::showSkeletonChanged,
+ openDropDownMenu = viewModel::openDropDownMenu,
+ openEmojiBottomSheet = viewModel::openEmojiBottomSheet,
+ openBandalartDeleteAlertDialog = viewModel::openBandalartDeleteAlertDialog,
+ openCellBottomSheet = viewModel::openCellBottomSheet,
+ bottomSheetDataChanged = viewModel::bottomSheetDataChanged,
+ openBandalartListBottomSheet = viewModel::openBandalartListBottomSheet,
+ setRecentBandalartKey = viewModel::setRecentBandalartKey,
+ shareBandalart = viewModel::shareBandalart,
  initShareUrl = viewModel::initShareUrl,
- checkCompletedBandalartKey = { key -> viewModel.checkCompletedBandalartKey(key) },
- openNetworkErrorDialog = { state -> viewModel.openNetworkErrorAlertDialog(state) },
+ checkCompletedBandalartKey = viewModel::checkCompletedBandalartKey,
+ openNetworkErrorDialog = viewModel::openNetworkErrorAlertDialog,
  )
 }
 

feature/home/src/main/kotlin/com/nexters/bandalart/android/feature/home/ui/BandalartCell.kt → feature/home/src/main/kotlin/com/nexters/bandalart/android/feature/home/ui/bandalart/BandalartCell.kt

@@ -1,4 +1,4 @@
-package com.nexters.bandalart.android.feature.home.ui
+package com.nexters.bandalart.android.feature.home.ui.bandalart
 
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background

feature/home/src/main/kotlin/com/nexters/bandalart/android/feature/home/ui/BandalartCellGrid.kt → feature/home/src/main/kotlin/com/nexters/bandalart/android/feature/home/ui/bandalart/BandalartCellGrid.kt

@@ -1,4 +1,4 @@
-package com.nexters.bandalart.android.feature.home.ui
+package com.nexters.bandalart.android.feature.home.ui.bandalart
 
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column

feature/home/src/main/kotlin/com/nexters/bandalart/android/feature/home/ui/BandalartChart.kt → feature/home/src/main/kotlin/com/nexters/bandalart/android/feature/home/ui/bandalart/BandalartChart.kt

@@ -1,4 +1,4 @@
-package com.nexters.bandalart.android.feature.home.ui
+package com.nexters.bandalart.android.feature.home.ui.bandalart
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box

feature/home/src/main/kotlin/com/nexters/bandalart/android/feature/home/ui/BandalartColorPicker.kt → feature/home/src/main/kotlin/com/nexters/bandalart/android/feature/home/ui/bandalart/BandalartColorPicker.kt

@@ -1,4 +1,4 @@
-package com.nexters.bandalart.android.feature.home.ui
+package com.nexters.bandalart.android.feature.home.ui.bandalart
 
 import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.layout.Arrangement

feature/home/src/main/kotlin/com/nexters/bandalart/android/feature/home/ui/BandalartDatePicker.kt → feature/home/src/main/kotlin/com/nexters/bandalart/android/feature/home/ui/bandalart/BandalartDatePicker.kt

@@ -1,7 +1,7 @@
 @file:OptIn(ExperimentalMaterial3Api::class)
 @file:SuppressLint("FrequentlyChangedStateReadInComposition")
 
-package com.nexters.bandalart.android.feature.home.ui
+package com.nexters.bandalart.android.feature.home.ui.bandalart
 
 import android.annotation.SuppressLint
 import androidx.compose.foundation.clickable

feature/home/src/main/kotlin/com/nexters/bandalart/android/feature/home/ui/BandalartEmojiBottomSheet.kt → feature/home/src/main/kotlin/com/nexters/bandalart/android/feature/home/ui/bandalart/BandalartEmojiBottomSheet.kt

@@ -1,6 +1,6 @@
 @file:OptIn(ExperimentalMaterial3Api::class)
 
-package com.nexters.bandalart.android.feature.home.ui
+package com.nexters.bandalart.android.feature.home.ui.bandalart
 
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.wrapContentSize

feature/home/src/main/kotlin/com/nexters/bandalart/android/feature/home/ui/BandalartEmojiPicker.kt → feature/home/src/main/kotlin/com/nexters/bandalart/android/feature/home/ui/bandalart/BandalartEmojiPicker.kt

@@ -1,6 +1,6 @@
 @file:OptIn(ExperimentalMaterial3Api::class)
 
-package com.nexters.bandalart.android.feature.home.ui
+package com.nexters.bandalart.android.feature.home.ui.bandalart
 
 import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.background

feature/home/src/main/kotlin/com/nexters/bandalart/android/feature/home/ui/BandalartItem.kt → feature/home/src/main/kotlin/com/nexters/bandalart/android/feature/home/ui/bandalart/BandalartItem.kt

@@ -1,6 +1,6 @@
 @file:OptIn(ExperimentalMaterial3Api::class)
 
-package com.nexters.bandalart.android.feature.home.ui
+package com.nexters.bandalart.android.feature.home.ui.bandalart
 
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background

feature/home/src/main/kotlin/com/nexters/bandalart/android/feature/home/ui/BandalartListBottomSheet.kt → feature/home/src/main/kotlin/com/nexters/bandalart/android/feature/home/ui/bandalart/BandalartListBottomSheet.kt

@@ -1,6 +1,6 @@
 @file:OptIn(ExperimentalMaterial3Api::class)
 
-package com.nexters.bandalart.android.feature.home.ui
+package com.nexters.bandalart.android.feature.home.ui.bandalart
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement

feature/home/src/main/kotlin/com/nexters/bandalart/android/feature/home/ui/BandalartSkeleton.kt → feature/home/src/main/kotlin/com/nexters/bandalart/android/feature/home/ui/bandalart/BandalartSkeleton.kt

@@ -1,4 +1,4 @@
-package com.nexters.bandalart.android.feature.home.ui
+package com.nexters.bandalart.android.feature.home.ui.bandalart
 
 import androidx.compose.animation.core.FastOutLinearInEasing
 import androidx.compose.animation.core.RepeatMode

feature/home/src/main/kotlin/com/nexters/bandalart/android/feature/home/ui/BandalartSkeletonScreen.kt → feature/home/src/main/kotlin/com/nexters/bandalart/android/feature/home/ui/bandalart/BandalartSkeletonScreen.kt

@@ -1,4 +1,4 @@
-package com.nexters.bandalart.android.feature.home.ui
+package com.nexters.bandalart.android.feature.home.ui.bandalart
 
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
@@ -48,6 +48,7 @@ import com.nexters.bandalart.android.core.designsystem.theme.Gray50
 import com.nexters.bandalart.android.core.designsystem.theme.Gray600
 import com.nexters.bandalart.android.core.designsystem.theme.Gray900
 import com.nexters.bandalart.android.core.designsystem.theme.White
+import com.nexters.bandalart.android.feature.home.ui.CompletionRatioProgressBar
 
 @Composable
 fun BandalartSkeletonScreen(

feature/onboarding/src/main/kotlin/com/nexters/bandalart/android/feature/onboarding/OnBoardingScreen.kt

@@ -42,11 +42,7 @@ import com.nexters.bandalart.android.feature.onboarding.navigation.ONBOARDING_NA
 internal fun OnBoardingRoute(
  navigateToHome: (NavOptions) -> Unit,
 ) {
- OnBoardingScreen(
- navigateToHome = { options ->
- navigateToHome(options)
- },
- )
+ OnBoardingScreen(navigateToHome = navigateToHome)
 }
 
 @Composable

feature/splash/src/main/kotlin/com/nexters/bandalart/android/feature/splash/SplashScreen.kt

@@ -31,12 +31,8 @@ internal fun SplashRoute(
 
  SplashScreen(
  uiState = uiState,
- navigateToOnBoarding = { options ->
- navigateToOnBoarding(options)
- },
- navigateToHome = { options ->
- navigateToHome(options)
- },
+ navigateToOnBoarding = navigateToOnBoarding,
+ navigateToHome = navigateToHome,
  openNetworkErrorAlertDialog = viewModel::openNetworkErrorAlertDialog,
  createGuestLoginToken = viewModel::createGuestLoginToken,
  )

report/compose-metrics/home_debug-module.json

@@ -1,25 +1,25 @@
 {
- "skippableComposables": 31,
- "restartableComposables": 130,
+ "skippableComposables": 1,
+ "restartableComposables": 5,
  "readonlyComposables": 0,
- "totalComposables": 131,
- "restartGroups": 130,
- "totalGroups": 189,
- "staticArguments": 115,
- "certainArguments": 79,
- "knownStableArguments": 1377,
- "knownUnstableArguments": 58,
- "unknownStableArguments": 6,
- "totalArguments": 1441,
+ "totalComposables": 5,
+ "restartGroups": 5,
+ "totalGroups": 16,
+ "staticArguments": 3,
+ "certainArguments": 27,
+ "knownStableArguments": 111,
+ "knownUnstableArguments": 8,
+ "unknownStableArguments": 7,
+ "totalArguments": 126,
  "markedStableClasses": 0,
- "inferredStableClasses": 9,
- "inferredUnstableClasses": 6,
- "inferredUncertainClasses": 3,
- "effectivelyStableClasses": 9,
- "totalClasses": 18,
- "memoizedLambdas": 48,
- "singletonLambdas": 1,
- "singletonComposableLambdas": 6,
- "composableLambdas": 24,
- "totalLambdas": 94
+ "inferredStableClasses": 0,
+ "inferredUnstableClasses": 0,
+ "inferredUncertainClasses": 0,
+ "effectivelyStableClasses": 0,
+ "totalClasses": 0,
+ "memoizedLambdas": 8,
+ "singletonLambdas": 0,
+ "singletonComposableLambdas": 0,
+ "composableLambdas": 1,
+ "totalLambdas": 13
 }

report/compose-metrics/home_release-module.json

@@ -4,8 +4,8 @@
  "readonlyComposables": 0,
  "totalComposables": 131,
  "restartGroups": 130,
- "totalGroups": 189,
- "staticArguments": 237,
+ "totalGroups": 192,
+ "staticArguments": 236,
  "certainArguments": 79,
  "knownStableArguments": 1377,
  "knownUnstableArguments": 58,
@@ -17,9 +17,9 @@
  "inferredUncertainClasses": 3,
  "effectivelyStableClasses": 9,
  "totalClasses": 18,
- "memoizedLambdas": 48,
+ "memoizedLambdas": 46,
  "singletonLambdas": 1,
  "singletonComposableLambdas": 6,
  "composableLambdas": 24,
- "totalLambdas": 94
+ "totalLambdas": 80
 }

report/compose-metrics/onboarding_debug-module.json

@@ -1,25 +1,25 @@
 {
- "skippableComposables": 6,
- "restartableComposables": 16,
+ "skippableComposables": 5,
+ "restartableComposables": 12,
  "readonlyComposables": 0,
- "totalComposables": 16,
- "restartGroups": 16,
- "totalGroups": 19,
- "staticArguments": 17,
+ "totalComposables": 12,
+ "restartGroups": 12,
+ "totalGroups": 15,
+ "staticArguments": 16,
  "certainArguments": 2,
- "knownStableArguments": 129,
+ "knownStableArguments": 117,
  "knownUnstableArguments": 3,
  "unknownStableArguments": 0,
- "totalArguments": 132,
+ "totalArguments": 120,
  "markedStableClasses": 0,
  "inferredStableClasses": 0,
  "inferredUnstableClasses": 0,
  "inferredUncertainClasses": 0,
  "effectivelyStableClasses": 0,
  "totalClasses": 0,
- "memoizedLambdas": 9,
+ "memoizedLambdas": 7,
  "singletonLambdas": 0,
  "singletonComposableLambdas": 0,
- "composableLambdas": 5,
- "totalLambdas": 9
+ "composableLambdas": 4,
+ "totalLambdas": 7
 }

report/compose-metrics/onboarding_release-module.json

@@ -7,19 +7,19 @@
  "totalGroups": 19,
  "staticArguments": 27,
  "certainArguments": 2,
- "knownStableArguments": 129,
+ "knownStableArguments": 127,
  "knownUnstableArguments": 3,
  "unknownStableArguments": 0,
- "totalArguments": 132,
+ "totalArguments": 130,
  "markedStableClasses": 0,
  "inferredStableClasses": 0,
  "inferredUnstableClasses": 0,
  "inferredUncertainClasses": 0,
  "effectivelyStableClasses": 0,
  "totalClasses": 0,
- "memoizedLambdas": 9,
+ "memoizedLambdas": 8,
  "singletonLambdas": 0,
  "singletonComposableLambdas": 0,
  "composableLambdas": 5,
- "totalLambdas": 9
+ "totalLambdas": 8
 }