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

with-activity-indicator component 

main-tab: render only current tab immediatly on navigation, other three 100ms later
This commit is contained in:
Roman Volosovskyi 2017-12-19 16:28:01 +02:00
parent b28765c38a
commit c84641bd04
No known key found for this signature in database
GPG Key ID: 37135489EAE4B2D7
2 changed files with 20 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/status_im/ui/components/react.cljs
View File

@ -1,4 +1,5 @@
(ns status-im.ui.components.react (ns status-im.ui.components.react
(:require-macros [status-im.utils.views :as views])
(:require [reagent.core :as r] (:require [reagent.core :as r]
[status-im.ui.components.styles :as st] [status-im.ui.components.styles :as st]
[status-im.utils.utils :as u] [status-im.utils.utils :as u]
@ -188,3 +189,18 @@
[keyboard-avoiding-view-class (merge {:behavior :padding} props)] [keyboard-avoiding-view-class (merge {:behavior :padding} props)]
[view props])] [view props])]
(vec (concat view-element children)))) (vec (concat view-element children))))
(views/defview with-activity-indicator [{:keys [timeout style enabled?]} comp]
(views/letsubs
[loading (r/atom true)]
{:component-did-mount (fn []
(if (or (nil? timeout)
(> 100 timeout))
(reset! loading false)
(js/setTimeout (fn []
(reset! loading false))
timeout)))}
(if (and (not enabled?) @loading)
[view {:style style}
[activity-indicator {:animating true}]]
comp)))

5
src/status_im/ui/components/tabs/views.cljs
View File

@ -48,7 +48,10 @@
:ref #(reset! swiper %) :ref #(reset! swiper %)
:on-index-changed #(re-frame/dispatch [navigation-event (index->tab %)])} :on-index-changed #(re-frame/dispatch [navigation-event (index->tab %)])}
(for [[index {:keys [screen view-id]}] indexed-tabs] (for [[index {:keys [screen view-id]}] indexed-tabs]
^{:key index} [screen (is-current-tab? view-id)])] ^{:key index}
[react/with-activity-indicator
{:enabled? (= current-tab view-id)}
[screen (is-current-tab? view-id)]])]
(when (and bottom-tabs? (when (and bottom-tabs?
show-tabs?) show-tabs?)
[tabs tabs-container-style indexed-tabs tab-style on-press is-current-tab?])])))) [tabs tabs-container-style indexed-tabs tab-style on-press is-current-tab?])]))))