Skip to content

Commit

Permalink
chore: clean up implementation and speed up animation
Browse files Browse the repository at this point in the history
  • Loading branch information
@J-Son89
J-Son89 committed May 17, 2024
1 parent 9f68d88 commit ebf6b31
Show file tree
Hide file tree
Showing 2 changed files with 104 additions and 81 deletions.
172 changes: 97 additions & 75 deletions src/quo/components/profile/collectible_list_item/view.cljs
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,47 @@
(ns quo.components.profile.collectible-list-item.view
(:require
[quo.components.avatars.collection-avatar.view :as collection-avatar]
[quo.components.counter.collectible-counter.view :as collectible-counter]
[quo.components.icon :as icon]
[quo.components.list-items.preview-list.view :as preview-list]
[quo.components.markdown.text :as text]
[quo.components.profile.collectible-list-item.style :as style]
[quo.foundations.colors :as colors]
[quo.foundations.gradients :as gradients]
[quo.theme]
[react-native.core :as rn]
[react-native.reanimated :as reanimated]
[schema.core :as schema]
[utils.datetime :as datetime]
[utils.i18n :as i18n]))

(def timing-options-out #js {:duration 1400})
(def timing-options-in #js {:duration 1800})
[quo.components.avatars.collection-avatar.view :as collection-avatar]
[quo.components.counter.collectible-counter.view :as collectible-counter]
[quo.components.icon :as icon]
[quo.components.list-items.preview-list.view :as preview-list]
[quo.components.markdown.text :as text]
[quo.components.profile.collectible-list-item.style :as style]
[quo.foundations.colors :as colors]
[quo.foundations.gradients :as gradients]
[quo.theme]
[react-native.core :as rn]
[react-native.reanimated :as reanimated]
[schema.core :as schema]
[utils.datetime :as datetime]
[utils.i18n :as i18n]))

(def timing-options-out 650)
(def timing-options-in 1000)

(defn on-load-end
[{:keys [load-time set-state loader-opacity image-opacity]}]
(reanimated/animate-shared-value-with-timing loader-opacity 0 timing-options-out :easing1)
(reanimated/animate-shared-value-with-timing image-opacity 1 timing-options-in :easing1)
(if (> load-time 200)
(js/setTimeout
(fn []
(set-state (fn [prev-state]
(assoc prev-state :image-loaded? true))))
500)
(set-state (fn [prev-state]
(assoc prev-state :image-loaded? true)))))

(defn on-load-error
[set-state]
(js/setTimeout (fn []
(set-state (fn [prev-state] (assoc prev-state :image-error? true))))
800))

(defn- fallback-view
[{:keys [label theme loaded-opacity]}]
[{:keys [label theme image-opacity]}]
[reanimated/view
{:style (reanimated/apply-animations-to-style
{:opacity loaded-opacity}
{:opacity image-opacity}
(style/fallback {:theme theme}))}
[rn/view
[icon/icon :i/sad {:color (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)}]]
Expand All @@ -41,17 +60,18 @@
[rn/view {:style (style/loading-message theme)}])

(defn- loading-image
[{:keys [theme gradient-color-index loading-opacity]}]
[reanimated/view {:style (reanimated/apply-animations-to-style
{:opacity loading-opacity}
(style/loading-image theme))}
[{:keys [theme gradient-color-index loader-opacity]}]
[reanimated/view
{:style (reanimated/apply-animations-to-style
{:opacity loader-opacity}
(style/loading-image theme))}
[gradients/view
{:theme theme
:container-style (style/loading-image theme)
:color-index gradient-color-index}]])

(defn- card-details
[{:keys [community? avatar-image-src collectible-name theme state set-state]}]
[{:keys [community? avatar-image-src collectible-name theme state set-state image-opacity]}]
[rn/view {:style style/card-details-container}
(cond (and not community? (not (:avatar-loaded? state)))
[rn/view {:style {:flex-direction :row}}
Expand All @@ -65,14 +85,19 @@
:size :size-20}
[avatar-image-src]]

[rn/view {:style {:width 8}}]
[reanimated/view
{:style (reanimated/apply-animations-to-style
{:opacity image-opacity}
{:width 8})}]
[text/text
{:size :paragraph-1
:weight :semi-bold
:style style/card-detail-text}
collectible-name]]
:else [rn/view
{:style (style/avatar-container (:avatar-loaded? state))}
:else [reanimated/view
{:style (reanimated/apply-animations-to-style
{:opacity image-opacity}
(style/avatar-container (:avatar-loaded? state)))}
[:<>
[collection-avatar/view
{:size :size-20
Expand All @@ -90,67 +115,52 @@
(defn- card-view
[{:keys [avatar-image-src collectible-name community? counter state set-state
gradient-color-index image-src supported-file?]}]
(let [theme (quo.theme/use-theme)
loading-opacity (reanimated/use-shared-value (if supported-file? 1 0))
loaded-opacity (reanimated/use-shared-value (if supported-file? 0 1))
(let [theme (quo.theme/use-theme)
loader-opacity (reanimated/use-shared-value (if supported-file? 1 0))
image-opacity (reanimated/use-shared-value (if supported-file? 0 1))
[load-time set-load-time] (rn/use-state (datetime/now))
;; Moved `apply-animations-to-style` outside the condition where it's used
supported-file-styles (reanimated/apply-animations-to-style
{:opacity loaded-opacity}
{:aspect-ratio 1})]

supported-file-styles (reanimated/apply-animations-to-style
{:opacity image-opacity}
{:aspect-ratio 1})]
[rn/view {:style (style/card-view-container theme)}
[rn/view {:style {:aspect-ratio 1}}
(cond
(:image-error? state)
[fallback-view
{:loaded-opacity loaded-opacity
:theme theme
:label (i18n/label :t/cant-fetch-info)}]
{:image-opacity image-opacity
:theme theme
:label (i18n/label :t/cant-fetch-info)}]

(not supported-file?)
[fallback-view
{:loaded-opacity loaded-opacity
:theme theme
:label (i18n/label :t/unsupported-file)}]
{:image-opacity image-opacity
:theme theme
:label (i18n/label :t/unsupported-file)}]

(not (:image-loaded? state))
[loading-image
{:loading-opacity loading-opacity
{:loader-opacity loader-opacity
:theme theme
:gradient-color-index gradient-color-index}])
(when supported-file?
[reanimated/view {:style supported-file-styles}
[rn/image
{:style style/image
{:style style/image
:on-load-start #(set-load-time (fn [start-time] (- (datetime/now) start-time)))


:on-load-end (if (> load-time 200)
(fn []
(reanimated/set-shared-value loading-opacity (reanimated/with-timing 0 timing-options-out))
(reanimated/set-shared-value loaded-opacity (reanimated/with-timing 1 timing-options-in))
(js/setTimeout
(fn []
(set-state (fn [prev-state]
(assoc prev-state :image-loaded? true))))
800))
(fn []
(reanimated/set-shared-value loading-opacity 0)
(reanimated/set-shared-value loaded-opacity 1)
(set-state (fn [prev-state]
(assoc prev-state :image-loaded? true)))))
:on-error (fn []
(js/setTimeout (fn []
(set-state (fn [prev-state] (assoc prev-state :image-error? true)))) 800))
:source image-src}]])]
:on-load-end #(on-load-end {:load-time load-time
:set-state set-state
:loader-opacity loader-opacity
:image-opacity image-opacity})
:on-error #(on-load-error set-state)
:source image-src}]])]
(when (and (:image-loaded? state) (not (:image-error? state)) counter)
[collectible-counter/view
{:container-style style/collectible-counter
:size :size-24
:value counter}])
[card-details
{:state state
:image-opacity image-opacity
:set-state set-state
:community? community?
:avatar-image-src avatar-image-src
Expand All @@ -160,30 +170,43 @@
(defn- image-view
[{:keys [avatar-image-src community? counter state set-state
gradient-color-index image-src supported-file?]}]
(let [theme (quo.theme/use-theme)]
(let [theme (quo.theme/use-theme)
loader-opacity (reanimated/use-shared-value (if supported-file? 1 0))
image-opacity (reanimated/use-shared-value (if supported-file? 0 1))
[load-time set-load-time] (rn/use-state (datetime/now))
supported-file-styles (reanimated/apply-animations-to-style
{:opacity image-opacity}
{:aspect-ratio 1})]
[rn/view {:style style/image-view-container}
(cond
(:image-error? state)
[fallback-view
{:theme theme
:label (i18n/label :t/cant-fetch-info)}]
{:image-opacity image-opacity
:theme theme
:label (i18n/label :t/cant-fetch-info)}]

(not supported-file?)
[fallback-view
{:theme theme
:label (i18n/label :t/unsupported-file)}]
{:image-opacity image-opacity
:theme theme
:label (i18n/label :t/unsupported-file)}]

(not (:image-loaded? state))
[loading-image
{:theme theme
{:loader-opacity loader-opacity
:theme theme
:gradient-color-index gradient-color-index}])
(when supported-file?
[rn/view {:style {:aspect-ratio 1}}
[reanimated/view {:style supported-file-styles}
[rn/image
{:style style/image
:on-load-end #(set-state (fn [prev-state] (assoc prev-state :image-loaded? true)))
:on-error #(set-state (fn [prev-state] (assoc prev-state :image-error? true)))
:source image-src}]])
{:style style/image
:on-load-start #(set-load-time (fn [start-time] (- (datetime/now) start-time)))
:on-load-end #(on-load-end {:load-time load-time
:set-state set-state
:loader-opacity loader-opacity
:image-opacity image-opacity})
:on-error #(on-load-error set-state)
:source image-src}]])
(when (and (:image-loaded? state) (not (:image-error? state)) counter)
[collectible-counter/view
{:container-style style/collectible-counter
Expand Down Expand Up @@ -211,7 +234,6 @@
(if (= type :card)
[card-view
(assoc props

:state state
:set-state set-state
:supported-file? supported-file?)]
Expand Down
13 changes: 7 additions & 6 deletions src/status_im/contexts/wallet/home/tabs/view.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,13 @@
[{:keys [preview-url collectible-details id]}]
(let [chain-id (get-in id [:contract-id :chain-id])
address (get-in id [:contract-id :address])]
(rf/dispatch [:show-bottom-sheet {:content (fn []
[options-drawer/view
{:chain-id chain-id
:address address
:name (:name collectible-details)
:image (:uri preview-url)}])}])))
(rf/dispatch [:show-bottom-sheet
{:content (fn []
[options-drawer/view
{:chain-id chain-id
:address address
:name (:name collectible-details)
:image (:uri preview-url)}])}])))

(defn- on-collectible-press
[{:keys [id]}]
Expand Down

0 comments on commit ebf6b31

Please sign in to comment.