diff --git a/feature/resources/lottie/build.gradle.kts b/feature/resources/lottie/build.gradle.kts new file mode 100644 index 0000000..dfa9e27 --- /dev/null +++ b/feature/resources/lottie/build.gradle.kts @@ -0,0 +1,8 @@ +plugins { + id("com.android.library") + id("local.android.module") +} + +android { + namespace = "com.soberg.netinfo.feature.resources.lottie" +} diff --git a/feature/resources/lottie/src/main/AndroidManifest.xml b/feature/resources/lottie/src/main/AndroidManifest.xml new file mode 100644 index 0000000..568741e --- /dev/null +++ b/feature/resources/lottie/src/main/AndroidManifest.xml @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/feature/resources/lottie/src/main/res/raw/lottie_loading_animation.json b/feature/resources/lottie/src/main/res/raw/lottie_loading_animation.json new file mode 100644 index 0000000..b7e0119 --- /dev/null +++ b/feature/resources/lottie/src/main/res/raw/lottie_loading_animation.json @@ -0,0 +1,1646 @@ +{ + "v": "5.5.7", + "meta": { + "g": "LottieFiles AE 0.1.20", + "a": "", + "k": "", + "d": "", + "tc": "" + }, + "fr": 60, + "ip": 0, + "op": 180, + "w": 500, + "h": 500, + "nm": "wifi2", + "ddd": 0, + "assets": [], + "layers": [ + { + "ddd": 0, + "ind": 1, + "ty": 4, + "nm": "Shape Layer 4", + "sr": 1, + "ks": { + "o": { + "a": 0, + "k": 100, + "ix": 11 + }, + "r": { + "a": 0, + "k": 206, + "ix": 10 + }, + "p": { + "a": 0, + "k": [ + 250, + 250, + 0 + ], + "ix": 2 + }, + "a": { + "a": 0, + "k": [ + -8.792, + 10.159, + 0 + ], + "ix": 1 + }, + "s": { + "a": 1, + "k": [ + { + "i": { + "x": [ + 0.386, + 0.386, + 0.667 + ], + "y": [ + 1, + 1, + 1 + ] + }, + "o": { + "x": [ + 0.167, + 0.167, + 0.167 + ], + "y": [ + 0.167, + 0.167, + -16.667 + ] + }, + "t": 150, + "s": [ + 100, + 100, + 100 + ] + }, + { + "t": 165, + "s": [ + 0, + 0, + 100 + ] + } + ], + "ix": 6 + } + }, + "ao": 0, + "ef": [ + { + "ty": 26, + "nm": "Radial Wipe", + "np": 7, + "mn": "ADBE Radial Wipe", + "ix": 1, + "en": 1, + "ef": [ + { + "ty": 0, + "nm": "Transition Completion", + "mn": "ADBE Radial Wipe-0001", + "ix": 1, + "v": { + "a": 1, + "k": [ + { + "i": { + "x": [ + 0.667 + ], + "y": [ + 1 + ] + }, + "o": { + "x": [ + 0.167 + ], + "y": [ + 0.167 + ] + }, + "t": 47, + "s": [ + 100 + ] + }, + { + "t": 107.099609375, + "s": [ + 0 + ] + } + ], + "ix": 1 + } + }, + { + "ty": 0, + "nm": "Start Angle", + "mn": "ADBE Radial Wipe-0002", + "ix": 2, + "v": { + "a": 0, + "k": 0, + "ix": 2 + } + }, + { + "ty": 3, + "nm": "Wipe Center", + "mn": "ADBE Radial Wipe-0003", + "ix": 3, + "v": { + "a": 0, + "k": [ + 523.25, + 532.081 + ], + "ix": 3, + "x": "var $bm_rt;\n$bm_rt = [\n thisLayer.width / 2,\n thisLayer.height / 2\n];" + } + }, + { + "ty": 7, + "nm": "Wipe", + "mn": "ADBE Radial Wipe-0004", + "ix": 4, + "v": { + "a": 0, + "k": 2, + "ix": 4 + } + }, + { + "ty": 0, + "nm": "Feather", + "mn": "ADBE Radial Wipe-0005", + "ix": 5, + "v": { + "a": 0, + "k": 0, + "ix": 5 + } + } + ] + } + ], + "shapes": [ + { + "ty": "gr", + "it": [ + { + "d": 1, + "ty": "el", + "s": { + "a": 0, + "k": [ + 42.183, + 42.183 + ], + "ix": 2 + }, + "p": { + "a": 0, + "k": [ + 0, + 0 + ], + "ix": 3 + }, + "nm": "Ellipse Path 1", + "mn": "ADBE Vector Shape - Ellipse", + "hd": false + }, + { + "ty": "fl", + "c": { + "a": 0, + "k": [ + 0.305882352941, + 0.525490196078, + 0.823529471603, + 1 + ], + "ix": 4 + }, + "o": { + "a": 0, + "k": 100, + "ix": 5 + }, + "r": 1, + "bm": 0, + "nm": "Fill 1", + "mn": "ADBE Vector Graphic - Fill", + "hd": false + }, + { + "ty": "tr", + "p": { + "a": 0, + "k": [ + -8.792, + 10.159 + ], + "ix": 2 + }, + "a": { + "a": 0, + "k": [ + 0, + 0 + ], + "ix": 1 + }, + "s": { + "a": 0, + "k": [ + 100, + 100 + ], + "ix": 3 + }, + "r": { + "a": 0, + "k": 0, + "ix": 6 + }, + "o": { + "a": 0, + "k": 100, + "ix": 7 + }, + "sk": { + "a": 0, + "k": 0, + "ix": 4 + }, + "sa": { + "a": 0, + "k": 0, + "ix": 5 + }, + "nm": "Transform" + } + ], + "nm": "Ellipse 1", + "np": 3, + "cix": 2, + "bm": 0, + "ix": 1, + "mn": "ADBE Vector Group", + "hd": false + } + ], + "ip": 0, + "op": 180, + "st": 0, + "bm": 0 + }, + { + "ddd": 0, + "ind": 2, + "ty": 4, + "nm": "Shape Layer 3", + "sr": 1, + "ks": { + "o": { + "a": 0, + "k": 100, + "ix": 11 + }, + "r": { + "a": 0, + "k": 0, + "ix": 10 + }, + "p": { + "a": 0, + "k": [ + 250, + 250, + 0 + ], + "ix": 2 + }, + "a": { + "a": 0, + "k": [ + -12.129, + 5.364, + 0 + ], + "ix": 1 + }, + "s": { + "a": 1, + "k": [ + { + "i": { + "x": [ + 0.293, + 0.293, + 0.667 + ], + "y": [ + 1, + 1, + 1 + ] + }, + "o": { + "x": [ + 0.167, + 0.167, + 0.167 + ], + "y": [ + 0, + 0, + 0 + ] + }, + "t": 0, + "s": [ + 100, + 100, + 100 + ] + }, + { + "i": { + "x": [ + 0.833, + 0.833, + 0.833 + ], + "y": [ + 0.833, + 0.833, + 0.833 + ] + }, + "o": { + "x": [ + 0.167, + 0.167, + 0.167 + ], + "y": [ + 0.167, + 0.167, + 0.167 + ] + }, + "t": 30, + "s": [ + 100, + 100, + 100 + ] + }, + { + "i": { + "x": [ + 0.833, + 0.833, + 0.833 + ], + "y": [ + 1, + 1, + 1 + ] + }, + "o": { + "x": [ + 0.84, + 0.84, + 0.333 + ], + "y": [ + 0, + 0, + 0 + ] + }, + "t": 150, + "s": [ + 100, + 100, + 100 + ] + }, + { + "t": 180, + "s": [ + 100, + 100, + 100 + ] + } + ], + "ix": 6 + } + }, + "ao": 0, + "shapes": [ + { + "ty": "gr", + "it": [ + { + "d": 1, + "ty": "el", + "s": { + "a": 0, + "k": [ + 312.477, + 312.477 + ], + "ix": 2 + }, + "p": { + "a": 0, + "k": [ + 0, + 0 + ], + "ix": 3 + }, + "nm": "Ellipse Path 1", + "mn": "ADBE Vector Shape - Ellipse", + "hd": false + }, + { + "ty": "st", + "c": { + "a": 0, + "k": [ + 0.304562856637, + 0.526456645891, + 0.823299632353, + 1 + ], + "ix": 3 + }, + "o": { + "a": 0, + "k": 100, + "ix": 4 + }, + "w": { + "a": 0, + "k": 13, + "ix": 5 + }, + "lc": 2, + "lj": 1, + "ml": 4, + "bm": 0, + "nm": "Stroke 1", + "mn": "ADBE Vector Graphic - Stroke", + "hd": false + }, + { + "ty": "tr", + "p": { + "a": 0, + "k": [ + -12.129, + 5.364 + ], + "ix": 2 + }, + "a": { + "a": 0, + "k": [ + 0, + 0 + ], + "ix": 1 + }, + "s": { + "a": 0, + "k": [ + 100, + 100 + ], + "ix": 3 + }, + "r": { + "a": 0, + "k": 0, + "ix": 6 + }, + "o": { + "a": 0, + "k": 100, + "ix": 7 + }, + "sk": { + "a": 0, + "k": 0, + "ix": 4 + }, + "sa": { + "a": 0, + "k": 0, + "ix": 5 + }, + "nm": "Transform" + } + ], + "nm": "Ellipse 1", + "np": 3, + "cix": 2, + "bm": 0, + "ix": 1, + "mn": "ADBE Vector Group", + "hd": false + }, + { + "ty": "tm", + "s": { + "a": 1, + "k": [ + { + "i": { + "x": [ + 0.833 + ], + "y": [ + 0.833 + ] + }, + "o": { + "x": [ + 0.772 + ], + "y": [ + 0 + ] + }, + "t": 45, + "s": [ + 0 + ] + }, + { + "i": { + "x": [ + 0.833 + ], + "y": [ + 1 + ] + }, + "o": { + "x": [ + 0.333 + ], + "y": [ + 0 + ] + }, + "t": 120, + "s": [ + 70 + ] + }, + { + "i": { + "x": [ + 0.833 + ], + "y": [ + 1 + ] + }, + "o": { + "x": [ + 0.167 + ], + "y": [ + 0 + ] + }, + "t": 165, + "s": [ + 70 + ] + }, + { + "t": 179, + "s": [ + 100 + ] + } + ], + "ix": 1 + }, + "e": { + "a": 1, + "k": [ + { + "i": { + "x": [ + 0.833 + ], + "y": [ + 0.833 + ] + }, + "o": { + "x": [ + 0.167 + ], + "y": [ + 0.167 + ] + }, + "t": 45, + "s": [ + 100 + ] + }, + { + "i": { + "x": [ + 0.833 + ], + "y": [ + 0.833 + ] + }, + "o": { + "x": [ + 0.167 + ], + "y": [ + 0.167 + ] + }, + "t": 165, + "s": [ + 100 + ] + }, + { + "t": 179, + "s": [ + 0 + ] + } + ], + "ix": 2 + }, + "o": { + "a": 1, + "k": [ + { + "i": { + "x": [ + 0.833 + ], + "y": [ + 0.833 + ] + }, + "o": { + "x": [ + 0.772 + ], + "y": [ + 0 + ] + }, + "t": 45, + "s": [ + 0 + ] + }, + { + "i": { + "x": [ + 0.833 + ], + "y": [ + 1 + ] + }, + "o": { + "x": [ + 0.333 + ], + "y": [ + 0 + ] + }, + "t": 120, + "s": [ + 55 + ] + }, + { + "i": { + "x": [ + 0.833 + ], + "y": [ + 1 + ] + }, + "o": { + "x": [ + 0.167 + ], + "y": [ + 0 + ] + }, + "t": 165, + "s": [ + 55 + ] + }, + { + "t": 179, + "s": [ + 302 + ] + } + ], + "ix": 3 + }, + "m": 1, + "ix": 2, + "nm": "Trim Paths 1", + "mn": "ADBE Vector Filter - Trim", + "hd": false + } + ], + "ip": 0, + "op": 180, + "st": 0, + "bm": 0 + }, + { + "ddd": 0, + "ind": 3, + "ty": 4, + "nm": "Shape Layer 2", + "sr": 1, + "ks": { + "o": { + "a": 0, + "k": 100, + "ix": 11 + }, + "r": { + "a": 0, + "k": 0, + "ix": 10 + }, + "p": { + "a": 0, + "k": [ + 250, + 250, + 0 + ], + "ix": 2 + }, + "a": { + "a": 0, + "k": [ + -12.129, + 5.364, + 0 + ], + "ix": 1 + }, + "s": { + "a": 1, + "k": [ + { + "i": { + "x": [ + 0.293, + 0.293, + 0.667 + ], + "y": [ + 1, + 1, + 1 + ] + }, + "o": { + "x": [ + 0.167, + 0.167, + 0.167 + ], + "y": [ + 0.167, + 0.167, + -0.463 + ] + }, + "t": 0, + "s": [ + 100, + 100, + 100 + ] + }, + { + "i": { + "x": [ + 0.833, + 0.833, + 0.833 + ], + "y": [ + 0.833, + 0.833, + 0.833 + ] + }, + "o": { + "x": [ + 0.167, + 0.167, + 0.167 + ], + "y": [ + 0.167, + 0.167, + 0.167 + ] + }, + "t": 30, + "s": [ + 70, + 70, + 100 + ] + }, + { + "i": { + "x": [ + 0.833, + 0.833, + 0.833 + ], + "y": [ + 0.833, + 0.833, + 1 + ] + }, + "o": { + "x": [ + 0.857, + 0.857, + 0.333 + ], + "y": [ + 0, + 0, + 0 + ] + }, + "t": 150, + "s": [ + 70, + 70, + 100 + ] + }, + { + "t": 165, + "s": [ + 100, + 100, + 100 + ] + } + ], + "ix": 6 + } + }, + "ao": 0, + "shapes": [ + { + "ty": "gr", + "it": [ + { + "d": 1, + "ty": "el", + "s": { + "a": 0, + "k": [ + 312.477, + 312.477 + ], + "ix": 2 + }, + "p": { + "a": 0, + "k": [ + 0, + 0 + ], + "ix": 3 + }, + "nm": "Ellipse Path 1", + "mn": "ADBE Vector Shape - Ellipse", + "hd": false + }, + { + "ty": "tm", + "s": { + "a": 1, + "k": [ + { + "i": { + "x": [ + 0.833 + ], + "y": [ + 0.833 + ] + }, + "o": { + "x": [ + 0.855 + ], + "y": [ + 0 + ] + }, + "t": 57, + "s": [ + 0 + ] + }, + { + "t": 120, + "s": [ + 70 + ] + } + ], + "ix": 1 + }, + "e": { + "a": 0, + "k": 100, + "ix": 2 + }, + "o": { + "a": 1, + "k": [ + { + "i": { + "x": [ + 0.833 + ], + "y": [ + 0.833 + ] + }, + "o": { + "x": [ + 0.855 + ], + "y": [ + 0 + ] + }, + "t": 57, + "s": [ + 0 + ] + }, + { + "t": 120, + "s": [ + 55 + ] + } + ], + "ix": 3 + }, + "m": 1, + "ix": 2, + "nm": "Trim Paths 1", + "mn": "ADBE Vector Filter - Trim", + "hd": false + }, + { + "ty": "st", + "c": { + "a": 0, + "k": [ + 0.304562856637, + 0.526456645891, + 0.823299632353, + 1 + ], + "ix": 3 + }, + "o": { + "a": 0, + "k": 100, + "ix": 4 + }, + "w": { + "a": 1, + "k": [ + { + "i": { + "x": [ + 0.833 + ], + "y": [ + 0.833 + ] + }, + "o": { + "x": [ + 0.167 + ], + "y": [ + 0.167 + ] + }, + "t": 0, + "s": [ + 13 + ] + }, + { + "i": { + "x": [ + 0.833 + ], + "y": [ + 0.833 + ] + }, + "o": { + "x": [ + 0.167 + ], + "y": [ + 0.167 + ] + }, + "t": 30, + "s": [ + 18 + ] + }, + { + "i": { + "x": [ + 0.833 + ], + "y": [ + 0.833 + ] + }, + "o": { + "x": [ + 0.167 + ], + "y": [ + 0.167 + ] + }, + "t": 150, + "s": [ + 18 + ] + }, + { + "t": 165, + "s": [ + 13 + ] + } + ], + "ix": 5 + }, + "lc": 2, + "lj": 1, + "ml": 4, + "bm": 0, + "nm": "Stroke 1", + "mn": "ADBE Vector Graphic - Stroke", + "hd": false + }, + { + "ty": "tr", + "p": { + "a": 0, + "k": [ + -12.129, + 5.364 + ], + "ix": 2 + }, + "a": { + "a": 0, + "k": [ + 0, + 0 + ], + "ix": 1 + }, + "s": { + "a": 0, + "k": [ + 100, + 100 + ], + "ix": 3 + }, + "r": { + "a": 0, + "k": 0, + "ix": 6 + }, + "o": { + "a": 0, + "k": 100, + "ix": 7 + }, + "sk": { + "a": 0, + "k": 0, + "ix": 4 + }, + "sa": { + "a": 0, + "k": 0, + "ix": 5 + }, + "nm": "Transform" + } + ], + "nm": "Ellipse 1", + "np": 4, + "cix": 2, + "bm": 0, + "ix": 1, + "mn": "ADBE Vector Group", + "hd": false + } + ], + "ip": 0, + "op": 180, + "st": 0, + "bm": 0 + }, + { + "ddd": 0, + "ind": 4, + "ty": 4, + "nm": "Shape Layer 1", + "sr": 1, + "ks": { + "o": { + "a": 0, + "k": 100, + "ix": 11 + }, + "r": { + "a": 0, + "k": 0, + "ix": 10 + }, + "p": { + "a": 0, + "k": [ + 250, + 250, + 0 + ], + "ix": 2 + }, + "a": { + "a": 0, + "k": [ + -12.129, + 5.364, + 0 + ], + "ix": 1 + }, + "s": { + "a": 1, + "k": [ + { + "i": { + "x": [ + 0.293, + 0.293, + 0.667 + ], + "y": [ + 1, + 1, + 1 + ] + }, + "o": { + "x": [ + 0.167, + 0.167, + 0.167 + ], + "y": [ + 0.167, + 0.167, + -3.333 + ] + }, + "t": 0, + "s": [ + 100, + 100, + 100 + ] + }, + { + "i": { + "x": [ + 0.833, + 0.833, + 0.833 + ], + "y": [ + 0.833, + 0.833, + 0.833 + ] + }, + "o": { + "x": [ + 0.167, + 0.167, + 0.167 + ], + "y": [ + 0.167, + 0.167, + 0.167 + ] + }, + "t": 30, + "s": [ + 40, + 40, + 100 + ] + }, + { + "i": { + "x": [ + 0.833, + 0.833, + 0.833 + ], + "y": [ + 0.833, + 0.833, + 1 + ] + }, + "o": { + "x": [ + 0.857, + 0.857, + 0.333 + ], + "y": [ + 0, + 0, + 0 + ] + }, + "t": 150, + "s": [ + 40, + 40, + 100 + ] + }, + { + "t": 165, + "s": [ + 100, + 100, + 100 + ] + } + ], + "ix": 6 + } + }, + "ao": 0, + "shapes": [ + { + "ty": "gr", + "it": [ + { + "d": 1, + "ty": "el", + "s": { + "a": 0, + "k": [ + 312.477, + 312.477 + ], + "ix": 2 + }, + "p": { + "a": 0, + "k": [ + 0, + 0 + ], + "ix": 3 + }, + "nm": "Ellipse Path 1", + "mn": "ADBE Vector Shape - Ellipse", + "hd": false + }, + { + "ty": "st", + "c": { + "a": 0, + "k": [ + 0.304562856637, + 0.526456645891, + 0.823299632353, + 1 + ], + "ix": 3 + }, + "o": { + "a": 0, + "k": 100, + "ix": 4 + }, + "w": { + "a": 1, + "k": [ + { + "i": { + "x": [ + 0.833 + ], + "y": [ + 0.833 + ] + }, + "o": { + "x": [ + 0.167 + ], + "y": [ + 0.167 + ] + }, + "t": 0, + "s": [ + 13 + ] + }, + { + "i": { + "x": [ + 0.833 + ], + "y": [ + 0.833 + ] + }, + "o": { + "x": [ + 0.167 + ], + "y": [ + 0.167 + ] + }, + "t": 30, + "s": [ + 30 + ] + }, + { + "i": { + "x": [ + 0.833 + ], + "y": [ + 0.833 + ] + }, + "o": { + "x": [ + 0.167 + ], + "y": [ + 0.167 + ] + }, + "t": 150, + "s": [ + 30 + ] + }, + { + "t": 165, + "s": [ + 13 + ] + } + ], + "ix": 5 + }, + "lc": 2, + "lj": 1, + "ml": 4, + "bm": 0, + "nm": "Stroke 1", + "mn": "ADBE Vector Graphic - Stroke", + "hd": false + }, + { + "ty": "tr", + "p": { + "a": 0, + "k": [ + -12.129, + 5.364 + ], + "ix": 2 + }, + "a": { + "a": 0, + "k": [ + 0, + 0 + ], + "ix": 1 + }, + "s": { + "a": 0, + "k": [ + 100, + 100 + ], + "ix": 3 + }, + "r": { + "a": 0, + "k": 0, + "ix": 6 + }, + "o": { + "a": 0, + "k": 100, + "ix": 7 + }, + "sk": { + "a": 0, + "k": 0, + "ix": 4 + }, + "sa": { + "a": 0, + "k": 0, + "ix": 5 + }, + "nm": "Transform" + } + ], + "nm": "Ellipse 1", + "np": 3, + "cix": 2, + "bm": 0, + "ix": 1, + "mn": "ADBE Vector Group", + "hd": false + }, + { + "ty": "tm", + "s": { + "a": 1, + "k": [ + { + "i": { + "x": [ + 0.833 + ], + "y": [ + 0.833 + ] + }, + "o": { + "x": [ + 0.942 + ], + "y": [ + 0 + ] + }, + "t": 66, + "s": [ + 0 + ] + }, + { + "t": 120, + "s": [ + 70 + ] + } + ], + "ix": 1 + }, + "e": { + "a": 0, + "k": 100, + "ix": 2 + }, + "o": { + "a": 1, + "k": [ + { + "i": { + "x": [ + 0.833 + ], + "y": [ + 0.833 + ] + }, + "o": { + "x": [ + 0.942 + ], + "y": [ + 0 + ] + }, + "t": 66, + "s": [ + 0 + ] + }, + { + "t": 120, + "s": [ + 55 + ] + } + ], + "ix": 3 + }, + "m": 1, + "ix": 2, + "nm": "Trim Paths 1", + "mn": "ADBE Vector Filter - Trim", + "hd": false + } + ], + "ip": 0, + "op": 180, + "st": 0, + "bm": 0 + } + ], + "markers": [] +} \ No newline at end of file diff --git a/feature/ui/build.gradle.kts b/feature/ui/build.gradle.kts index 3d04a44..c9fd6a2 100644 --- a/feature/ui/build.gradle.kts +++ b/feature/ui/build.gradle.kts @@ -8,6 +8,7 @@ plugins { dependencies { implementation(projects.feature.domain) implementation(projects.feature.resources.drawables) + implementation(projects.feature.resources.lottie) implementation(projects.feature.resources.strings) implementation(projects.infra.androidServices) implementation(projects.infra.composeExt) @@ -15,6 +16,7 @@ dependencies { implementation(libs.bundles.compose.core) implementation(libs.androidX.lifecycle.viewModel) + implementation(libs.lottie.compose) ksp(libs.hilt.compiler) implementation(libs.hilt.android) diff --git a/feature/ui/src/main/kotlin/com/soberg/netinfo/android/ui/screen/loading/NetworkInfoLoading.kt b/feature/ui/src/main/kotlin/com/soberg/netinfo/android/ui/screen/loading/NetworkInfoLoading.kt index 3571365..a482b41 100644 --- a/feature/ui/src/main/kotlin/com/soberg/netinfo/android/ui/screen/loading/NetworkInfoLoading.kt +++ b/feature/ui/src/main/kotlin/com/soberg/netinfo/android/ui/screen/loading/NetworkInfoLoading.kt @@ -1,17 +1,28 @@ package com.soberg.netinfo.android.ui.screen.loading import androidx.compose.foundation.layout.Box -import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.size -import androidx.compose.material3.CircularProgressIndicator import androidx.compose.material3.MaterialTheme 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.toArgb import androidx.compose.ui.unit.dp +import androidx.core.graphics.BlendModeColorFilterCompat +import androidx.core.graphics.BlendModeCompat +import com.airbnb.lottie.LottieProperty +import com.airbnb.lottie.compose.LottieAnimation +import com.airbnb.lottie.compose.LottieCompositionSpec +import com.airbnb.lottie.compose.LottieConstants +import com.airbnb.lottie.compose.animateLottieCompositionAsState +import com.airbnb.lottie.compose.rememberLottieComposition +import com.airbnb.lottie.compose.rememberLottieDynamicProperties +import com.airbnb.lottie.compose.rememberLottieDynamicProperty import com.soberg.netinfo.android.ui.core.preview.A11yPreview import com.soberg.netinfo.android.ui.core.preview.ThemedPreview +import com.soberg.netinfo.feature.resources.lottie.R as LottieR @Composable fun NetworkInfoLoading( @@ -20,21 +31,31 @@ fun NetworkInfoLoading( Box( modifier = modifier, ) { + val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(LottieR.raw.lottie_loading_animation)) + val progress by animateLottieCompositionAsState( + composition = composition, + speed = 1.25f, + iterations = LottieConstants.IterateForever, + ) - Column( - modifier = Modifier - .align(Alignment.Center), - ) { - - CircularProgressIndicator( - modifier = Modifier - .size(64.dp) - .align(Alignment.CenterHorizontally), - color = MaterialTheme.colorScheme.secondary, - trackColor = MaterialTheme.colorScheme.surfaceVariant, + val dynamicProperties = rememberLottieDynamicProperties( + rememberLottieDynamicProperty( + property = LottieProperty.COLOR_FILTER, + value = BlendModeColorFilterCompat.createBlendModeColorFilterCompat( + MaterialTheme.colorScheme.primary.toArgb(), + BlendModeCompat.SRC_ATOP + ), + keyPath = arrayOf("**") ) - } - + ) + LottieAnimation( + modifier = Modifier + .align(Alignment.Center) + .size(256.dp), + composition = composition, + progress = { progress }, + dynamicProperties = dynamicProperties, + ) } } diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml index a76e9be..0441f19 100644 --- a/gradle/libs.versions.toml +++ b/gradle/libs.versions.toml @@ -4,7 +4,7 @@ androidxActivity = "1.8.2" androidxLifecycle = "2.7.0" androidxCoreTest = "1.5.0" assertk = "0.28.0" -composeBom = "2023.10.01" +composeBom = "2024.02.00" composeCompiler = "1.5.8" composeNavigation = "2.7.6" dagger = "2.50" @@ -22,6 +22,7 @@ kover = "0.7.5" # KSP version must align with Kotlin version: https://github.com/google/ksp/releases ksp = "1.9.22-1.0.17" ktor = "2.3.7" +lottie = "6.3.0" mockk = "1.13.9" robolectric = "4.11.1" turbine = "1.0.0" @@ -71,6 +72,9 @@ ktor-client-logging = { module = "io.ktor:ktor-client-logging-jvm", version.ref ktor-client-okhttp = { module = "io.ktor:ktor-client-okhttp", version.ref = "ktor" } ktor-client-serialization = { module = "io.ktor:ktor-serialization-kotlinx-json", version.ref = "ktor" } +# Lottie +lottie-compose = { module = "com.airbnb.android:lottie-compose", version.ref = "lottie" } + # Test test-androidx-coreKtx = { module = "androidx.test:core-ktx", version.ref = "androidxCoreTest" } test-assertk = { module = "com.willowtreeapps.assertk:assertk", version.ref = "assertk" } diff --git a/settings.gradle.kts b/settings.gradle.kts index 872ed02..e1156b7 100644 --- a/settings.gradle.kts +++ b/settings.gradle.kts @@ -20,6 +20,7 @@ include(":feature:data:ipconfig") include(":feature:data:network-connectivity") include(":feature:domain") include(":feature:resources:drawables") +include(":feature:resources:lottie") include(":feature:resources:strings") include(":feature:ui") include(":infra:android-services")