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] 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()
+    }
+}
+