From d2aabc81c924bfbb36e69c6431aac122fd72d7de Mon Sep 17 00:00:00 2001 From: virvar Date: Thu, 17 Mar 2016 23:48:52 +0300 Subject: [PATCH] Add loading spinner Former-commit-id: b10b44988cab473f40a2cc7b4a192c73f97d9680 --- package.json | 1 + src/messenger/android/core.cljs | 2 +- src/messenger/android/login.cljs | 71 +++++++++++++++++-------------- src/messenger/state.cljs | 3 +- src/messenger/utils/ui_utils.cljs | 13 ++++++ 5 files changed, 56 insertions(+), 34 deletions(-) create mode 100644 src/messenger/utils/ui_utils.cljs diff --git a/package.json b/package.json index be99d1b666..5aafac5feb 100644 --- a/package.json +++ b/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" } } diff --git a/src/messenger/android/core.cljs b/src/messenger/android/core.cljs index 274d152425..db02ccbca5 100644 --- a/src/messenger/android/core.cljs +++ b/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 diff --git a/src/messenger/android/login.cljs b/src/messenger/android/login.cljs index 4dda8190e4..9ae0a965a3 100644 --- a/src/messenger/android/login.cljs +++ b/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,42 +38,46 @@ (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 - :backgroundColor "white"}} - (toolbar-android {:logo res/logo-icon - :title "Login" - :titleColor "#4A5258" - :style {:backgroundColor "white" - :height 56 - :elevation 2}}) - (view {:style {;; :alignItems "center" - }} - (text-input {:underlineColorAndroid "#9CBFC0" - :placeholder "Enter your phone number" - :keyboardType "phone-pad" - :onChangeText (fn [value] - (update-phone-number value)) - :style {:flex 1 - :marginHorizontal 18 - :lineHeight 42 - :fontSize 14 - :fontFamily "Avenir-Roman" - :color "#9CBFC0"}} - user-phone-number) - (touchable-highlight {:onPress #(sign-up) - :style {:alignSelf "center" - :borderRadius 7 - :backgroundColor "#E5F5F6" - :width 100}} - (text {:style {:marginVertical 10 - :textAlign "center"}} - "Sign up"))))))) + {:style {:flex 1}} + (view + {:style {:flex 1 + :backgroundColor "white"}} + (toolbar-android {:logo res/logo-icon + :title "Login" + :titleColor "#4A5258" + :style {:backgroundColor "white" + :height 56 + :elevation 2}}) + (view {:style { ;; :alignItems "center" + }} + (text-input {:underlineColorAndroid "#9CBFC0" + :placeholder "Enter your phone number" + :keyboardType "phone-pad" + :onChangeText (fn [value] + (update-phone-number value)) + :style {:flex 1 + :marginHorizontal 18 + :lineHeight 42 + :fontSize 14 + :fontFamily "Avenir-Roman" + :color "#9CBFC0"}} + user-phone-number) + (touchable-highlight {:onPress #(sign-up) + :style {:alignSelf "center" + :borderRadius 7 + :backgroundColor "#E5F5F6" + :width 100}} + (text {:style {:marginVertical 10 + :textAlign "center"}} + "Sign up")))) + (when loading + (ui/spinner {:visible true})))))) (def login (om/factory Login)) diff --git a/src/messenger/state.cljs b/src/messenger/state.cljs index aabebb9e74..c71bdd1eab 100644 --- a/src/messenger/state.cljs +++ b/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 @@ -42,4 +43,4 @@ (defn pub-sub-publisher [app] (get-in app pub-sub-bus-path)) (defn kv-store [] - (get-in @app-state simple-store-path)) \ No newline at end of file + (get-in @app-state simple-store-path)) diff --git a/src/messenger/utils/ui_utils.cljs b/src/messenger/utils/ui_utils.cljs new file mode 100644 index 0000000000..1afa3cc0f7 --- /dev/null +++ b/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)))