[#6851] Fix loading indicator in browser

Signed-off-by: Andrey Shovkoplyas <motor4ik@gmail.com>

src/status_im/browser/core.cljs

@@ -189,8 +189,7 @@
   (let [browser (get-current-browser (:db cofx))
         {:strs [url loading]} (js->clj event)]
     (fx/merge cofx
-              #(when platform/ios?
+              (update-browser-option :loading? loading)
-                 (update-browser-option % :loading? loading))
               (update-browser-on-nav-change browser url loading error?))))
 
 (fx/defn open-url-in-current-browser

src/status_im/ui/screens/browser/views.cljs

@@ -20,7 +20,8 @@
             [status-im.ui.screens.wallet.actions :as wallet.actions]
             [status-im.utils.ethereum.core :as ethereum]
             [status-im.utils.http :as http]
-            [status-im.utils.js-resources :as js-res])
+            [status-im.utils.js-resources :as js-res]
+            [status-im.ui.components.animation :as animation])
   (:require-macros
    [status-im.utils.slurp :refer [slurp]]
    [status-im.utils.views :as views]))
@@ -103,18 +104,44 @@
                                :accessibility-label :refresh-page-button}
     [icons/icon :icons/refresh]]])
 
+(views/defview loading-indicatior [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))])]))))}
+    [react/view {:style {:width parent-width :height 3 :background-color colors/blue-light}}
+     [react/animated-view {:style {:margin-left anim-x :width anim-width :height 3 :background-color colors/blue}}]]))
+
 ;; should-component-update is called only when component's props are changed,
 ;; that's why it can't be used in `browser`, because `url` comes from subs
 (views/defview browser-component
   [{:keys [webview error? url browser browser-id unsafe? can-go-back?
-           can-go-forward? url-editing? resolving? network-id address url-original
+           can-go-forward? resolving? network-id address url-original
-           show-permission show-tooltip opt-in? loading? dapp? rpc-url name]}]
+           show-permission show-tooltip opt-in? dapp? rpc-url name]}]
   {:should-component-update (fn [_ _ args]
                               (let [[_ props] args]
                                 (not (nil? (:url props)))))}
-  [react/view styles/browser
+  [react/view {:flex 1}
-   [status-bar/status-bar]
-   [toolbar error? url url-original browser browser-id url-editing?]
    [react/view components.styles/flex
     (if unsafe?
       [site-blocked.views/view {:can-go-back? can-go-back?
@@ -142,10 +169,7 @@
                                                        (ethereum/normalized-address address)
                                                        (str network-id)))
                                                     (get-inject-js url))
-        :injected-java-script                  js-res/webview-js}])
+        :injected-java-script                  js-res/webview-js}])]
-    (when (or loading? resolving?)
-      [react/view styles/web-view-loading
-       [react/activity-indicator {:animating true}]])]
    [navigation url-original webview can-go-back? can-go-forward?]
    [permissions.views/permissions-panel browser show-permission]
    (when show-tooltip
@@ -156,7 +180,8 @@
       #(re-frame/dispatch [:browser.ui/close-tooltip-pressed])])])
 
 (views/defview browser []
-  (views/letsubs [webview    (atom nil)
+  (views/letsubs [webview (atom nil)
+                  width (reagent/atom nil)
                   {:keys [address settings]} [:account/account]
                   {:keys [browser-id dapp? name unsafe?] :as browser} [:get-current-browser]
                   {:keys [url error? loading? url-editing? show-tooltip show-permission resolving?]} [:get :browser/options]
@@ -166,23 +191,26 @@
           can-go-forward? (browser/can-go-forward? browser)
           url-original    (browser/get-current-url browser)
           opt-in?         (:web3-opt-in? settings)]
-      [browser-component {:webview         webview
+      [react/view {:style styles/browser :on-layout #(reset! width (.-width (.-layout (.-nativeEvent %))))}
-                          :dapp?           dapp?
+       [status-bar/status-bar]
-                          :error?          error?
+       [toolbar error? url url-original browser browser-id url-editing?]
-                          :url             url
+       (when (and loading? (not (nil? @width)))
-                          :url-original    url-original
+         [loading-indicatior @width])
-                          :browser         browser
+       [browser-component {:webview         webview
-                          :browser-id      browser-id
+                           :dapp?           dapp?
-                          :unsafe?         unsafe?
+                           :error?          error?
-                          :can-go-back?    can-go-back?
+                           :url             url
-                          :can-go-forward? can-go-forward?
+                           :url-original    url-original
-                          :url-editing?    url-editing?
+                           :browser         browser
-                          :resolving?      resolving?
+                           :browser-id      browser-id
-                          :network-id      network-id
+                           :unsafe?         unsafe?
-                          :address         address
+                           :can-go-back?    can-go-back?
-                          :show-permission show-permission
+                           :can-go-forward? can-go-forward?
-                          :show-tooltip    show-tooltip
+                           :resolving?      resolving?
-                          :opt-in?         opt-in?
+                           :network-id      network-id
-                          :loading?        loading?
+                           :address         address
-                          :rpc-url         rpc-url
+                           :show-permission show-permission
-                          :name            name}])))
+                           :show-tooltip    show-tooltip
+                           :opt-in?         opt-in?
+                           :rpc-url         rpc-url
+                           :name            name}]])))