code review.

Author: commandiron

app/src/main/java/com/commandiron/composeloading/MainActivity.kt

@@ -44,7 +44,7 @@ fun ShowScreen() {
             }
         }
     ) {
-        HorizontalPager(state = state, count = 15) {
+        HorizontalPager(state = state, count = 16) {
             when(currentPage){
                 0 -> { ShowGrid() }
 
@@ -72,9 +72,11 @@ fun ShowScreen() {
 
                 12 -> { FoldingCube(Modifier.background(StarCommandBlue).fillMaxSize()) }
 
-                13 -> { LoadingBar(fakeMillis = 10000, fillColor = Bluetiful) }
+                13 -> { InstaSpinner(Modifier.background(BattleshipGrey).fillMaxSize()) }
 
-                14 -> { LoadingDots("Loading") }
+                14 -> { LoadingBar(Modifier.background(MaximumYellowRed).fillMaxSize(), fakeMillis = 10000, fillColor = Bluetiful) }
+
+                15 -> { LoadingDots(Modifier.background(GOGreen).fillMaxSize(),"Loading") }
             }
         }
     }

app/src/main/java/com/commandiron/composeloading/ShowGrid.kt

@@ -2,16 +2,19 @@ package com.commandiron.composeloading
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.*
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import com.commandiron.compose_loading.*
 import com.commandiron.composeloading.ui.theme.*
 
 @Composable
 fun ShowGrid(
-    modifier: Modifier = Modifier
+    modifier: Modifier = Modifier,
+    gridSize: Dp = 60.dp
 ) {
     Column(
         modifier = modifier.fillMaxSize(),
@@ -21,68 +24,89 @@ fun ShowGrid(
         Row {
             RotatingPlane(
                 modifier = Modifier
-                    .size(60.dp)
+                    .size(gridSize)
                     .background(BurntOrange)
             )
             ChasingDots(
                 modifier = Modifier
-                    .size(60.dp)
+                    .size(gridSize)
                     .background(Charcoal)
             )
             DoubleBounce(
                 modifier = Modifier
-                    .size(60.dp)
+                    .size(gridSize)
                     .background(MountainMeadow)
             )
             Wave(
                 modifier = Modifier
-                    .size(60.dp)
+                    .size(gridSize)
                     .background(StarCommandBlue)
             )
         }
         Row {
             WanderingCubes(
                 modifier = Modifier
-                    .size(60.dp)
+                    .size(gridSize)
                     .background(BattleshipGrey)
             )
             Pulse(
                 modifier = Modifier
-                    .size(60.dp)
+                    .size(gridSize)
                     .background(MaximumYellowRed)
             )
             ChasingTwoDots(
                 modifier = Modifier
-                    .size(60.dp)
+                    .size(gridSize)
                     .background(BurntOrange)
             )
             ThreeBounce(
                 modifier = Modifier
-                    .size(60.dp)
+                    .size(gridSize)
                     .background(GOGreen)
             )
         }
         Row {
             Circle(
                 modifier = Modifier
-                    .size(60.dp)
+                    .size(gridSize)
                     .background(BurntOrange)
             )
             CubeGrid(
                 modifier = Modifier
-                    .size(60.dp)
+                    .size(gridSize)
                     .background(Charcoal)
             )
             FadingCircle(
                 modifier = Modifier
-                    .size(60.dp)
+                    .size(gridSize)
                     .background(MountainMeadow)
             )
             FoldingCube(
                 modifier = Modifier
-                    .size(60.dp)
+                    .size(gridSize)
                     .background(StarCommandBlue)
             )
         }
+        Row {
+            InstaSpinner(
+                modifier = Modifier
+                    .size(gridSize)
+                    .background(BattleshipGrey)
+            )
+            LoadingBar(
+                modifier = Modifier
+                    .size(gridSize * 2, gridSize)
+                    .background(MaximumYellowRed),
+                width = gridSize,
+                fakeMillis = 10000,
+                fillColor = Bluetiful
+            )
+            LoadingDots(
+                modifier = Modifier
+                    .size(gridSize)
+                    .background(GOGreen),
+                style = MaterialTheme.typography.titleLarge
+            )
+        }
     }
 }

compose-loading/src/main/java/com/commandiron/compose_loading/InstaSpinner.kt

@@ -0,0 +1,25 @@
+package com.commandiron.compose_loading
+
+import androidx.compose.foundation.layout.Box
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.style.TextAlign
+
+@Composable
+fun InstaSpinner(
+    modifier: Modifier = Modifier,
+) {
+    Box(
+        modifier = modifier,
+        contentAlignment = Alignment.Center
+    ){
+        Text(
+            text = "Insta Spinner",
+            style = MaterialTheme.typography.labelSmall,
+            textAlign = TextAlign.Center
+        )
+    }
+}

compose-loading/src/main/java/com/commandiron/compose_loading/LoadingBar.kt

@@ -30,7 +30,6 @@ fun LoadingBar(
     modifier: Modifier = Modifier,
     @FloatRange(from = 0.0, to = 1.0) progress: Float = 0.0f,
     fakeMillis: Int = 0,
-    thickness: Dp = 16.dp,
     width: Dp = 200.dp,
     backgroundColor: Color = MaterialTheme.colorScheme.background,
     fillColor: Color = MaterialTheme.colorScheme.primary,
@@ -66,11 +65,11 @@ fun LoadingBar(
     ) {
         Surface(
             modifier = Modifier
-                .height(thickness)
+                .height(width / 12)
                 .width(width),
             color = backgroundColor,
-            shape = RoundedCornerShape(thickness),
-            border = BorderStroke(thickness / 10, borderColor)
+            shape = RoundedCornerShape(width / 12),
+            border = BorderStroke(width / 120, borderColor)
         ) {
             Canvas(
                 modifier = Modifier.fillMaxSize(),

compose-loading/src/main/java/com/commandiron/compose_loading/LoadingDots.kt

@@ -1,5 +1,6 @@
 package com.commandiron.compose_loading
 
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Row
 import androidx.compose.material3.LocalContentColor
 import androidx.compose.material3.LocalTextStyle
@@ -8,13 +9,15 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.mutableStateOf
 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.text.TextStyle
 import kotlinx.coroutines.delay
 
 @Composable
 fun LoadingDots(
+    modifier: Modifier = Modifier,
     text: String? = null,
     style: TextStyle = LocalTextStyle.current,
     color: Color = LocalContentColor.current,
@@ -32,10 +35,13 @@ fun LoadingDots(
             dotText.value = ""
         }
     }
-    Row {
+    Row(
+        modifier = modifier,
+        horizontalArrangement = Arrangement.Center,
+        verticalAlignment = Alignment.CenterVertically
+    ) {
         if(text != null){
             Text(
-                modifier = Modifier.alignByBaseline(),
                 text = dotText.value,
                 color = color.copy(alpha = 0f),
                 style = style
@@ -46,7 +52,6 @@ fun LoadingDots(
                 color = color
             )
             Text(
-                modifier = Modifier.alignByBaseline(),
                 text = dotText.value,
                 style = style,
                 color = color