status-im
/
status-mobile
mirror of https://github.com/status-im/status-mobile.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

[#6851] Fix loading indicator in browser 

Signed-off-by: Andrey Shovkoplyas <motor4ik@gmail.com>
This commit is contained in:
Andrey Shovkoplyas 2018-12-04 16:00:40 +01:00
parent 4aaaf58e99
commit f8978ca0aa
No known key found for this signature in database
GPG Key ID: EAAB7C8622D860A4
2 changed files with 60 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/status_im/browser/core.cljs
View File

@ -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

54
src/status_im/ui/screens/browser/views.cljs
View File

@ -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
show-permission show-tooltip opt-in? loading? dapp? rpc-url name]}]
can-go-forward? resolving? network-id address url-original
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
[status-bar/status-bar]
[toolbar error? url url-original browser browser-id url-editing?]
[react/view {:flex 1}
[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}])
(when (or loading? resolving?)
[react/view styles/web-view-loading
[react/activity-indicator {:animating true}]])]
:injected-java-script js-res/webview-js}])]
[navigation url-original webview can-go-back? can-go-forward?]
[permissions.views/permissions-panel browser show-permission]
(when show-tooltip
@ -157,6 +181,7 @@
(views/defview browser []
(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,6 +191,11 @@
can-go-forward? (browser/can-go-forward? browser)
url-original (browser/get-current-url browser)
opt-in? (:web3-opt-in? settings)]
[react/view {:style styles/browser :on-layout #(reset! width (.-width (.-layout (.-nativeEvent %))))}
[status-bar/status-bar]
[toolbar error? url url-original browser browser-id url-editing?]
(when (and loading? (not (nil? @width)))
[loading-indicatior @width])
[browser-component {:webview webview
:dapp? dapp?
:error? error?
@ -176,13 +206,11 @@
:unsafe? unsafe?
:can-go-back? can-go-back?
:can-go-forward? can-go-forward?
:url-editing? url-editing?
:resolving? resolving?
:network-id network-id
:address address
:show-permission show-permission
:show-tooltip show-tooltip
:opt-in? opt-in?
:loading? loading?
:rpc-url rpc-url
:name name}])))
:name name}]])))