Add loading spinner

package.json

@@ -11,6 +11,7 @@
     "react-native-contacts": "^0.2.1",
     "react-native-i18n": "0.0.8",
     "react-native-invertible-scroll-view": "^0.2.0",
+    "react-native-loading-spinner-overlay": "0.0.6",
     "realm": "^0.10.0"
   }
 }

src/messenger/android/core.cljs

@@ -40,7 +40,7 @@
 (defui AppRoot
   static om/IQuery
   (query [this]
-    '[:contacts-ds :user-phone-number :confirmation-code])
+    '[:loading :contacts-ds :user-phone-number :confirmation-code])
   Object
   (render [this]
     (navigator

src/messenger/android/login.cljs

@@ -9,6 +9,7 @@
             [messenger.comm.intercom :as intercom :refer [set-user-phone-number]]
             [messenger.utils.utils :refer [log toast http-post]]
             [messenger.utils.resources :as res]
+            [messenger.utils.ui-utils :as ui]
             [messenger.android.sign-up-confirm :refer [sign-up-confirm]]
             [messenger.constants :refer [ethereum-rpc-url]]))
 
@@ -18,11 +19,13 @@
 (def country-code "US")
 
 (defn show-confirm-view []
+  (swap! state/app-state assoc :loading false)
   (binding [state/*nav-render* false]
     (.replace @nav-atom (clj->js {:component sign-up-confirm
                                   :name "sign-up-confirm"}))))
 
 (defn sign-up []
+  (swap! state/app-state assoc :loading true)
   (let [app-state (state/state)
         phone-number (:user-phone-number app-state)
         whisper-identity (:user-whisper-identity app-state)]
@@ -35,12 +38,14 @@
 (defui Login
   static om/IQuery
   (query [this]
-         '[:user-phone-number :user-whisper-identity])
+         '[:user-phone-number :user-whisper-identity :loading])
   Object
   (render [this]
-          (let [{:keys [user-phone-number user-whisper-identity]} (om/props this)
+          (let [{:keys [user-phone-number user-whisper-identity loading]} (om/props this)
                 {:keys [nav]} (om/get-computed this)]
             (reset! nav-atom nav)
+            (view
+             {:style {:flex 1}}
              (view
               {:style {:flex 1
                        :backgroundColor "white"}}
@@ -50,7 +55,7 @@
                                 :style {:backgroundColor "white"
                                         :height 56
                                         :elevation 2}})
-             (view {:style {;; :alignItems "center"
+              (view {:style { ;; :alignItems "center"
                              }}
                     (text-input {:underlineColorAndroid "#9CBFC0"
                                  :placeholder "Enter your phone number"
@@ -71,6 +76,8 @@
                                                   :width 100}}
                                          (text {:style {:marginVertical 10
                                                         :textAlign "center"}}
-                                              "Sign up")))))))
+                                               "Sign up"))))
+             (when loading
+               (ui/spinner {:visible true}))))))
 
 (def login (om/factory Login))

src/messenger/state.cljs

@@ -10,6 +10,7 @@
 (set! js/React (js/require "react-native"))
 
 (defonce app-state (atom {:component             nil
+                          :loading               false
                           :user-phone-number     nil
                           :user-whisper-identity nil
                           :confirmation-code     nil

src/messenger/utils/ui_utils.cljs

@@ -0,0 +1,13 @@
+(ns messenger.utils.ui-utils
+  ;; (:require-macros
+  ;;  [natal-shell.components :refer [view text image touchable-highlight list-view
+  ;;                                  toolbar-android text-input]]
+  ;;  [natal-shell.core :refer [with-error-view]])
+  ;; (:require [om.next :as om :refer-macros [defui]])
+  )
+
+(set! js/Spinner (.-default (js/require "react-native-loading-spinner-overlay")))
+
+(defn spinner [props]
+  (js/React.createElement js/Spinner
+                          (clj->js props)))