status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix UI freeze issue (#15761)

This commit is contained in:
Parvesh Monu 2023-04-27 17:26:33 +05:30 committed by GitHub
parent fb326bbf4e
commit 8e49a06dbe
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 26 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/js/worklets/shell.js
View File

@ -18,11 +18,11 @@ export function stackOpacity (stackId, selectedStackId) {
); );
} }
export function stackPointer (stackId, selectedStackId) { export function stackZIndex (stackId, selectedStackId) {
return useDerivedValue( return useDerivedValue(
function () { function () {
'worklet' 'worklet'
return selectedStackId.value == stackId ? "auto" : "none"; return selectedStackId.value == stackId ? 10 : 9;
} }
); );
} }

6
src/status_im2/contexts/shell/animation.cljs
View File

@ -93,13 +93,13 @@
(fn [acc id] (fn [acc id]
(let [tabs-icon-color-keyword (get shell.constants/tabs-icon-color-keywords id) (let [tabs-icon-color-keyword (get shell.constants/tabs-icon-color-keywords id)
stack-opacity-keyword (get shell.constants/stacks-opacity-keywords id) stack-opacity-keyword (get shell.constants/stacks-opacity-keywords id)
stack-pointer-keyword (get shell.constants/stacks-pointer-keywords id)] stack-z-index-keyword (get shell.constants/stacks-z-index-keywords id)]
(assoc (assoc
acc acc
stack-opacity-keyword stack-opacity-keyword
(worklets.shell/stack-opacity (name id) selected-stack-id-sv) (worklets.shell/stack-opacity (name id) selected-stack-id-sv)
stack-pointer-keyword stack-z-index-keyword
(worklets.shell/stack-pointer (name id) selected-stack-id-sv) (worklets.shell/stack-z-index (name id) selected-stack-id-sv)
tabs-icon-color-keyword tabs-icon-color-keyword
(worklets.shell/bottom-tab-icon-color (worklets.shell/bottom-tab-icon-color
(name id) (name id)

12
src/status_im2/contexts/shell/constants.cljs
View File

@ -36,18 +36,18 @@
:wallet-stack :wallet-stack-opacity :wallet-stack :wallet-stack-opacity
:browser-stack :browser-stack-opacity}) :browser-stack :browser-stack-opacity})
(def stacks-pointer-keywords
{:communities-stack :communities-stack-pointer
:chats-stack :chats-stack-pointer
:wallet-stack :wallet-stack-pointer
:browser-stack :browser-stack-pointer})
(def tabs-icon-color-keywords (def tabs-icon-color-keywords
{:communities-stack :communities-tab-icon-color {:communities-stack :communities-tab-icon-color
:chats-stack :chats-tab-icon-opacity :chats-stack :chats-tab-icon-opacity
:wallet-stack :wallet-tab-icon-opacity :wallet-stack :wallet-tab-icon-opacity
:browser-stack :browser-tab-icon-opacity}) :browser-stack :browser-tab-icon-opacity})
(def stacks-z-index-keywords
{:communities-stack :communities-stack-z-index
:chats-stack :chats-stack-z-index
:wallet-stack :wallet-stack-z-index
:browser-stack :browser-stack-z-index})
;; Home stack states ;; Home stack states
(def ^:const close-with-animation 0) (def ^:const close-with-animation 0)

19
src/status_im2/contexts/shell/home_stack.cljs
View File

@ -18,14 +18,12 @@
(defn- f-stack-view (defn- f-stack-view
[stack-id shared-values] [stack-id shared-values]
;; TODO lazy loading doesn't work with functional components with hoocks (when (load-stack? stack-id))
;; Error: Rendered more hooks than during the previous render.
[reanimated/view [reanimated/view
{:style (reanimated/apply-animations-to-style {:style (reanimated/apply-animations-to-style
{:opacity (get shared-values {:opacity (get shared-values
(get shell.constants/stacks-opacity-keywords stack-id)) (get shell.constants/stacks-opacity-keywords stack-id))
:pointer-events (get shared-values :z-index (get shared-values
(get shell.constants/stacks-pointer-keywords stack-id))} (get shell.constants/stacks-z-index-keywords stack-id))}
{:position :absolute {:position :absolute
:top 0 :top 0
:bottom 0 :bottom 0
@ -38,6 +36,11 @@
:wallet-stack [wallet.accounts/accounts-overview] :wallet-stack [wallet.accounts/accounts-overview]
:browser-stack [browser.stack/browser-stack])]) :browser-stack [browser.stack/browser-stack])])
(defn lazy-screen
[stack-id shared-values]
(when (load-stack? stack-id)
[:f> f-stack-view stack-id shared-values]))
(defn f-home-stack (defn f-home-stack
[] []
(let [shared-values @animation/shared-values-atom (let [shared-values @animation/shared-values-atom
@ -50,7 +53,7 @@
:transform [{:scale (:home-stack-scale shared-values)}]} :transform [{:scale (:home-stack-scale shared-values)}]}
home-stack-original-style)] home-stack-original-style)]
[reanimated/view {:style home-stack-animated-style} [reanimated/view {:style home-stack-animated-style}
[:f> f-stack-view :communities-stack shared-values] [lazy-screen :communities-stack shared-values]
[:f> f-stack-view :chats-stack shared-values] [lazy-screen :chats-stack shared-values]
[:f> f-stack-view :browser-stack shared-values] [lazy-screen :browser-stack shared-values]
[:f> f-stack-view :wallet-stack shared-values]])) [lazy-screen :wallet-stack shared-values]]))

4
src/utils/worklets/shell.cljs
View File

@ -6,9 +6,9 @@
[id selected-stack-id] [id selected-stack-id]
(.stackOpacity ^js shell-worklets id selected-stack-id)) (.stackOpacity ^js shell-worklets id selected-stack-id))
(defn stack-pointer (defn stack-z-index
[id selected-stack-id] [id selected-stack-id]
(.stackPointer ^js shell-worklets id selected-stack-id)) (.stackZIndex ^js shell-worklets id selected-stack-id))
(defn bottom-tabs-height (defn bottom-tabs-height
[home-stack-state-sv container-height extended-container-height] [home-stack-state-sv container-height extended-container-height]