Refactor(Indicator): Optimize indicator

app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/about/LibrariesScreen.kt

@@ -3,11 +3,6 @@ package top.fatweb.oxygen.toolbox.ui.about
 import android.content.Intent
 import android.net.Uri
 import androidx.activity.compose.ReportDrawnWhen
-import androidx.compose.animation.core.Ease
-import androidx.compose.animation.core.animateFloat
-import androidx.compose.animation.core.infiniteRepeatable
-import androidx.compose.animation.core.rememberInfiniteTransition
-import androidx.compose.animation.core.tween
 import androidx.compose.foundation.gestures.Orientation
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
@@ -24,7 +19,6 @@ import androidx.compose.foundation.layout.heightIn
 import androidx.compose.foundation.layout.only
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.safeDrawing
-import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.systemBars
 import androidx.compose.foundation.layout.widthIn
 import androidx.compose.foundation.layout.windowInsetsPadding
@@ -35,7 +29,6 @@ import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.AlertDialog
 import androidx.compose.material3.ExperimentalMaterial3Api
-import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
@@ -50,7 +43,6 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.input.nestedscroll.nestedScroll
 import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.platform.LocalContext
@@ -59,8 +51,8 @@ import androidx.compose.ui.unit.dp
 import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import top.fatweb.oxygen.toolbox.R
-import top.fatweb.oxygen.toolbox.icon.Loading
 import top.fatweb.oxygen.toolbox.icon.OxygenIcons
+import top.fatweb.oxygen.toolbox.ui.component.Indicator
 import top.fatweb.oxygen.toolbox.ui.component.OxygenTopAppBar
 import top.fatweb.oxygen.toolbox.ui.component.scrollbar.DraggableScrollbar
 import top.fatweb.oxygen.toolbox.ui.component.scrollbar.rememberDraggableScroller
@@ -113,8 +105,6 @@ internal fun LibrariesScreen(
     val topAppBarScrollBehavior =
         if (canScroll) TopAppBarDefaults.enterAlwaysScrollBehavior() else TopAppBarDefaults.pinnedScrollBehavior()
 
-    val infiniteTransition = rememberInfiniteTransition(label = "infiniteTransition")
-
     var activeSearch by remember { mutableStateOf(false) }
     var searchValue by remember { mutableStateOf("") }
 
@@ -172,26 +162,7 @@ internal fun LibrariesScreen(
             Box(modifier = Modifier) {
                 when (librariesScreenUiState) {
                     LibrariesScreenUiState.Loading -> {
-                        Column(
+                        Indicator()
-                            modifier = Modifier.fillMaxWidth(),
-                            horizontalAlignment = Alignment.CenterHorizontally,
-                            verticalArrangement = Arrangement.Center
-                        ) {
-                            val angle by infiniteTransition.animateFloat(
-                                initialValue = 0F,
-                                targetValue = 360F,
-                                animationSpec = infiniteRepeatable(
-                                    animation = tween(durationMillis = 800, easing = Ease),
-                                ), label = "angle"
-                            )
-                            Icon(
-                                modifier = Modifier
-                                    .size(32.dp)
-                                    .graphicsLayer { rotationZ = angle },
-                                imageVector = Loading,
-                                contentDescription = ""
-                            )
-                        }
                     }
 
                     LibrariesScreenUiState.Nothing -> {

app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/component/Indicator.kt

@@ -0,0 +1,58 @@
+package top.fatweb.oxygen.toolbox.ui.component
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.material3.LocalContentColor
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.shadow
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.dp
+
+@Composable
+fun Indicator(
+    modifier: Modifier = Modifier,
+    containerColor: Color = MaterialTheme.colorScheme.surfaceContainerHigh,
+    contentColor: Color = MaterialTheme.colorScheme.onSurfaceVariant
+) {
+    Column(
+        modifier = Modifier.fillMaxWidth(),
+        horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.Center
+    ) {
+        CompositionLocalProvider(value = LocalContentColor provides contentColor) {
+            Box(
+                modifier = modifier
+                    .size(SpinnerContainerSize)
+                    .shadow(
+                        elevation = Elevation,
+                        shape = CircleShape,
+                        clip = true
+                    )
+                    .background(color = containerColor, shape = CircleShape)
+            ) {
+                CircularProgressIndicator(
+                    modifier = Modifier
+                        .align(Alignment.Center)
+                        .size(SpinnerSize),
+                    strokeWidth = StrokeWidth,
+                    color = LocalContentColor.current
+                )
+            }
+        }
+    }
+}
+
+private val SpinnerContainerSize = 40.dp
+private val Elevation = 3.dp
+private val StrokeWidth = 2.5.dp
+private val SpinnerSize = 16.dp

app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/settings/SettingsDialog.kt

@@ -1,39 +1,27 @@
 package top.fatweb.oxygen.toolbox.ui.settings
 
 import androidx.compose.animation.AnimatedVisibility
-import androidx.compose.animation.core.Ease
-import androidx.compose.animation.core.animateFloat
-import androidx.compose.animation.core.infiniteRepeatable
-import androidx.compose.animation.core.rememberInfiniteTransition
-import androidx.compose.animation.core.tween
-import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.ColumnScope
-import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.heightIn
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.widthIn
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.AlertDialog
 import androidx.compose.material3.HorizontalDivider
-import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextButton
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
-import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import top.fatweb.oxygen.toolbox.R
-import top.fatweb.oxygen.toolbox.icon.Loading
 import top.fatweb.oxygen.toolbox.icon.OxygenIcons
 import top.fatweb.oxygen.toolbox.model.userdata.DarkThemeConfig
 import top.fatweb.oxygen.toolbox.model.userdata.LanguageConfig
@@ -44,6 +32,7 @@ import top.fatweb.oxygen.toolbox.ui.component.DialogChooserRow
 import top.fatweb.oxygen.toolbox.ui.component.DialogClickerRow
 import top.fatweb.oxygen.toolbox.ui.component.DialogSectionGroup
 import top.fatweb.oxygen.toolbox.ui.component.DialogSectionTitle
+import top.fatweb.oxygen.toolbox.ui.component.Indicator
 import top.fatweb.oxygen.toolbox.ui.theme.OxygenPreviews
 import top.fatweb.oxygen.toolbox.ui.theme.OxygenTheme
 import top.fatweb.oxygen.toolbox.ui.theme.supportsDynamicTheming
@@ -86,7 +75,6 @@ fun SettingsDialog(
     onchangeUseDynamicColor: (useDynamicColor: Boolean) -> Unit
 ) {
     val configuration = LocalConfiguration.current
-    val infiniteTransition = rememberInfiniteTransition(label = "infiniteTransition")
 
     AlertDialog(
         modifier = modifier
@@ -106,26 +94,7 @@ fun SettingsDialog(
             ) {
                 when (settingsUiState) {
                     SettingsUiState.Loading -> {
-                        Column(
+                        Indicator()
-                            modifier = Modifier.fillMaxWidth(),
-                            horizontalAlignment = Alignment.CenterHorizontally,
-                            verticalArrangement = Arrangement.Center
-                        ) {
-                            val angle by infiniteTransition.animateFloat(
-                                initialValue = 0F,
-                                targetValue = 360F,
-                                animationSpec = infiniteRepeatable(
-                                    animation = tween(800, easing = Ease),
-                                ), label = "angle"
-                            )
-                            Icon(
-                                modifier = Modifier
-                                    .size(32.dp)
-                                    .graphicsLayer { rotationZ = angle },
-                                imageVector = Loading,
-                                contentDescription = ""
-                            )
-                        }
                     }
 
                     is SettingsUiState.Success -> {

app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/star/ToolStarScreen.kt

@@ -1,11 +1,6 @@
 package top.fatweb.oxygen.toolbox.ui.star
 
 import androidx.activity.compose.ReportDrawnWhen
-import androidx.compose.animation.core.Ease
-import androidx.compose.animation.core.animateFloat
-import androidx.compose.animation.core.infiniteRepeatable
-import androidx.compose.animation.core.rememberInfiniteTransition
-import androidx.compose.animation.core.tween
 import androidx.compose.foundation.gestures.Orientation
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
@@ -15,11 +10,9 @@ import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.safeDrawing
-import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.systemBars
 import androidx.compose.foundation.layout.windowInsetsBottomHeight
 import androidx.compose.foundation.layout.windowInsetsPadding
@@ -29,9 +22,10 @@ import androidx.compose.foundation.lazy.staggeredgrid.StaggeredGridCells
 import androidx.compose.foundation.lazy.staggeredgrid.StaggeredGridItemSpan
 import androidx.compose.foundation.lazy.staggeredgrid.items
 import androidx.compose.foundation.lazy.staggeredgrid.rememberLazyStaggeredGridState
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.HorizontalDivider
-import androidx.compose.material3.Icon
 import androidx.compose.material3.ModalBottomSheet
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
@@ -42,18 +36,17 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import top.fatweb.oxygen.toolbox.R
-import top.fatweb.oxygen.toolbox.icon.Loading
 import top.fatweb.oxygen.toolbox.icon.OxygenIcons
 import top.fatweb.oxygen.toolbox.model.tool.ToolEntity
 import top.fatweb.oxygen.toolbox.ui.component.DialogClickerRow
 import top.fatweb.oxygen.toolbox.ui.component.DialogSectionGroup
 import top.fatweb.oxygen.toolbox.ui.component.DialogTitle
+import top.fatweb.oxygen.toolbox.ui.component.Indicator
 import top.fatweb.oxygen.toolbox.ui.component.ToolCard
 import top.fatweb.oxygen.toolbox.ui.component.scrollbar.DraggableScrollbar
 import top.fatweb.oxygen.toolbox.ui.component.scrollbar.rememberDraggableScroller
@@ -94,8 +87,6 @@ internal fun StarScreen(
     val state = rememberLazyStaggeredGridState()
     val scrollbarState = state.scrollbarState(itemsAvailable = itemsAvailable)
 
-    val infiniteTransition = rememberInfiniteTransition(label = "infiniteTransition")
-
     var selectedTool by remember { mutableStateOf<ToolEntity?>(null) }
     var isShowMenu by remember { mutableStateOf(true) }
 
@@ -104,24 +95,7 @@ internal fun StarScreen(
     ) {
         when (starScreenUiState) {
             StarScreenUiState.Loading -> {
-                Column(
+                Indicator()
-                    modifier = Modifier.fillMaxWidth(),
-                    horizontalAlignment = Alignment.CenterHorizontally,
-                    verticalArrangement = Arrangement.Center
-                ) {
-                    val angle by infiniteTransition.animateFloat(
-                        initialValue = 0F, targetValue = 360F, animationSpec = infiniteRepeatable(
-                            animation = tween(800, easing = Ease)
-                        ), label = "angle"
-                    )
-                    Icon(
-                        modifier = Modifier
-                            .size(32.dp)
-                            .graphicsLayer { rotationZ = angle },
-                        imageVector = Loading,
-                        contentDescription = ""
-                    )
-                }
             }
 
             StarScreenUiState.Nothing -> {

app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/tools/ToolsScreen.kt

@@ -1,11 +1,6 @@
 package top.fatweb.oxygen.toolbox.ui.tools
 
 import androidx.activity.compose.ReportDrawnWhen
-import androidx.compose.animation.core.Ease
-import androidx.compose.animation.core.animateFloat
-import androidx.compose.animation.core.infiniteRepeatable
-import androidx.compose.animation.core.rememberInfiniteTransition
-import androidx.compose.animation.core.tween
 import androidx.compose.foundation.gestures.Orientation
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
@@ -15,11 +10,9 @@ import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.safeDrawing
-import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.systemBars
 import androidx.compose.foundation.layout.windowInsetsBottomHeight
 import androidx.compose.foundation.layout.windowInsetsPadding
@@ -29,9 +22,10 @@ import androidx.compose.foundation.lazy.staggeredgrid.StaggeredGridCells
 import androidx.compose.foundation.lazy.staggeredgrid.StaggeredGridItemSpan
 import androidx.compose.foundation.lazy.staggeredgrid.items
 import androidx.compose.foundation.lazy.staggeredgrid.rememberLazyStaggeredGridState
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.HorizontalDivider
-import androidx.compose.material3.Icon
 import androidx.compose.material3.ModalBottomSheet
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextButton
@@ -44,7 +38,6 @@ import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
@@ -52,12 +45,12 @@ import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import kotlinx.coroutines.launch
 import top.fatweb.oxygen.toolbox.R
-import top.fatweb.oxygen.toolbox.icon.Loading
 import top.fatweb.oxygen.toolbox.icon.OxygenIcons
 import top.fatweb.oxygen.toolbox.model.tool.ToolEntity
 import top.fatweb.oxygen.toolbox.ui.component.DialogClickerRow
 import top.fatweb.oxygen.toolbox.ui.component.DialogSectionGroup
 import top.fatweb.oxygen.toolbox.ui.component.DialogTitle
+import top.fatweb.oxygen.toolbox.ui.component.Indicator
 import top.fatweb.oxygen.toolbox.ui.component.ToolCard
 import top.fatweb.oxygen.toolbox.ui.component.scrollbar.DraggableScrollbar
 import top.fatweb.oxygen.toolbox.ui.component.scrollbar.rememberDraggableScroller
@@ -113,8 +106,6 @@ internal fun ToolsScreen(
     val state = rememberLazyStaggeredGridState()
     val scrollbarState = state.scrollbarState(itemsAvailable = itemsAvailable)
 
-    val infiniteTransition = rememberInfiniteTransition(label = "infiniteTransition")
-
     var selectedTool by remember { mutableStateOf<ToolEntity?>(null) }
     var isShowMenu by remember { mutableStateOf(true) }
 
@@ -124,24 +115,7 @@ internal fun ToolsScreen(
 
         when (toolsScreenUiState) {
             ToolsScreenUiState.Loading -> {
-                Column(
+                Indicator()
-                    modifier = Modifier.fillMaxWidth(),
-                    horizontalAlignment = Alignment.CenterHorizontally,
-                    verticalArrangement = Arrangement.Center
-                ) {
-                    val angle by infiniteTransition.animateFloat(
-                        initialValue = 0F, targetValue = 360F, animationSpec = infiniteRepeatable(
-                            animation = tween(durationMillis = 800, easing = Ease),
-                        ), label = "angle"
-                    )
-                    Icon(
-                        modifier = Modifier
-                            .size(32.dp)
-                            .graphicsLayer { rotationZ = angle },
-                        imageVector = Loading,
-                        contentDescription = ""
-                    )
-                }
             }
 
             ToolsScreenUiState.Nothing -> {

app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/view/ToolViewScreen.kt

@@ -3,11 +3,6 @@ package top.fatweb.oxygen.toolbox.ui.view
 import android.annotation.SuppressLint
 import android.util.Log
 import android.webkit.ConsoleMessage
-import androidx.compose.animation.core.Ease
-import androidx.compose.animation.core.animateFloat
-import androidx.compose.animation.core.infiniteRepeatable
-import androidx.compose.animation.core.rememberInfiniteTransition
-import androidx.compose.animation.core.tween
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.WindowInsets
@@ -19,10 +14,8 @@ import androidx.compose.foundation.layout.imePadding
 import androidx.compose.foundation.layout.only
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.safeDrawing
-import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.windowInsetsPadding
 import androidx.compose.material3.ExperimentalMaterial3Api
-import androidx.compose.material3.Icon
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
 import androidx.compose.material3.TopAppBarDefaults
@@ -32,10 +25,8 @@ import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.graphicsLayer
 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.kevinnzou.web.AccompanistWebChromeClient
@@ -43,8 +34,8 @@ import com.kevinnzou.web.WebView
 import com.kevinnzou.web.rememberWebViewStateWithHTMLData
 import timber.log.Timber
 import top.fatweb.oxygen.toolbox.R
-import top.fatweb.oxygen.toolbox.icon.Loading
 import top.fatweb.oxygen.toolbox.icon.OxygenIcons
+import top.fatweb.oxygen.toolbox.ui.component.Indicator
 import top.fatweb.oxygen.toolbox.ui.component.OxygenTopAppBar
 import top.fatweb.oxygen.toolbox.util.NativeWebApi
 
@@ -76,8 +67,6 @@ internal fun ToolViewScreen(
 ) {
     val context = LocalContext.current
 
-    val infiniteTransition = rememberInfiniteTransition(label = "infiniteTransition")
-
     Scaffold(
         modifier = Modifier,
         containerColor = Color.Transparent,
@@ -117,26 +106,7 @@ internal fun ToolViewScreen(
             )
             when (toolViewUiState) {
                 ToolViewUiState.Loading -> {
-                    Column(
+                    Indicator()
-                        modifier = Modifier.fillMaxSize(),
-                        horizontalAlignment = Alignment.CenterHorizontally,
-                        verticalArrangement = Arrangement.Center
-                    ) {
-                        val angle by infiniteTransition.animateFloat(
-                            initialValue = 0F,
-                            targetValue = 360F,
-                            animationSpec = infiniteRepeatable(
-                                animation = tween(durationMillis = 800, easing = Ease),
-                            ), label = "angle"
-                        )
-                        Icon(
-                            modifier = Modifier
-                                .size(32.dp)
-                                .graphicsLayer { rotationZ = angle },
-                            imageVector = Loading,
-                            contentDescription = ""
-                        )
-                    }
                 }
 
                 ToolViewUiState.Error -> {