Skip to content

Commit

Permalink
Imporve bottomt tabs performance
Browse files Browse the repository at this point in the history
  • Loading branch information
@Parveshdhull
Parveshdhull committed Jun 26, 2022
1 parent 60fa37e commit d5a36aa
Show file tree
Hide file tree
Showing 5 changed files with 67 additions and 36 deletions.
2 changes: 2 additions & 0 deletions src/status_im/navigation2.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
[status-im.reloader :as reloader]
[status-im.utils.config :as config]
[status-im.utils.datetime :as datetime]
[status-im.switcher.bottom-tabs :as bottom-tabs]
[status-im.async-storage.core :as async-storage]))

(def parent-stack (atom :home-stack))
Expand All @@ -11,6 +12,7 @@
{:events [:toggle-new-ui]}
[_]
(swap! config/new-ui-enabled? not)
(bottom-tabs/reset-bottom-tabs)
(reloader/reload)
{:dispatch [:init-root (if @config/new-ui-enabled? :home-stack :chat-stack)]
::async-storage/set! {:new-ui-enabled? @config/new-ui-enabled?}})
Expand Down
8 changes: 3 additions & 5 deletions src/status_im/switcher/animation.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,12 +53,10 @@
;;;; Bottom Tabs & Home Stack Animations


(def tabs '("communities" "chats" "wallet" "browser"))

(defn bottom-tab-on-press [shared-values selected-tab-id]
(let [prefix (get (string/split (name selected-tab-id) #"-") 0)]
(doseq [tab tabs]
(let [selected-tab? (= tab prefix)
(let [selected-tab (get (string/split (name selected-tab-id) #"-") 0)]
(doseq [tab constants/tabs]
(let [selected-tab? (= tab selected-tab)
tab-opacity-shared-value (get shared-values (keyword (str tab "-tab-opacity")))
stack-opacity-shared-value (get shared-values (keyword (str tab "-stack-opacity")))
stack-pointer-shared-value (get shared-values (keyword (str tab "-stack-pointer")))]
Expand Down
20 changes: 19 additions & 1 deletion src/status_im/switcher/bottom_tabs.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,28 @@

(def selected-tab-id (atom :communities-stack))

;; Reagent atoms used for lazily loading home screen tabs
(def load-communities-tab? (reagent/atom true))
(def load-chats-tab? (reagent/atom false))
(def load-wallet-tab? (reagent/atom false))
(def load-browser-tab? (reagent/atom false))

(defn reset-bottom-tabs []
(reset! selected-tab-id :communities-stack)
(reset! load-communities-tab? true)
(reset! load-chats-tab? false)
(reset! load-wallet-tab? false)
(reset! load-browser-tab? false))

(defn bottom-tab-on-press [shared-values tab-id]
(when-not (= tab-id @selected-tab-id)
(reset! selected-tab-id tab-id)
(animation/bottom-tab-on-press shared-values tab-id)))
(animation/bottom-tab-on-press shared-values tab-id)
(case tab-id
:communities-stack (reset! load-communities-tab? true)
:chats-stack (reset! load-chats-tab? true)
:wallet-stack (reset! load-wallet-tab? true)
:browser-stack (reset! load-browser-tab? true))))

;; TODO(parvesh) - reimplement tab with counter, once design is complete
(defn bottom-tab [icon tab icons-only? shared-values]
Expand Down
2 changes: 2 additions & 0 deletions src/status_im/switcher/constants.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,3 +48,5 @@

(defn dimensions []
(<sub [:dimensions/window]))

(def tabs '("communities" "chats" "wallet" "browser"))
71 changes: 41 additions & 30 deletions src/status_im/switcher/home_stack.cljs
View file
Original file line number Diff line number Diff line change
@@ -1,31 +1,41 @@
(ns status-im.switcher.home-stack
(:require [reagent.core :as reagent]
[clojure.string :as string]
[quo2.reanimated :as reanimated]
[quo2.screens.main :as quo2.preview]
[status-im.utils.platform :as platform]
[status-im.switcher.switcher :as switcher]
[status-im.ui.screens.home.views :as home]
[status-im.switcher.constants :as constants]
[status-im.switcher.bottom-tabs :as bottom-tabs]
[status-im.ui.screens.profile.user.views :as profile.user]
[status-im.ui.screens.wallet.accounts.views :as wallet.accounts]
[status-im.switcher.bottom-tabs :as bottom-tabs]))
[status-im.ui.screens.wallet.accounts.views :as wallet.accounts]))

(defn load-stack? [stack-id]
(case stack-id
:communities-stack @bottom-tabs/load-communities-tab?
:chats-stack @bottom-tabs/load-chats-tab?
:browser-stack @bottom-tabs/load-browser-tab?
:wallet-stack @bottom-tabs/load-wallet-tab?))

(defn stack-view [stack-id shared-values top-margin]
[:>
(fn []
(reagent/as-element
[reanimated/view {:style (reanimated/apply-animations-to-style
{:opacity (get shared-values (keyword (str (name stack-id) "-opacity")))
:pointer-events (get shared-values (keyword (str (name stack-id) "-pointer")))}
{:top top-margin
:bottom (if platform/ios? 79 55)
:left 0
:right 0
:position :absolute})}
(case stack-id
:communities-stack [quo2.preview/main-screen]
:chats-stack [home/home]
:wallet-stack [wallet.accounts/accounts-overview]
:browser-stack [profile.user/my-profile])]))])
(when (load-stack? stack-id)
[:>
(fn []
(reagent/as-element
[reanimated/view {:style (reanimated/apply-animations-to-style
{:opacity (get shared-values (keyword (str (name stack-id) "-opacity")))
:pointer-events (get shared-values (keyword (str (name stack-id) "-pointer")))}
{:top top-margin
:bottom (if platform/ios? 79 55)
:left 0
:right 0
:position :absolute})}
(case stack-id
:communities-stack [quo2.preview/main-screen]
:chats-stack [home/home]
:wallet-stack [wallet.accounts/accounts-overview]
:browser-stack [profile.user/my-profile])]))]))

(defn home-stack [shared-values]
[:<>
Expand All @@ -37,18 +47,19 @@
(defn home []
[:>
(fn []
(let [shared-values {:communities-tab-opacity (reanimated/use-shared-value 1)
:chats-tab-opacity (reanimated/use-shared-value 0)
:wallet-tab-opacity (reanimated/use-shared-value 0)
:browser-tab-opacity (reanimated/use-shared-value 0)
:communities-stack-opacity (reanimated/use-shared-value 1)
:chats-stack-opacity (reanimated/use-shared-value 0)
:wallet-stack-opacity (reanimated/use-shared-value 0)
:browser-stack-opacity (reanimated/use-shared-value 0)
:communities-stack-pointer (reanimated/use-shared-value "auto")
:chats-stack-pointer (reanimated/use-shared-value "none")
:wallet-stack-pointer (reanimated/use-shared-value "none")
:browser-stack-pointer (reanimated/use-shared-value "none")}]
(let [selected-tab (get (string/split (name @bottom-tabs/selected-tab-id) #"-") 0)
shared-values (reduce (fn [acc tab]
(let [selected-tab? (= tab selected-tab)
tab-opacity-keyword (keyword (str tab "-tab-opacity"))
stack-opacity-keyword (keyword (str tab "-stack-opacity"))
stack-pointer-keyword (keyword (str tab "-stack-pointer"))]
(assoc
acc
tab-opacity-keyword (reanimated/use-shared-value (if selected-tab? 1 0))
stack-opacity-keyword (reanimated/use-shared-value (if selected-tab? 1 0))
stack-pointer-keyword (reanimated/use-shared-value (if selected-tab? "auto" "none")))))
{}
constants/tabs)]
(reagent/as-element
[:<>
[home-stack shared-values]
Expand Down

0 comments on commit d5a36aa

Please sign in to comment.