feat: API 通信待ち時にインジケーターを表示 (#9)

kokoichi206 · Dec 6, 2022 · 1c40e9d · 1c40e9d
1 parent 107809f
commit 1c40e9d
Show file tree

Hide file tree

Showing 4 changed files with 96 additions and 3 deletions.
diff --git a/app/src/main/kotlin/jp/co/yumemi/android/code_check/presentation/main/MainView.kt b/app/src/main/kotlin/jp/co/yumemi/android/code_check/presentation/main/MainView.kt
@@ -20,6 +20,7 @@ import jp.co.yumemi.android.code_check.models.Repository
 import jp.co.yumemi.android.code_check.presentation.MainActivity.Companion.updateLastSearchDate
 import jp.co.yumemi.android.code_check.presentation.main.component.OneRepository
 import jp.co.yumemi.android.code_check.presentation.main.component.RecentSearched
+import jp.co.yumemi.android.code_check.presentation.util.CustomCircularProgressIndicator
 import jp.co.yumemi.android.code_check.presentation.util.SearchBar
 import jp.co.yumemi.android.code_check.presentation.util.TestTags
 
@@ -44,7 +45,7 @@ fun MainView(
         }.collect {
             if (it.visibleItemsInfo.isNotEmpty()) {
                 val info = it.visibleItemsInfo[0]
-                if (lastIndex != info.index ) {
+                if (lastIndex != info.index) {
                     // Scroll された Index 分、呼び出し元に返してあげる
                     val diff = lastIndex - info.index
                     onScroll(diff)
@@ -61,6 +62,8 @@ fun MainView(
             .fillMaxSize()
             .testTag(TestTags.MAIN_VIEW)
     ) {
+        CustomCircularProgressIndicator(visible = uiState.isLoading)
+
         Column(
             modifier = Modifier
                 .fillMaxSize()

diff --git a/app/src/main/kotlin/jp/co/yumemi/android/code_check/presentation/theme/Colors.kt b/app/src/main/kotlin/jp/co/yumemi/android/code_check/presentation/theme/Colors.kt
@@ -20,7 +20,9 @@ val myLightColorScheme = lightColorScheme(
     onPrimary = Color.White,
     background = Color.White,
     onBackground = Color.Black,
-    secondary = SecondaryGreen,
+    secondary = Color.White,
+    onSecondary = SecondaryGreen,
+    outline = Color.Gray,
 )
 
 @SuppressLint("ConflictingOnColor")
@@ -29,5 +31,7 @@ val myDarkColorScheme = darkColorScheme(
     onPrimary = PrimaryBlue,
     background = Color(0xFF1A1C19),
     onBackground = Color(0xFFDAE1FD),
-    secondary = SecondaryGreen,
+    secondary = Color(0xFF454845),
+    onSecondary = SecondaryGreen,
+    outline = Color.Gray,
 )
diff --git a/app/src/main/kotlin/jp/co/yumemi/android/code_check/presentation/user/UserView.kt b/app/src/main/kotlin/jp/co/yumemi/android/code_check/presentation/user/UserView.kt
@@ -19,6 +19,7 @@ import jp.co.yumemi.android.code_check.models.User
 import jp.co.yumemi.android.code_check.presentation.MainActivity
 import jp.co.yumemi.android.code_check.presentation.util.SearchBar
 import jp.co.yumemi.android.code_check.presentation.user.component.OneUser
+import jp.co.yumemi.android.code_check.presentation.util.CustomCircularProgressIndicator
 import jp.co.yumemi.android.code_check.presentation.util.TestTags
 
 @Composable
@@ -75,6 +76,8 @@ fun UserViewMain(
             .fillMaxSize()
             .testTag(TestTags.USER_VIEW)
     ) {
+        CustomCircularProgressIndicator(visible = uiState.isLoading)
+
         Column(
             modifier = Modifier
                 .fillMaxSize()

diff --git a/...tlin/jp/co/yumemi/android/code_check/presentation/util/CustomCircularProgressIndicator.kt b/...tlin/jp/co/yumemi/android/code_check/presentation/util/CustomCircularProgressIndicator.kt
@@ -0,0 +1,83 @@
+package jp.co.yumemi.android.code_check.presentation.util
+
+import android.content.res.Configuration
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.core.tween
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material.CircularProgressIndicator
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.draw.shadow
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import jp.co.yumemi.android.code_check.presentation.theme.CustomTheme
+
+
+@Composable
+fun CustomCircularProgressIndicator(
+    size: Dp = 24.dp,
+    visible: Boolean = true,
+    durationMillis: Int = 200,
+) {
+    AnimatedVisibility(
+        modifier = Modifier
+            .fillMaxSize(),
+        visible = visible,
+        enter = fadeIn(tween(durationMillis)),
+        exit = fadeOut(tween(durationMillis)),
+    ) {
+        Box(
+            modifier = Modifier
+                .fillMaxSize(),
+            contentAlignment = Alignment.Center,
+        ) {
+
+            CircularProgressIndicator(
+                modifier = Modifier
+                    .shadow(
+                        elevation = size / 3,
+                        shape = CircleShape,
+                        ambientColor = MaterialTheme.colorScheme.outline,
+                    )
+                    .clip(CircleShape)
+                    .background(MaterialTheme.colorScheme.secondary)
+                    .padding(size / 2)
+                    .size(size),
+                color = MaterialTheme.colorScheme.onSecondary,
+                strokeWidth = 4.dp,
+            )
+        }
+    }
+}
+
+@Preview(
+    showBackground = true,
+)
+@Composable
+fun CustomCircularProgressIndicatorPreview() {
+    CustomTheme {
+        CustomCircularProgressIndicator()
+    }
+}
+
+@Preview(
+    showBackground = true,
+    uiMode = Configuration.UI_MODE_NIGHT_YES,
+)
+@Composable
+fun CustomCircularProgressIndicatorWithNightModePreview() {
+    CustomTheme {
+        CustomCircularProgressIndicator()
+    }
+}