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.

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)

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

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))

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)]])))