From 8258cf93a94e084ed8e970bed4b18331203a3ea0 Mon Sep 17 00:00:00 2001
From: InsanusMokrassar <ovsyannikov.alexey95@gmail.com>
Date: Mon, 12 Sep 2022 21:03:07 +0600
Subject: [PATCH 1/3] start 0.12.12

---
 CHANGELOG.md      | 2 ++
 gradle.properties | 4 ++--
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index db20b4e5a76..36bb608fe98 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,7 @@
 # Changelog
 
+## 0.12.12
+
 ## 0.12.11
 
 * `Repos`:
diff --git a/gradle.properties b/gradle.properties
index 70aafb53c64..3951f3c7e6e 100644
--- a/gradle.properties
+++ b/gradle.properties
@@ -14,5 +14,5 @@ crypto_js_version=4.1.1
 # Project data
 
 group=dev.inmo
-version=0.12.11
-android_code_version=150
+version=0.12.12
+android_code_version=151

From 1973e0b5bf43b91452b81046a48174945a63e4de Mon Sep 17 00:00:00 2001
From: InsanusMokrassar <ovsyannikov.alexey95@gmail.com>
Date: Tue, 13 Sep 2022 01:30:36 +0600
Subject: [PATCH 2/3] SkeletonAnimation

---
 CHANGELOG.md                                  |  5 +++
 .../common/compose/SkeletonAnimation.kt       | 37 +++++++++++++++++++
 2 files changed, 42 insertions(+)
 create mode 100644 common/compose/src/jsMain/kotlin/dev/inmo/micro_utils/common/compose/SkeletonAnimation.kt

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 36bb608fe98..60ec2d06892 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,11 @@
 
 ## 0.12.12
 
+* `Common`:
+  * `Compose`:
+    * `JS`:
+      * Add `SkeletonAnimation` stylesheet
+
 ## 0.12.11
 
 * `Repos`:
diff --git a/common/compose/src/jsMain/kotlin/dev/inmo/micro_utils/common/compose/SkeletonAnimation.kt b/common/compose/src/jsMain/kotlin/dev/inmo/micro_utils/common/compose/SkeletonAnimation.kt
new file mode 100644
index 00000000000..01cdc48c1b6
--- /dev/null
+++ b/common/compose/src/jsMain/kotlin/dev/inmo/micro_utils/common/compose/SkeletonAnimation.kt
@@ -0,0 +1,37 @@
+package dev.inmo.micro_utils.common.compose
+
+import org.jetbrains.compose.web.css.*
+
+object SkeletonAnimation : StyleSheet() {
+    val skeletonKeyFrames: CSSNamedKeyframes by keyframes {
+        to { backgroundPosition("-20% 0") }
+    }
+
+    fun CSSBuilder.createSkeletonStyle(
+        duration: CSSSizeValue<out CSSUnitTime> = 2.s,
+        timingFunction: AnimationTimingFunction = AnimationTimingFunction.EaseInOut,
+        iterationCount: Int? = null,
+        direction: AnimationDirection = AnimationDirection.Normal,
+        keyFrames: CSSNamedKeyframes = skeletonKeyFrames
+    ) {
+        backgroundImage("linear-gradient(110deg, rgb(236, 236, 236) 40%, rgb(245, 245, 245) 50%, rgb(236, 236, 236) 65%)")
+        backgroundSize("200% 100%")
+        backgroundPosition("180% 0")
+        animation(keyFrames) {
+            duration(duration)
+            timingFunction(timingFunction)
+            iterationCount(iterationCount)
+            direction(direction)
+        }
+        property("color", "${Color.transparent} !important")
+
+        child(self, universal) style {
+            property("visibility", "hidden")
+        }
+    }
+
+    val skeleton by style {
+        createSkeletonStyle()
+    }
+}
+

From 422b2e6db1a4037ee11055ee35f3f2a400f5c032 Mon Sep 17 00:00:00 2001
From: InsanusMokrassar <ovsyannikov.alexey95@gmail.com>
Date: Tue, 13 Sep 2022 22:01:02 +0600
Subject: [PATCH 3/3] improve SkeletonAnimation

---
 .../common/compose/SkeletonAnimation.kt        | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/common/compose/src/jsMain/kotlin/dev/inmo/micro_utils/common/compose/SkeletonAnimation.kt b/common/compose/src/jsMain/kotlin/dev/inmo/micro_utils/common/compose/SkeletonAnimation.kt
index 01cdc48c1b6..f3c2bb2e9c3 100644
--- a/common/compose/src/jsMain/kotlin/dev/inmo/micro_utils/common/compose/SkeletonAnimation.kt
+++ b/common/compose/src/jsMain/kotlin/dev/inmo/micro_utils/common/compose/SkeletonAnimation.kt
@@ -7,12 +7,14 @@ object SkeletonAnimation : StyleSheet() {
         to { backgroundPosition("-20% 0") }
     }
 
-    fun CSSBuilder.createSkeletonStyle(
+    fun CSSBuilder.includeSkeletonStyle(
         duration: CSSSizeValue<out CSSUnitTime> = 2.s,
         timingFunction: AnimationTimingFunction = AnimationTimingFunction.EaseInOut,
         iterationCount: Int? = null,
         direction: AnimationDirection = AnimationDirection.Normal,
-        keyFrames: CSSNamedKeyframes = skeletonKeyFrames
+        keyFrames: CSSNamedKeyframes = skeletonKeyFrames,
+        hideChildren: Boolean = true,
+        hideText: Boolean = hideChildren
     ) {
         backgroundImage("linear-gradient(110deg, rgb(236, 236, 236) 40%, rgb(245, 245, 245) 50%, rgb(236, 236, 236) 65%)")
         backgroundSize("200% 100%")
@@ -23,15 +25,19 @@ object SkeletonAnimation : StyleSheet() {
             iterationCount(iterationCount)
             direction(direction)
         }
-        property("color", "${Color.transparent} !important")
+        if (hideText) {
+            property("color", "${Color.transparent} !important")
+        }
 
-        child(self, universal) style {
-            property("visibility", "hidden")
+        if (hideChildren) {
+            child(self, universal) style {
+                property("visibility", "hidden")
+            }
         }
     }
 
     val skeleton by style {
-        createSkeletonStyle()
+        includeSkeletonStyle()
     }
 }