From a30a80f8a184e2c3c9133b4c075125c09bc4195b Mon Sep 17 00:00:00 2001
From: Flavio Fraschetti <flavio@status.im>
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)]])))