From 08b17a1dfddb2ebe7eceb95cdaa5281201f56c8b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marco=20S=C3=BC=C3=9F?= <msuess@mailbox.org>
Date: Wed, 12 Jan 2022 18:55:02 +0100
Subject: [PATCH] display loading indicator for pack badges and banners

---
 src/status_im/ui/screens/stickers/views.cljs | 44 ++++++++++----------
 1 file changed, 23 insertions(+), 21 deletions(-)

diff --git a/src/status_im/ui/screens/stickers/views.cljs b/src/status_im/ui/screens/stickers/views.cljs
index b948563b30..6b7a8c2fd4 100644
--- a/src/status_im/ui/screens/stickers/views.cljs
+++ b/src/status_im/ui/screens/stickers/views.cljs
@@ -10,9 +10,27 @@
             [reagent.core :as reagent])
   (:require-macros [status-im.utils.views :refer [defview letsubs]]))
 
+(defn- image-with-loader [props]
+  (let [loaded? (reagent/atom nil)
+        {:keys [source style]} props]
+    (fn []
+      [react/view
+       (when (or (nil? @loaded?) @loaded?)
+         [react/fast-image {:onLoad #(reset! loaded? true)
+                            :style (if @loaded?
+                                     style
+                                     {})
+                            :source source}])
+       (when-not @loaded?
+         [react/view {:style (merge style
+                                    {:align-items :center
+                                     :justify-content :center
+                                     :background-color colors/gray-lighter})}
+          [react/activity-indicator {:animating true}]])])))
+
 (defn- thumbnail-icon [uri size]
-  [react/fast-image {:style  {:width size :height size :border-radius (/ size 2)}
-                     :source {:uri uri}}])
+  [image-with-loader {:style  {:width size :height size :border-radius (/ size 2)}
+                      :source {:uri uri}}])
 
 (defn- installed-icon []
   [react/view styles/installed-icon
@@ -44,7 +62,7 @@
 (defn pack-badge [{:keys [name author price thumbnail preview id installed owned pending]}]
   [react/touchable-highlight {:on-press #(re-frame/dispatch [:navigate-to :stickers-pack {:id id}])}
    [react/view {:margin-bottom 27}
-    [react/fast-image {:style {:height 200 :border-radius 20} :source {:uri (contenthash/url preview)}}]
+    [image-with-loader {:style {:height 200 :border-radius 20} :source {:uri (contenthash/url preview)}}]
     [react/view {:height 64 :align-items :center :flex-direction :row}
      [thumbnail-icon (contenthash/url thumbnail) 40]
      [react/view {:padding-horizontal 16 :flex 1}
@@ -70,23 +88,6 @@
 
 (def sticker-icon-size 60)
 
-(defn- sticker-image [hash]
-  (let [loaded? (reagent/atom nil)]
-    (fn []
-      [react/view
-       (when (or (nil? @loaded?) @loaded?)
-         [react/fast-image {:onLoad #(reset! loaded? true)
-                            :style (if @loaded?
-                                     (styles/sticker-image sticker-icon-size)
-                                     {})
-                            :source {:uri (contenthash/url hash)}}])
-       (when-not @loaded?
-         [react/view {:style (merge (styles/sticker-image sticker-icon-size)
-                                    {:align-items :center
-                                     :justify-content :center
-                                     :background-color colors/gray-lighter})}
-          [react/activity-indicator {:animating true}]])])))
-
 (defview pack-main []
   (letsubs [{:keys [id name author price thumbnail
                     stickers installed owned pending]
@@ -108,7 +109,8 @@
           [react/view {:flex-direction :row :flex-wrap :wrap :justify-content :space-between}
            (for [{:keys [hash]} stickers]
              ^{:key hash}
-             [sticker-image hash])]]]]
+             [image-with-loader {:style (styles/sticker-image sticker-icon-size)
+                                 :source {:uri (contenthash/url hash)}}])]]]]
        [react/view {:flex 1 :align-items :center :justify-content :center}
         [react/activity-indicator {:animating true}]])]))