From 0adfd131e48db9204af3a87cc3892bc93365e3fd Mon Sep 17 00:00:00 2001
From: KvRae <karamelmannai@gmail.com>
Date: Thu, 9 Oct 2025 11:59:31 +0100
Subject: [PATCH] Feat: Add customizable progress bars and shimmer effect

This commit introduces customizable circular and linear progress bars, a shimmer effect, and preview functions to showcase their different styles.

- CircularLoadingBar: Now supports customization of color, stroke width, track color, and stroke cap.
- LinearLoadingBar: Now supports customization of color, track color, and stroke cap.
- Shimmer Effect: Added a  modifier for creating loading skeletons.
- Previews: Added , , and  to display various loader configurations.

This enhances the flexibility of the loading indicators, allowing for a more consistent and visually appealing user experience across the app.
---
 .idea/AndroidProjectSystem.xml                |   6 +
 .idea/copilot.data.migration.agent.xml        |   6 +
 .idea/copilot.data.migration.ask.xml          |   6 +
 .idea/copilot.data.migration.ask2agent.xml    |   6 +
 .idea/copilot.data.migration.edit.xml         |   6 +
 .idea/deploymentTargetSelector.xml            |   9 ++
 .idea/gradle.xml                              |   2 +-
 .idea/inspectionProfiles/Project_Default.xml  |  36 ++++++
 .idea/runConfigurations.xml                   |  17 +++
 .idea/studiobot.xml                           |   6 +
 .../androidui_uxlibrary/animations/Shimmer.kt |  87 ++++++++++++++
 .../androidui_uxlibrary/animations/bars.kt    | 113 ++++++++++++++++++
 12 files changed, 299 insertions(+), 1 deletion(-)
 create mode 100644 .idea/AndroidProjectSystem.xml
 create mode 100644 .idea/copilot.data.migration.agent.xml
 create mode 100644 .idea/copilot.data.migration.ask.xml
 create mode 100644 .idea/copilot.data.migration.ask2agent.xml
 create mode 100644 .idea/copilot.data.migration.edit.xml
 create mode 100644 .idea/runConfigurations.xml
 create mode 100644 .idea/studiobot.xml
 create mode 100644 app/src/main/java/in/iot/lab/androidui_uxlibrary/animations/Shimmer.kt

diff --git a/.idea/AndroidProjectSystem.xml b/.idea/AndroidProjectSystem.xml
new file mode 100644
index 0000000..4a53bee
--- /dev/null
+++ b/.idea/AndroidProjectSystem.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="AndroidProjectSystem">
+    <option name="providerId" value="com.android.tools.idea.GradleProjectSystem" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/.idea/copilot.data.migration.agent.xml b/.idea/copilot.data.migration.agent.xml
new file mode 100644
index 0000000..4ea72a9
--- /dev/null
+++ b/.idea/copilot.data.migration.agent.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="AgentMigrationStateService">
+    <option name="migrationStatus" value="COMPLETED" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/.idea/copilot.data.migration.ask.xml b/.idea/copilot.data.migration.ask.xml
new file mode 100644
index 0000000..7ef04e2
--- /dev/null
+++ b/.idea/copilot.data.migration.ask.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="AskMigrationStateService">
+    <option name="migrationStatus" value="COMPLETED" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/.idea/copilot.data.migration.ask2agent.xml b/.idea/copilot.data.migration.ask2agent.xml
new file mode 100644
index 0000000..1f2ea11
--- /dev/null
+++ b/.idea/copilot.data.migration.ask2agent.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="Ask2AgentMigrationStateService">
+    <option name="migrationStatus" value="COMPLETED" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/.idea/copilot.data.migration.edit.xml b/.idea/copilot.data.migration.edit.xml
new file mode 100644
index 0000000..8648f94
--- /dev/null
+++ b/.idea/copilot.data.migration.edit.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="EditMigrationStateService">
+    <option name="migrationStatus" value="COMPLETED" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/.idea/deploymentTargetSelector.xml b/.idea/deploymentTargetSelector.xml
index b268ef3..50b7ae7 100644
--- a/.idea/deploymentTargetSelector.xml
+++ b/.idea/deploymentTargetSelector.xml
@@ -5,6 +5,15 @@
       <SelectionState runConfigName="app">
         <option name="selectionMode" value="DROPDOWN" />
       </SelectionState>
+      <SelectionState runConfigName="ShimmerPreview">
+        <option name="selectionMode" value="DROPDOWN" />
+      </SelectionState>
+      <SelectionState runConfigName="CircularLoadingBarPreview">
+        <option name="selectionMode" value="DROPDOWN" />
+      </SelectionState>
+      <SelectionState runConfigName="LinearLoadingBarPreview">
+        <option name="selectionMode" value="DROPDOWN" />
+      </SelectionState>
     </selectionStates>
   </component>
 </project>
\ No newline at end of file
diff --git a/.idea/gradle.xml b/.idea/gradle.xml
index 0897082..639c779 100644
--- a/.idea/gradle.xml
+++ b/.idea/gradle.xml
@@ -4,6 +4,7 @@
   <component name="GradleSettings">
     <option name="linkedExternalProjectsSettings">
       <GradleProjectSettings>
+        <option name="testRunner" value="CHOOSE_PER_TEST" />
         <option name="externalProjectPath" value="$PROJECT_DIR$" />
         <option name="gradleJvm" value="#GRADLE_LOCAL_JAVA_HOME" />
         <option name="modules">
@@ -12,7 +13,6 @@
             <option value="$PROJECT_DIR$/app" />
           </set>
         </option>
-        <option name="resolveExternalAnnotations" value="false" />
       </GradleProjectSettings>
     </option>
   </component>
diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
index 44ca2d9..bb270b8 100644
--- a/.idea/inspectionProfiles/Project_Default.xml
+++ b/.idea/inspectionProfiles/Project_Default.xml
@@ -1,6 +1,34 @@
 <component name="InspectionProjectProfileManager">
   <profile version="1.0">
     <option name="myName" value="Project Default" />
+    <inspection_tool class="ComposePreviewDimensionRespectsLimit" enabled="true" level="WARNING" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
+    </inspection_tool>
+    <inspection_tool class="ComposePreviewMustBeTopLevelFunction" enabled="true" level="ERROR" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
+    </inspection_tool>
+    <inspection_tool class="ComposePreviewNeedsComposableAnnotation" enabled="true" level="ERROR" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
+    </inspection_tool>
+    <inspection_tool class="ComposePreviewNotSupportedInUnitTestFiles" enabled="true" level="ERROR" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
+    </inspection_tool>
+    <inspection_tool class="GlancePreviewDimensionRespectsLimit" enabled="true" level="WARNING" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+    </inspection_tool>
+    <inspection_tool class="GlancePreviewMustBeTopLevelFunction" enabled="true" level="ERROR" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+    </inspection_tool>
+    <inspection_tool class="GlancePreviewNeedsComposableAnnotation" enabled="true" level="ERROR" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+    </inspection_tool>
+    <inspection_tool class="GlancePreviewNotSupportedInUnitTestFiles" enabled="true" level="ERROR" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+    </inspection_tool>
     <inspection_tool class="PreviewAnnotationInFunctionWithParameters" enabled="true" level="ERROR" enabled_by_default="true">
       <option name="composableFile" value="true" />
       <option name="previewFile" value="true" />
@@ -9,6 +37,10 @@
       <option name="composableFile" value="true" />
       <option name="previewFile" value="true" />
     </inspection_tool>
+    <inspection_tool class="PreviewDeviceShouldUseNewSpec" enabled="true" level="WEAK WARNING" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
+    </inspection_tool>
     <inspection_tool class="PreviewDimensionRespectsLimit" enabled="true" level="WARNING" enabled_by_default="true">
       <option name="composableFile" value="true" />
       <option name="previewFile" value="true" />
@@ -33,6 +65,10 @@
       <option name="composableFile" value="true" />
       <option name="previewFile" value="true" />
     </inspection_tool>
+    <inspection_tool class="PreviewParameterProviderOnFirstParameter" enabled="true" level="ERROR" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
+    </inspection_tool>
     <inspection_tool class="PreviewPickerAnnotation" enabled="true" level="ERROR" enabled_by_default="true">
       <option name="composableFile" value="true" />
       <option name="previewFile" value="true" />
diff --git a/.idea/runConfigurations.xml b/.idea/runConfigurations.xml
new file mode 100644
index 0000000..16660f1
--- /dev/null
+++ b/.idea/runConfigurations.xml
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="RunConfigurationProducerService">
+    <option name="ignoredProducers">
+      <set>
+        <option value="com.intellij.execution.junit.AbstractAllInDirectoryConfigurationProducer" />
+        <option value="com.intellij.execution.junit.AllInPackageConfigurationProducer" />
+        <option value="com.intellij.execution.junit.PatternConfigurationProducer" />
+        <option value="com.intellij.execution.junit.TestInClassConfigurationProducer" />
+        <option value="com.intellij.execution.junit.UniqueIdConfigurationProducer" />
+        <option value="com.intellij.execution.junit.testDiscovery.JUnitTestDiscoveryConfigurationProducer" />
+        <option value="org.jetbrains.kotlin.idea.junit.KotlinJUnitRunConfigurationProducer" />
+        <option value="org.jetbrains.kotlin.idea.junit.KotlinPatternConfigurationProducer" />
+      </set>
+    </option>
+  </component>
+</project>
\ No newline at end of file
diff --git a/.idea/studiobot.xml b/.idea/studiobot.xml
new file mode 100644
index 0000000..539e3b8
--- /dev/null
+++ b/.idea/studiobot.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="StudioBotProjectSettings">
+    <option name="shareContext" value="OptedIn" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/app/src/main/java/in/iot/lab/androidui_uxlibrary/animations/Shimmer.kt b/app/src/main/java/in/iot/lab/androidui_uxlibrary/animations/Shimmer.kt
new file mode 100644
index 0000000..d084d09
--- /dev/null
+++ b/app/src/main/java/in/iot/lab/androidui_uxlibrary/animations/Shimmer.kt
@@ -0,0 +1,87 @@
+package `in`.iot.lab.androidui_uxlibrary.animations
+
+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.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+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.size
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.composed
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.layout.onGloballyPositioned
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.IntSize
+import androidx.compose.ui.unit.dp
+
+fun Modifier.shimmer(): Modifier = composed {
+    var size by remember { mutableStateOf(IntSize.Zero) }
+    val transition = rememberInfiniteTransition()
+    val startOffsetX by transition.animateFloat(
+        initialValue = -2 * size.width.toFloat(),
+        targetValue = 2 * size.width.toFloat(),
+        animationSpec = infiniteRepeatable(
+            animation = tween(1000)
+        )
+    )
+
+    background(
+        brush = Brush.linearGradient(
+            colors = listOf(
+                Color(0xFFB8B5B5),
+                Color(0xFF8F8B8B),
+                Color(0xFFB8B5B5),
+            ),
+            start = Offset(startOffsetX, 0f),
+            end = Offset(startOffsetX + size.width.toFloat(), size.height.toFloat())
+        )
+    )
+    .onGloballyPositioned { layoutCoordinates ->
+        size = layoutCoordinates.size
+    }
+}
+
+@Preview
+@Composable
+fun ShimmerPreview() {
+    Column(
+        modifier = Modifier.fillMaxSize()
+            .padding(32.dp),
+        verticalArrangement = Arrangement.spacedBy(16.dp)
+    ) {
+        Column(
+            modifier = Modifier
+                .shimmer()
+                .fillMaxWidth()
+                .fillMaxHeight(0.2f),
+
+        ){}
+
+        Box(
+            modifier = Modifier
+                .size(200.dp)
+                .clip(CircleShape)
+                .shimmer()
+
+        ){}
+    }
+
+}
diff --git a/app/src/main/java/in/iot/lab/androidui_uxlibrary/animations/bars.kt b/app/src/main/java/in/iot/lab/androidui_uxlibrary/animations/bars.kt
index c66d8ed..3aa367f 100644
--- a/app/src/main/java/in/iot/lab/androidui_uxlibrary/animations/bars.kt
+++ b/app/src/main/java/in/iot/lab/androidui_uxlibrary/animations/bars.kt
@@ -1,2 +1,115 @@
 package `in`.iot.lab.androidui_uxlibrary.animations
 
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.material3.LinearProgressIndicator
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.StrokeCap
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+
+
+/**
+ * This is the Composable function for the Circular Loading Bar
+ *
+ * @param modifier Modifier to be applied to the layout
+ */
+@Composable
+fun CircularLoadingBar(
+    modifier: Modifier = Modifier,
+    color: Color = Color.Blue,
+    strokeWidth: Dp = 4.dp,
+    trackColor: Color = Color.LightGray,
+    strokeCap: StrokeCap = StrokeCap.Round
+) {
+    CircularProgressIndicator(
+        modifier = modifier,
+        color = color,
+        strokeWidth = strokeWidth,
+        trackColor = trackColor,
+        strokeCap = strokeCap
+    )
+}
+
+/**
+ * This is the Composable function for the Linear Loading Bar
+ *
+ * @param modifier Modifier to be applied to the layout
+ */
+@Composable
+fun LinearLoadingBar(
+    modifier: Modifier = Modifier,
+    color: Color = Color.Blue,
+    trackColor: Color = Color.LightGray,
+    strokeCap: StrokeCap = StrokeCap.Round
+    
+) {
+    LinearProgressIndicator(
+        color = color,
+        trackColor = trackColor,
+        strokeCap = strokeCap
+    )
+}
+
+@Preview(showBackground = true)
+@Composable
+fun CircularLoadingBarPreview() {
+    Column(
+        modifier = Modifier.fillMaxSize(),
+        verticalArrangement = Arrangement.Center,
+        horizontalAlignment = Alignment.CenterHorizontally
+    ) {
+        CircularLoadingBar(
+            modifier = Modifier.padding(bottom = 32.dp),
+        )
+        CircularLoadingBar(
+            modifier = Modifier.padding(bottom = 32.dp),
+            color = Color.Red,
+            strokeWidth = 8.dp,
+            trackColor = Color.Gray,
+            strokeCap = StrokeCap.Butt
+        )
+        CircularLoadingBar(
+            modifier = Modifier.padding(bottom = 32.dp),
+            color = Color.Green,
+            strokeWidth = 12.dp,
+            trackColor = Color.DarkGray,
+            strokeCap = StrokeCap.Square
+        )
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun LinearLoadingBarPreview() {
+    Column(
+        modifier = Modifier.fillMaxSize(),
+        verticalArrangement = Arrangement.Center,
+        horizontalAlignment = Alignment.CenterHorizontally
+    ) {
+        LinearLoadingBar(
+        )
+        Spacer(Modifier.padding(bottom = 32.dp))
+        LinearLoadingBar(
+
+            color = Color.Red,
+            trackColor = Color.Gray,
+            strokeCap = StrokeCap.Square
+        )
+        Spacer(Modifier.padding(bottom = 32.dp))
+
+        LinearLoadingBar(
+            color = Color.Green,
+            trackColor = Color.DarkGray,
+            strokeCap = StrokeCap.Butt
+        )
+    }
+}