with-activity-indicator component

main-tab: render only current tab immediatly on navigation, other three 100ms later

src/status_im/ui/components/react.cljs

@@ -1,4 +1,5 @@
 (ns status-im.ui.components.react
+  (:require-macros [status-im.utils.views :as views])
   (:require [reagent.core :as r]
             [status-im.ui.components.styles :as st]
             [status-im.utils.utils :as u]
@@ -188,3 +189,18 @@
                        [keyboard-avoiding-view-class (merge {:behavior :padding} props)]
                        [view props])]
     (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)))

src/status_im/ui/components/tabs/views.cljs

@@ -48,7 +48,10 @@
                         :ref              #(reset! swiper %)
                         :on-index-changed #(re-frame/dispatch [navigation-event (index->tab %)])}
           (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?
                     show-tabs?)
            [tabs tabs-container-style indexed-tabs tab-style on-press is-current-tab?])]))))