         [react/view
          (when (and loading-indicator? @status-hidden)
            [loading-indicator @window-width])]]
-       [connectivity-status
+       [connectivity-status-comp
         (merge (or ui-status-properties
                    {:connected? true :message :t/connected})
                {:window-width @window-width})

            [taoensso.timbre :as log])
  (:require-macros
   [status-im.utils.views :as views :refer [defview letsubs]]))

(def connectivity-bar-height 36)
(def neg-connectivity-bar-height (- connectivity-bar-height))

;; ui-connectivity-status delays
(def standard-delay 1000)


(defn manage-visibility
  "status-hidden is a per-view state, while to-hide? is a global state common to
all connectivity views (we have at least one view in home and one in chat)"
  [connected? animate? anim-opacity anim-y status-hidden connectivity-bar-height]
  (let [neg-connectivity-bar-height (- @connectivity-bar-height)]
    (if connected?
      (if animate?
        (when (and @to-hide? (not @status-hidden))
          (animation/start
           (animation/parallel
            [(animation/timing anim-opacity
                               {:toValue         0
                                :delay           800
                                :duration        150
                                :easing          (.-ease ^js animation/easing)
                                :useNativeDriver true})
             (animation/timing anim-y
                               {:toValue         (if platform/desktop? 0 neg-connectivity-bar-height)
                                :delay           800
                                :duration        150
                                :easing          (.-ease ^js animation/easing)
                                :useNativeDriver true})])
            ;; second param of start() - a callback that fires when animation stops
           #(do (reset! to-hide? false) (reset! status-hidden true))))
        (do
          (animation/set-value anim-opacity 0)
          (animation/set-value anim-y (if platform/desktop? 0 neg-connectivity-bar-height))
          (reset! to-hide? false)
          (reset! status-hidden true)))
      ;; else
      (if animate?
        (when (and (not @to-hide?) @status-hidden)
          (animation/start
           (animation/parallel
            [(animation/timing anim-opacity
                               {:toValue         1
                                :duration        150
                                :easing          (.-ease ^js animation/easing)
                                :useNativeDriver true})
             (animation/timing anim-y
                               {:toValue         (if platform/desktop? connectivity-bar-height 0)
                                :duration        150
                                :easing          (.-ease ^js animation/easing)
                                :useNativeDriver true})])
            ;; second param of start() - a callback that fires when animation stops
           #(do (reset! to-hide? true) (reset! status-hidden false))))
        (do
          (animation/set-value anim-opacity 1)
          (animation/set-value anim-y (if platform/desktop? connectivity-bar-height 0))
          (reset! to-hide? true)
          (reset! status-hidden false))))))

(defn connectivity-status
  [{:keys [connected?]} status-hidden height]
  (let [neg-connectivity-bar-height (- @height)
        anim-translate-y            (animation/create-value neg-connectivity-bar-height)
        anim-opacity                (animation/create-value 0)]
    (reagent/create-class
     {:component-did-mount
      (fn []
        (manage-visibility connected? false
                           anim-opacity anim-translate-y status-hidden height))
      :should-component-update
      ;; ignore :loading-indicator?
      (fn [_ [_ old_p] [_ new_p]]
