From 0b32ded79112c5da813d5a2e5ff387c5b240ecf4 Mon Sep 17 00:00:00 2001
From: Roman Volosovskyi <roman.wolosovskyi@gmail.com>
Date: Sun, 28 Apr 2019 07:47:44 +0300
Subject: [PATCH] Loading indicator animation with useNativeDriver

---
 src/status_im/ui/components/animation.cljs    |  2 +
 .../ui/components/connectivity/view.cljs      | 78 +++++++++++--------
 2 files changed, 49 insertions(+), 31 deletions(-)

diff --git a/src/status_im/ui/components/animation.cljs b/src/status_im/ui/components/animation.cljs
index 8855d9e0a8..2c8b715fc2 100644
--- a/src/status_im/ui/components/animation.cljs
+++ b/src/status_im/ui/components/animation.cljs
@@ -57,5 +57,7 @@
   (js->clj (.getLayout value-xy)))
 
 (defn easing [] js/ReactNative.Easing)
+(defn easing-in [] (.-in (easing)))
+(defn easing-out [] (.-out (easing)))
 
 (defn cubic [] (.-cubic (easing)))
diff --git a/src/status_im/ui/components/connectivity/view.cljs b/src/status_im/ui/components/connectivity/view.cljs
index d470e31e81..a0419876ff 100644
--- a/src/status_im/ui/components/connectivity/view.cljs
+++ b/src/status_im/ui/components/connectivity/view.cljs
@@ -1,49 +1,65 @@
 (ns status-im.ui.components.connectivity.view
   (:require-macros [status-im.utils.views :refer [defview letsubs] :as views])
-  (:require [re-frame.core :as re-frame]
-            [reagent.core :as reagent]
+  (:require [reagent.core :as reagent]
             [status-im.ui.components.react :as react]
             [status-im.ui.components.connectivity.styles :as styles]
-            [status-im.utils.platform :as utils.platform]
             [status-im.i18n :as i18n]
             [status-im.ui.components.colors :as colors]
             [status-im.ui.components.animation :as animation]
             [status-im.utils.utils :as utils]))
 
+(defn easing [direction n]
+  {:toValue         n
+   :easing          ((if (= :in direction)
+                       (animation/easing-in)
+                       (animation/easing-out))
+                     (.-quad (animation/easing)))
+   :duration        400
+   :useNativeDriver true})
+
+(defn animated-bar-style [margin-value width color]
+  {:position         :absolute
+   :width            width
+   :transform        [{:translateX
+                       (animation/interpolate
+                        margin-value
+                        {:inputRange  [0 1]
+                         :outputRange [0 width]})}]
+   :height           3
+   :background-color color})
+
 (views/defview loading-indicator [parent-width]
-  (views/letsubs [anim-width (animation/create-value (* 0.15 parent-width))
-                  anim-x (animation/create-value 0)
-                  easing-in (fn [n] {:toValue (* n parent-width)
-                                     :easing (.in (animation/easing) (.-quad (animation/easing)))
-                                     :duration 400})
-                  easing-out (fn [n] {:toValue (* n parent-width)
-                                      :easing   (.out (animation/easing) (.-quad (animation/easing)))
-                                      :duration 400})]
-    {:component-did-mount (fn [_]
-                            (animation/start
-                             (animation/anim-loop
-                              (animation/anim-sequence
-                               [(animation/parallel
-                                 [(animation/timing anim-width (easing-in 0.6))
-                                  (animation/timing anim-x (easing-in 0.2))])
-                                (animation/parallel
-                                 [(animation/timing anim-width (easing-out 0.15))
-                                  (animation/timing anim-x (easing-out 0.85))])
-                                (animation/parallel
-                                 [(animation/timing anim-width (easing-in 0.6))
-                                  (animation/timing anim-x (easing-in 0.2))])
-                                (animation/parallel
-                                 [(animation/timing anim-width (easing-out 0.15))
-                                  (animation/timing anim-x (easing-out 0))])]))))}
+  (views/letsubs [blue-bar-left-margin (animation/create-value 0)
+                  white-bar-left-margin (animation/create-value 0)]
+    {:component-did-mount
+     (fn [_]
+       (animation/start
+        (animation/anim-loop
+         (animation/anim-sequence
+          [(animation/parallel
+            [(animation/timing blue-bar-left-margin (easing :in 0.19))
+             (animation/timing white-bar-left-margin (easing :in 0.65))])
+           (animation/parallel
+            [(animation/timing blue-bar-left-margin (easing :out 0.85))
+             (animation/timing white-bar-left-margin (easing :out 0.85))])
+           (animation/parallel
+            [(animation/timing blue-bar-left-margin (easing :in 0.19))
+             (animation/timing white-bar-left-margin (easing :in 0.65))])
+           (animation/parallel
+            [(animation/timing blue-bar-left-margin (easing :out 0))
+             (animation/timing white-bar-left-margin (easing :out 0))])]))))}
     [react/view {:style {:width parent-width
                          :position :absolute
                          :top -3
                          :height 3
                          :background-color colors/white}}
-     [react/animated-view {:style {:margin-left anim-x
-                                   :width anim-width
-                                   :height 3
-                                   :background-color colors/blue}}]]))
+     [react/animated-view {:style (animated-bar-style blue-bar-left-margin
+                                                      parent-width
+                                                      colors/blue)}]
+     [react/animated-view {:style (assoc (animated-bar-style white-bar-left-margin
+                                                             parent-width
+                                                             colors/white)
+                                         :left (* 0.15 parent-width))}]]))
 
 (defonce show-connected? (reagent/atom true))