Replace old skeleton with new (#17169)
fixes #17103 ### Follow up from #16865 This commit focuses on enhancing the user experience by replacing our legacy skeleton loaders with the latest version. Additionally, it introduces a refined approach for deprecating outdated components and functions to maintain a cleaner codebase. ### Key Changes Replace existing skeleton loaders with the latest skeleton-list component for improved performance and usability. Implement a standardized deprecation method, using either naming conventions or metadata annotations, for phasing out old components and functions.
This commit is contained in:
parent
8036c219e8
commit
a30a80f8a1
|
@ -21,7 +21,9 @@
|
||||||
|
|
||||||
;; Standlone message skeleton
|
;; Standlone message skeleton
|
||||||
(defn- f-message-skeleton
|
(defn- f-message-skeleton
|
||||||
|
{:deprecated "quo2.components.loaders.skeleton-list.view should be used instead"}
|
||||||
[]
|
[]
|
||||||
|
|
||||||
(let [color (colors/theme-colors colors/neutral-5 colors/neutral-70)
|
(let [color (colors/theme-colors colors/neutral-5 colors/neutral-70)
|
||||||
loading-color (colors/theme-colors colors/neutral-10 colors/neutral-60)
|
loading-color (colors/theme-colors colors/neutral-10 colors/neutral-60)
|
||||||
content-width (rand-nth message-content-width)
|
content-width (rand-nth message-content-width)
|
||||||
|
|
|
@ -68,7 +68,6 @@
|
||||||
quo2.components.list-items.preview-list.view
|
quo2.components.list-items.preview-list.view
|
||||||
quo2.components.list-items.token-value.view
|
quo2.components.list-items.token-value.view
|
||||||
quo2.components.list-items.user-list
|
quo2.components.list-items.user-list
|
||||||
quo2.components.loaders.skeleton
|
|
||||||
quo2.components.loaders.skeleton-list.view
|
quo2.components.loaders.skeleton-list.view
|
||||||
quo2.components.markdown.list.view
|
quo2.components.markdown.list.view
|
||||||
quo2.components.markdown.text
|
quo2.components.markdown.text
|
||||||
|
@ -255,7 +254,6 @@
|
||||||
(def token-value quo2.components.list-items.token-value.view/view)
|
(def token-value quo2.components.list-items.token-value.view/view)
|
||||||
|
|
||||||
;;;; Loaders
|
;;;; Loaders
|
||||||
(def skeleton quo2.components.loaders.skeleton/skeleton)
|
|
||||||
(def skeleton-list quo2.components.loaders.skeleton-list.view/view)
|
(def skeleton-list quo2.components.loaders.skeleton-list.view/view)
|
||||||
|
|
||||||
;;;; Navigation
|
;;;; Navigation
|
||||||
|
|
|
@ -24,7 +24,10 @@
|
||||||
:style {:height (if in-progress? window-height 48)}}
|
:style {:height (if in-progress? window-height 48)}}
|
||||||
[react/view {:style style/label-container}
|
[react/view {:style style/label-container}
|
||||||
(if in-progress?
|
(if in-progress?
|
||||||
[quo2/skeleton window-height]
|
[quo2/skeleton-list
|
||||||
|
{:parent-height window-height
|
||||||
|
:animated true
|
||||||
|
:content :messages}]
|
||||||
[react/nested-text
|
[react/nested-text
|
||||||
{:style (style/gap-text (and connected? use-status-nodes?))}
|
{:style (style/gap-text (and connected? use-status-nodes?))}
|
||||||
(i18n/label (if first-gap? :t/load-more-messages :t/fetch-messages))
|
(i18n/label (if first-gap? :t/load-more-messages :t/fetch-messages))
|
||||||
|
|
|
@ -104,22 +104,28 @@
|
||||||
{:extrapolateLeft "clamp"
|
{:extrapolateLeft "clamp"
|
||||||
:extrapolateRight "clamp"})
|
:extrapolateRight "clamp"})
|
||||||
|
|
||||||
|
(defn skeleton-list-props
|
||||||
|
[content parent-height animated?]
|
||||||
|
{:content content
|
||||||
|
:parent-height parent-height
|
||||||
|
:animated? animated?})
|
||||||
|
|
||||||
(defn loading-view
|
(defn loading-view
|
||||||
[chat-id]
|
[chat-id]
|
||||||
(let [loading-messages? (rf/sub [:chats/loading-messages? chat-id])
|
(let [loading-messages? (rf/sub [:chats/loading-messages? chat-id])
|
||||||
all-loaded? (rf/sub [:chats/all-loaded? chat-id])
|
all-loaded? (rf/sub [:chats/all-loaded? chat-id])
|
||||||
messages (rf/sub [:chats/raw-chat-messages-stream chat-id])
|
messages (rf/sub [:chats/raw-chat-messages-stream chat-id])
|
||||||
loading-first-page? (= (count messages) 0)
|
loading-first-page? (= (count messages) 0)
|
||||||
top-spacing (if loading-first-page? 0 navigation.style/navigation-bar-height)]
|
top-spacing (if loading-first-page? 0 navigation.style/navigation-bar-height)
|
||||||
|
parent-height (if loading-first-page?
|
||||||
|
(- @messages-view-height
|
||||||
|
@messages-view-header-height
|
||||||
|
composer.constants/composer-default-height
|
||||||
|
loading-indicator-extra-spacing)
|
||||||
|
loading-indicator-page-loading-height)]
|
||||||
(when (or loading-messages? (not all-loaded?))
|
(when (or loading-messages? (not all-loaded?))
|
||||||
[rn/view {:padding-top top-spacing}
|
[rn/view {:padding-top top-spacing}
|
||||||
[quo/skeleton
|
[quo/skeleton-list (skeleton-list-props :messages parent-height true)]])))
|
||||||
(if loading-first-page?
|
|
||||||
(- @messages-view-height
|
|
||||||
@messages-view-header-height
|
|
||||||
composer.constants/composer-default-height
|
|
||||||
loading-indicator-extra-spacing)
|
|
||||||
loading-indicator-page-loading-height)]])))
|
|
||||||
|
|
||||||
(defn list-header
|
(defn list-header
|
||||||
[insets able-to-send-message?]
|
[insets able-to-send-message?]
|
||||||
|
@ -353,10 +359,9 @@
|
||||||
[props]
|
[props]
|
||||||
(let [chat-screen-loaded? (rf/sub [:shell/chat-screen-loaded?])
|
(let [chat-screen-loaded? (rf/sub [:shell/chat-screen-loaded?])
|
||||||
window-height (:height (rn/get-window))
|
window-height (:height (rn/get-window))
|
||||||
content-height (- window-height composer.constants/composer-default-height)]
|
content-height (- window-height composer.constants/composer-default-height)
|
||||||
|
top-spacing (when (not chat-screen-loaded?) navigation.style/navigation-bar-height)]
|
||||||
(if chat-screen-loaded?
|
(if chat-screen-loaded?
|
||||||
[:f> f-messages-list-content props]
|
[:f> f-messages-list-content props]
|
||||||
[rn/view {:style {:flex 1}}
|
[rn/view {:style {:padding-top top-spacing}}
|
||||||
[quo/skeleton-list
|
[quo/skeleton-list (skeleton-list-props :messages content-height false)]])))
|
||||||
{:content :messages
|
|
||||||
:parent-height content-height}]])))
|
|
||||||
|
|
Loading…
Reference in New Issue