From d1941fe002af375ab3ef7404354e1588592d7039 Mon Sep 17 00:00:00 2001
From: Icaro Motta <icaro.ldm@gmail.com>
Date: Mon, 22 May 2023 20:00:55 -0300
Subject: [PATCH] Animate link previews enter/leave (#15984)

---
 .../chat/composer/link_preview/view.cljs      | 54 ++++++++++++-------
 .../contexts/chat/composer/view.cljs          |  2 +-
 2 files changed, 37 insertions(+), 19 deletions(-)

diff --git a/src/status_im2/contexts/chat/composer/link_preview/view.cljs b/src/status_im2/contexts/chat/composer/link_preview/view.cljs
index e4a2e0b472..e049757530 100644
--- a/src/status_im2/contexts/chat/composer/link_preview/view.cljs
+++ b/src/status_im2/contexts/chat/composer/link_preview/view.cljs
@@ -2,27 +2,45 @@
   (:require
     [quo2.core :as quo]
     [react-native.core :as rn]
+    [react-native.reanimated :as reanimated]
+    [status-im2.contexts.chat.composer.constants :as constants]
     [status-im2.contexts.chat.composer.link-preview.events]
     [status-im2.contexts.chat.composer.link-preview.style :as style]
     [utils.i18n :as i18n]
     [utils.re-frame :as rf]))
 
-(defn message-draft-link-previews
+(defn- use-animated-height
+  [previews?]
+  (let [height (reanimated/use-shared-value (if previews? constants/links-container-height 0))]
+    (rn/use-effect
+     (fn []
+       (reanimated/animate height (if previews? constants/links-container-height 0)))
+     [previews?])
+    height))
+
+(defn f-view
   []
-  (let [previews (rf/sub [:chats/link-previews-unfurled])]
-    [quo/url-preview-list
-     {:key-fn               :url
-      :preview-width        (- (:width (rn/get-window))
-                               (* 2 style/padding-horizontal))
-      :container-style      (when (seq previews) style/preview-list)
-      :container-style-item {:height style/preview-height}
-      :horizontal-spacing   style/padding-horizontal
-      :loading-message      (i18n/label :t/link-preview-loading-message)
-      :on-clear             #(rf/dispatch [:link-preview/clear])
-      :data                 (map (fn [{:keys [title thumbnail hostname loading? url]}]
-                                   {:title     title
-                                    :body      hostname
-                                    :loading?  loading?
-                                    :thumbnail (:data-uri thumbnail)
-                                    :url       url})
-                                 previews)}]))
+  (let [previews (rf/sub [:chats/link-previews-unfurled])
+        height   (use-animated-height (boolean (seq previews)))]
+    [reanimated/view
+     {:style (reanimated/apply-animations-to-style {:height height} {})}
+     [quo/url-preview-list
+      {:key-fn               :url
+       :preview-width        (- (:width (rn/get-window))
+                                (* 2 style/padding-horizontal))
+       :container-style      (when (seq previews) style/preview-list)
+       :container-style-item {:height style/preview-height}
+       :horizontal-spacing   style/padding-horizontal
+       :loading-message      (i18n/label :t/link-preview-loading-message)
+       :on-clear             #(rf/dispatch [:link-preview/clear])
+       :data                 (map (fn [{:keys [title thumbnail hostname loading? url]}]
+                                    {:title     title
+                                     :body      hostname
+                                     :loading?  loading?
+                                     :thumbnail (:data-uri thumbnail)
+                                     :url       url})
+                                  previews)}]]))
+
+(defn view
+  []
+  [:f> f-view])
diff --git a/src/status_im2/contexts/chat/composer/view.cljs b/src/status_im2/contexts/chat/composer/view.cljs
index cbf61a9a67..0c40d4715d 100644
--- a/src/status_im2/contexts/chat/composer/view.cljs
+++ b/src/status_im2/contexts/chat/composer/view.cljs
@@ -110,7 +110,7 @@
            :max-length               constants/max-text-size
            :accessibility-label      :chat-message-input}]]
         [gradients/view props state animations show-bottom-gradient?]]
-       [link-preview/message-draft-link-previews]
+       [link-preview/view]
        [images/images-list]
        [actions/view props state animations window-height insets subs]]]]))