From c2fae0fef2f59905541efab1691325ad0cab576b Mon Sep 17 00:00:00 2001
From: Andrey Antukh <niwi@niwi.nz>
Date: Wed, 29 Jan 2025 19:13:01 +0100
Subject: [PATCH] :zap: Add performance enhancements to colorpicker gradients
 component

---
 .../src/app/main/ui/workspace/colorpicker.cljs   |  6 +++---
 .../main/ui/workspace/colorpicker/gradients.cljs | 16 +++++++---------
 2 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/colorpicker.cljs b/frontend/src/app/main/ui/workspace/colorpicker.cljs
index 31eddc274..56731732d 100644
--- a/frontend/src/app/main/ui/workspace/colorpicker.cljs
+++ b/frontend/src/app/main/ui/workspace/colorpicker.cljs
@@ -29,7 +29,7 @@
    [app.main.ui.ds.layout.tab-switcher :refer [tab-switcher*]]
    [app.main.ui.icons :as i]
    [app.main.ui.workspace.colorpicker.color-inputs :refer [color-inputs]]
-   [app.main.ui.workspace.colorpicker.gradients :refer [gradients]]
+   [app.main.ui.workspace.colorpicker.gradients :refer [gradients*]]
    [app.main.ui.workspace.colorpicker.harmony :refer [harmony-selector]]
    [app.main.ui.workspace.colorpicker.hsva :refer [hsva-selector]]
    [app.main.ui.workspace.colorpicker.libraries :refer [libraries]]
@@ -110,7 +110,7 @@
                                      :linear :linear-gradient
                                      :radial :radial-gradient)
                                    :color))
-        active-color-tab       (mf/use-state (dc/get-active-color-tab))
+        active-color-tab       (mf/use-state #(dc/get-active-color-tab))
         drag?                  (mf/use-state false)
 
         type                   (if (= @active-color-tab "hsva") :hsv :rgb)
@@ -436,7 +436,7 @@
          i/picker])]
 
      (when (= selected-mode :gradient)
-       [:& gradients
+       [:> gradients*
         {:type (:type state)
          :stops (:stops state)
          :editing-stop (:editing-stop state)
diff --git a/frontend/src/app/main/ui/workspace/colorpicker/gradients.cljs b/frontend/src/app/main/ui/workspace/colorpicker/gradients.cljs
index b55ed47fa..e3721e4a1 100644
--- a/frontend/src/app/main/ui/workspace/colorpicker/gradients.cljs
+++ b/frontend/src/app/main/ui/workspace/colorpicker/gradients.cljs
@@ -48,11 +48,11 @@
        (str/join ", ")
        (str/ffmt "linear-gradient(90deg, %1)")))
 
-(mf/defc stop-input-row
+(mf/defc stop-input-row*
+  {::mf/private true}
   [{:keys [stop
            index
            is-selected
-
            on-select-stop
            on-change-stop
            on-remove-stop
@@ -61,7 +61,7 @@
            on-blur-stop-offset
            on-focus-stop-color
            on-blur-stop-color]}]
-  (let [{:keys [color opacity offset]} stop
+  (let [offset (get stop :offset)
 
         handle-change-stop-color
         (mf/use-callback
@@ -149,19 +149,17 @@
         :on-focus handle-focus-stop-offset
         :on-blur handle-blur-stop-offset}]]
 
-     ;; FIXME: memoize color
      [:> color-row*
       {:disable-gradient true
        :disable-picker true
-       :color {:color color
-               :opacity opacity}
+       :color stop
        :index index
        :on-change handle-change-stop-color
        :on-remove handle-remove-stop
        :on-focus handle-focus-stop-color
        :on-blur handle-blur-stop-color}]]))
 
-(mf/defc gradients
+(mf/defc gradients*
   [{:keys [type
            stops
            editing-stop
@@ -177,7 +175,7 @@
            on-rotate-stops
            on-reorder-stops]}]
 
-  (let [preview-state  (mf/use-state {:hover? false :offset 0.5})
+  (let [preview-state  (mf/use-state #(do {:hover? false :offset 0.5}))
         dragging-ref   (mf/use-ref false)
         start-ref      (mf/use-ref nil)
         start-offset   (mf/use-ref nil)
@@ -347,7 +345,7 @@
      [:div {:class (stl/css :gradient-stops-list)}
       [:& h/sortable-container {}
        (for [[index stop] (d/enumerate stops)]
-         [:& stop-input-row
+         [:> stop-input-row*
           {:key index
            :stop stop
            :index index