From a30a80f8a184e2c3c9133b4c075125c09bc4195b Mon Sep 17 00:00:00 2001 From: Flavio Fraschetti Date: Thu, 7 Sep 2023 16:31:11 +0100 Subject: [PATCH] Replace old skeleton with new (#17169) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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.

 --- src/quo2/components/loaders/skeleton.cljs | 2 ++ src/quo2/core.cljs | 2 -- .../ui/screens/chat/message/gap.cljs | 5 ++- .../contexts/chat/messages/list/view.cljs | 31 +++++++++++-------- 4 files changed, 24 insertions(+), 16 deletions(-) diff --git a/src/quo2/components/loaders/skeleton.cljs b/src/quo2/components/loaders/skeleton.cljs index a7cd5d6218..e0a0cb75b5 100644 --- a/src/quo2/components/loaders/skeleton.cljs +++ b/src/quo2/components/loaders/skeleton.cljs @@ -21,7 +21,9 @@ ;; Standlone 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) loading-color (colors/theme-colors colors/neutral-10 colors/neutral-60) content-width (rand-nth message-content-width) diff --git a/src/quo2/core.cljs b/src/quo2/core.cljs index d729a9cb70..7a0aceae50 100644 --- a/src/quo2/core.cljs +++ b/src/quo2/core.cljs @@ -68,7 +68,6 @@ quo2.components.list-items.preview-list.view quo2.components.list-items.token-value.view quo2.components.list-items.user-list - quo2.components.loaders.skeleton quo2.components.loaders.skeleton-list.view quo2.components.markdown.list.view quo2.components.markdown.text @@ -255,7 +254,6 @@ (def token-value quo2.components.list-items.token-value.view/view) ;;;; Loaders -(def skeleton quo2.components.loaders.skeleton/skeleton) (def skeleton-list quo2.components.loaders.skeleton-list.view/view) ;;;; Navigation diff --git a/src/status_im/ui/screens/chat/message/gap.cljs b/src/status_im/ui/screens/chat/message/gap.cljs index 58baf6d453..2e9f935a2d 100644 --- a/src/status_im/ui/screens/chat/message/gap.cljs +++ b/src/status_im/ui/screens/chat/message/gap.cljs @@ -24,7 +24,10 @@ :style {:height (if in-progress? window-height 48)}} [react/view {:style style/label-container} (if in-progress? - [quo2/skeleton window-height] + [quo2/skeleton-list + {:parent-height window-height + :animated true + :content :messages}] [react/nested-text {:style (style/gap-text (and connected? use-status-nodes?))} (i18n/label (if first-gap? :t/load-more-messages :t/fetch-messages)) diff --git a/src/status_im2/contexts/chat/messages/list/view.cljs b/src/status_im2/contexts/chat/messages/list/view.cljs index 5af2be001d..58650477a2 100644 --- a/src/status_im2/contexts/chat/messages/list/view.cljs +++ b/src/status_im2/contexts/chat/messages/list/view.cljs @@ -104,22 +104,28 @@ {:extrapolateLeft "clamp" :extrapolateRight "clamp"}) +(defn skeleton-list-props + [content parent-height animated?] + {:content content + :parent-height parent-height + :animated? animated?}) + (defn loading-view [chat-id] (let [loading-messages? (rf/sub [:chats/loading-messages? chat-id]) all-loaded? (rf/sub [:chats/all-loaded? chat-id]) messages (rf/sub [:chats/raw-chat-messages-stream chat-id]) 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?)) [rn/view {:padding-top top-spacing} - [quo/skeleton - (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)]]))) + [quo/skeleton-list (skeleton-list-props :messages parent-height true)]]))) (defn list-header [insets able-to-send-message?] @@ -353,10 +359,9 @@ [props] (let [chat-screen-loaded? (rf/sub [:shell/chat-screen-loaded?]) 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? [:f> f-messages-list-content props] - [rn/view {:style {:flex 1}} - [quo/skeleton-list - {:content :messages - :parent-height content-height}]]))) + [rn/view {:style {:padding-top top-spacing}} + [quo/skeleton-list (skeleton-list-props :messages content-height false)]])))