From 59db6f1bfada0f4ccd5f90ed7cd27f736856d9f0 Mon Sep 17 00:00:00 2001
From: Mikael Grankvist <mikael.grankvist@vaadin.com>
Date: Mon, 27 Mar 2023 15:03:34 +0300
Subject: [PATCH 1/7] fix: Lazy init of disable on click

Only init disable on click
if actually enabled for button.
Move function to buttonFunctions.js
so each button only needs to call the function.

Moving function makes 5000 buttons request
0.5 MB smaller and lazy init to only calll
method for disbleOnClick buttons drops 1MB
from the request.
---
 .../vaadin/flow/component/button/Button.java  | 20 ++++++++++++++-----
 .../resources/frontend/buttonFunctions.js     | 10 ++++++++++
 2 files changed, 25 insertions(+), 5 deletions(-)
 create mode 100644 vaadin-button-flow-parent/vaadin-button-flow/src/main/resources/META-INF/resources/frontend/buttonFunctions.js

diff --git a/vaadin-button-flow-parent/vaadin-button-flow/src/main/java/com/vaadin/flow/component/button/Button.java b/vaadin-button-flow-parent/vaadin-button-flow/src/main/java/com/vaadin/flow/component/button/Button.java
index 9dbfee9d053..d7c463103fa 100644
--- a/vaadin-button-flow-parent/vaadin-button-flow/src/main/java/com/vaadin/flow/component/button/Button.java
+++ b/vaadin-button-flow-parent/vaadin-button-flow/src/main/java/com/vaadin/flow/component/button/Button.java
@@ -57,6 +57,7 @@
 @JsModule("@vaadin/polymer-legacy-adapter/style-modules.js")
 @NpmPackage(value = "@vaadin/button", version = "24.1.0-alpha5")
 @JsModule("@vaadin/button/src/vaadin-button.js")
+@JsModule("./buttonFunctions.js")
 public class Button extends Component
         implements ClickNotifier<Button>, Focusable<Button>, HasAriaLabel,
         HasEnabled, HasPrefix, HasSize, HasStyle, HasSuffix, HasText,
@@ -65,6 +66,7 @@ public class Button extends Component
     private Component iconComponent;
     private boolean iconAfterText;
     private boolean disableOnClick = false;
+    private boolean disableInited = false;
 
     // Register immediately as first listener
     private Registration disableListener = addClickListener(
@@ -340,6 +342,7 @@ public void setDisableOnClick(boolean disableOnClick) {
         this.disableOnClick = disableOnClick;
         if (disableOnClick) {
             getElement().setAttribute("disableOnClick", "true");
+            initDisableOnClick();
         } else {
             getElement().removeAttribute("disableOnClick");
         }
@@ -359,10 +362,15 @@ public boolean isDisableOnClick() {
      * if server-side handling takes some time.
      */
     private void initDisableOnClick() {
-        getElement().executeJs("var disableEvent = function () {"
-                + "if($0.getAttribute('disableOnClick')){"
-                + " $0.setAttribute('disabled', 'true');" + "}" + "};"
-                + "$0.addEventListener('click', disableEvent)");
+        if(!disableInited) {
+            getElement().executeJs(
+                    "window.Vaadin.Flow.button.initDisableOnClick($0)");
+            disableInited = true;
+        }
+//        var disableEvent = function () {"
+//                + "if($0.getAttribute('disableOnClick')){"
+//                + " $0.setAttribute('disabled', 'true');" + "}" + "};"
+//                + "$0.addEventListener('click', disableEvent)");
     }
 
     private void updateIconSlot() {
@@ -462,7 +470,9 @@ private void doDisableOnClick() {
 
     @Override
     protected void onAttach(AttachEvent attachEvent) {
-        initDisableOnClick();
+        if (isDisableOnClick()) {
+            initDisableOnClick();
+        }
     }
 
 }
diff --git a/vaadin-button-flow-parent/vaadin-button-flow/src/main/resources/META-INF/resources/frontend/buttonFunctions.js b/vaadin-button-flow-parent/vaadin-button-flow/src/main/resources/META-INF/resources/frontend/buttonFunctions.js
new file mode 100644
index 00000000000..e8e3364ec90
--- /dev/null
+++ b/vaadin-button-flow-parent/vaadin-button-flow/src/main/resources/META-INF/resources/frontend/buttonFunctions.js
@@ -0,0 +1,10 @@
+window.Vaadin.Flow.button = {
+  initDisableOnClick: (target) => {
+    const disableEvent = function (target) {
+      if (target.getAttribute('disableOnClick')) {
+        target.setAttribute('disabled', 'true');
+      }
+    };
+    target.addEventListener('click', disableEvent)
+  }
+}

From 317626a0cdc3294467570f5053f52f391db9b6fa Mon Sep 17 00:00:00 2001
From: Mikael Grankvist <mikael.grankvist@vaadin.com>
Date: Mon, 27 Mar 2023 15:42:24 +0300
Subject: [PATCH 2/7] format

---
 .../main/java/com/vaadin/flow/component/button/Button.java  | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/vaadin-button-flow-parent/vaadin-button-flow/src/main/java/com/vaadin/flow/component/button/Button.java b/vaadin-button-flow-parent/vaadin-button-flow/src/main/java/com/vaadin/flow/component/button/Button.java
index d7c463103fa..a7035a79a36 100644
--- a/vaadin-button-flow-parent/vaadin-button-flow/src/main/java/com/vaadin/flow/component/button/Button.java
+++ b/vaadin-button-flow-parent/vaadin-button-flow/src/main/java/com/vaadin/flow/component/button/Button.java
@@ -362,15 +362,11 @@ public boolean isDisableOnClick() {
      * if server-side handling takes some time.
      */
     private void initDisableOnClick() {
-        if(!disableInited) {
+        if (!disableInited) {
             getElement().executeJs(
                     "window.Vaadin.Flow.button.initDisableOnClick($0)");
             disableInited = true;
         }
-//        var disableEvent = function () {"
-//                + "if($0.getAttribute('disableOnClick')){"
-//                + " $0.setAttribute('disabled', 'true');" + "}" + "};"
-//                + "$0.addEventListener('click', disableEvent)");
     }
 
     private void updateIconSlot() {

From 35a932b37d35bd565444d513df1c88de126180ff Mon Sep 17 00:00:00 2001
From: Mikael Grankvist <mikael.grankvist@vaadin.com>
Date: Mon, 27 Mar 2023 15:47:44 +0300
Subject: [PATCH 3/7] check event listener on client.

clean up code.
---
 .../com/vaadin/flow/component/button/Button.java | 10 +++-------
 .../resources/frontend/buttonFunctions.js        | 16 +++++++++-------
 2 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/vaadin-button-flow-parent/vaadin-button-flow/src/main/java/com/vaadin/flow/component/button/Button.java b/vaadin-button-flow-parent/vaadin-button-flow/src/main/java/com/vaadin/flow/component/button/Button.java
index a7035a79a36..8c0a9064813 100644
--- a/vaadin-button-flow-parent/vaadin-button-flow/src/main/java/com/vaadin/flow/component/button/Button.java
+++ b/vaadin-button-flow-parent/vaadin-button-flow/src/main/java/com/vaadin/flow/component/button/Button.java
@@ -20,6 +20,7 @@
 import com.vaadin.flow.component.ClickNotifier;
 import com.vaadin.flow.component.Component;
 import com.vaadin.flow.component.ComponentEventListener;
+import com.vaadin.flow.component.DetachEvent;
 import com.vaadin.flow.component.Focusable;
 import com.vaadin.flow.component.HasAriaLabel;
 import com.vaadin.flow.component.HasEnabled;
@@ -66,7 +67,6 @@ public class Button extends Component
     private Component iconComponent;
     private boolean iconAfterText;
     private boolean disableOnClick = false;
-    private boolean disableInited = false;
 
     // Register immediately as first listener
     private Registration disableListener = addClickListener(
@@ -362,11 +362,8 @@ public boolean isDisableOnClick() {
      * if server-side handling takes some time.
      */
     private void initDisableOnClick() {
-        if (!disableInited) {
-            getElement().executeJs(
-                    "window.Vaadin.Flow.button.initDisableOnClick($0)");
-            disableInited = true;
-        }
+        getElement().executeJs(
+                "window.Vaadin.Flow.button.initDisableOnClick($0)");
     }
 
     private void updateIconSlot() {
@@ -470,5 +467,4 @@ protected void onAttach(AttachEvent attachEvent) {
             initDisableOnClick();
         }
     }
-
 }
diff --git a/vaadin-button-flow-parent/vaadin-button-flow/src/main/resources/META-INF/resources/frontend/buttonFunctions.js b/vaadin-button-flow-parent/vaadin-button-flow/src/main/resources/META-INF/resources/frontend/buttonFunctions.js
index e8e3364ec90..bff4d48856d 100644
--- a/vaadin-button-flow-parent/vaadin-button-flow/src/main/resources/META-INF/resources/frontend/buttonFunctions.js
+++ b/vaadin-button-flow-parent/vaadin-button-flow/src/main/resources/META-INF/resources/frontend/buttonFunctions.js
@@ -1,10 +1,12 @@
 window.Vaadin.Flow.button = {
-  initDisableOnClick: (target) => {
-    const disableEvent = function (target) {
-      if (target.getAttribute('disableOnClick')) {
-        target.setAttribute('disabled', 'true');
-      }
-    };
-    target.addEventListener('click', disableEvent)
+  initDisableOnClick: (button) => {
+    if (!button.__hasDisableOnClickListener) {
+      button.addEventListener('click', disableOnClickListener(button));
+      button.__hasDisableOnClickListener = true;
+    }
   }
 }
+
+function disableOnClickListener({currentTarget: button}) {
+  button.disabled = button.hasAttribute('disableOnClick');
+}

From caa53521f8dbed7eea2148b80c22e6ce4f397a36 Mon Sep 17 00:00:00 2001
From: Mikael Grankvist <mikael.grankvist@vaadin.com>
Date: Tue, 28 Mar 2023 09:24:58 +0300
Subject: [PATCH 4/7] clean imports

---
 .../src/main/java/com/vaadin/flow/component/button/Button.java   | 1 -
 1 file changed, 1 deletion(-)

diff --git a/vaadin-button-flow-parent/vaadin-button-flow/src/main/java/com/vaadin/flow/component/button/Button.java b/vaadin-button-flow-parent/vaadin-button-flow/src/main/java/com/vaadin/flow/component/button/Button.java
index 8c0a9064813..31d5061579d 100644
--- a/vaadin-button-flow-parent/vaadin-button-flow/src/main/java/com/vaadin/flow/component/button/Button.java
+++ b/vaadin-button-flow-parent/vaadin-button-flow/src/main/java/com/vaadin/flow/component/button/Button.java
@@ -20,7 +20,6 @@
 import com.vaadin.flow.component.ClickNotifier;
 import com.vaadin.flow.component.Component;
 import com.vaadin.flow.component.ComponentEventListener;
-import com.vaadin.flow.component.DetachEvent;
 import com.vaadin.flow.component.Focusable;
 import com.vaadin.flow.component.HasAriaLabel;
 import com.vaadin.flow.component.HasEnabled;

From f744812fce8c84c9466a3bd874652189b4766daa Mon Sep 17 00:00:00 2001
From: Mikael Grankvist <mikael.grankvist@vaadin.com>
Date: Tue, 28 Mar 2023 09:26:34 +0300
Subject: [PATCH 5/7] run formatter

---
 .../main/java/com/vaadin/flow/component/button/Button.java    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/vaadin-button-flow-parent/vaadin-button-flow/src/main/java/com/vaadin/flow/component/button/Button.java b/vaadin-button-flow-parent/vaadin-button-flow/src/main/java/com/vaadin/flow/component/button/Button.java
index 31d5061579d..514a0b63c2c 100644
--- a/vaadin-button-flow-parent/vaadin-button-flow/src/main/java/com/vaadin/flow/component/button/Button.java
+++ b/vaadin-button-flow-parent/vaadin-button-flow/src/main/java/com/vaadin/flow/component/button/Button.java
@@ -361,8 +361,8 @@ public boolean isDisableOnClick() {
      * if server-side handling takes some time.
      */
     private void initDisableOnClick() {
-        getElement().executeJs(
-                "window.Vaadin.Flow.button.initDisableOnClick($0)");
+        getElement()
+                .executeJs("window.Vaadin.Flow.button.initDisableOnClick($0)");
     }
 
     private void updateIconSlot() {

From 87763d7fb2b1fb66b6a594564bee29f95490b852 Mon Sep 17 00:00:00 2001
From: Mikael Grankvist <mikael.grankvist@vaadin.com>
Date: Tue, 28 Mar 2023 10:46:12 +0300
Subject: [PATCH 6/7] Fix js

---
 .../META-INF/resources/frontend/buttonFunctions.js     | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/vaadin-button-flow-parent/vaadin-button-flow/src/main/resources/META-INF/resources/frontend/buttonFunctions.js b/vaadin-button-flow-parent/vaadin-button-flow/src/main/resources/META-INF/resources/frontend/buttonFunctions.js
index bff4d48856d..b0df11a9a37 100644
--- a/vaadin-button-flow-parent/vaadin-button-flow/src/main/resources/META-INF/resources/frontend/buttonFunctions.js
+++ b/vaadin-button-flow-parent/vaadin-button-flow/src/main/resources/META-INF/resources/frontend/buttonFunctions.js
@@ -1,12 +1,12 @@
+function disableOnClickListener({currentTarget: button}) {
+  button.disabled = button.hasAttribute('disableOnClick');
+}
+
 window.Vaadin.Flow.button = {
   initDisableOnClick: (button) => {
     if (!button.__hasDisableOnClickListener) {
-      button.addEventListener('click', disableOnClickListener(button));
+      button.addEventListener('click', disableOnClickListener);
       button.__hasDisableOnClickListener = true;
     }
   }
 }
-
-function disableOnClickListener({currentTarget: button}) {
-  button.disabled = button.hasAttribute('disableOnClick');
-}

From 1c0b4122230a84ae2417b7f790514efde9167ef6 Mon Sep 17 00:00:00 2001
From: Mikael Grankvist <mikael.grankvist@vaadin.com>
Date: Tue, 28 Mar 2023 12:07:06 +0300
Subject: [PATCH 7/7] Only queue one executeJs for a serverside roundtrip

Only one executeJs should be queued for
multiple calls to initDisableOnClick for
one server roundtrip
---
 .../vaadin-button-flow/pom.xml                |  5 ++++
 .../vaadin/flow/component/button/Button.java  | 11 ++++++--
 .../component/button/tests/ButtonTest.java    | 25 +++++++++++++++++++
 3 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/vaadin-button-flow-parent/vaadin-button-flow/pom.xml b/vaadin-button-flow-parent/vaadin-button-flow/pom.xml
index 0d4fa5e6ba0..5b55b93b8b1 100644
--- a/vaadin-button-flow-parent/vaadin-button-flow/pom.xml
+++ b/vaadin-button-flow-parent/vaadin-button-flow/pom.xml
@@ -56,6 +56,11 @@
             <artifactId>jakarta.jakartaee-web-api</artifactId>
             <scope>test</scope>
         </dependency>
+        <dependency>
+            <groupId>org.mockito</groupId>
+            <artifactId>mockito-core</artifactId>
+            <scope>test</scope>
+        </dependency>
     </dependencies>
     <build>
         <plugins>
diff --git a/vaadin-button-flow-parent/vaadin-button-flow/src/main/java/com/vaadin/flow/component/button/Button.java b/vaadin-button-flow-parent/vaadin-button-flow/src/main/java/com/vaadin/flow/component/button/Button.java
index 514a0b63c2c..1a2c9d8ae4c 100644
--- a/vaadin-button-flow-parent/vaadin-button-flow/src/main/java/com/vaadin/flow/component/button/Button.java
+++ b/vaadin-button-flow-parent/vaadin-button-flow/src/main/java/com/vaadin/flow/component/button/Button.java
@@ -30,6 +30,7 @@
 import com.vaadin.flow.component.dependency.JsModule;
 import com.vaadin.flow.component.dependency.NpmPackage;
 import com.vaadin.flow.component.html.Image;
+import com.vaadin.flow.component.page.PendingJavaScriptResult;
 import com.vaadin.flow.component.shared.HasPrefix;
 import com.vaadin.flow.component.shared.HasSuffix;
 import com.vaadin.flow.component.shared.HasThemeVariant;
@@ -66,6 +67,7 @@ public class Button extends Component
     private Component iconComponent;
     private boolean iconAfterText;
     private boolean disableOnClick = false;
+    private PendingJavaScriptResult initDisableOnClick;
 
     // Register immediately as first listener
     private Registration disableListener = addClickListener(
@@ -361,8 +363,13 @@ public boolean isDisableOnClick() {
      * if server-side handling takes some time.
      */
     private void initDisableOnClick() {
-        getElement()
-                .executeJs("window.Vaadin.Flow.button.initDisableOnClick($0)");
+        if (initDisableOnClick == null) {
+            initDisableOnClick = getElement().executeJs(
+                    "window.Vaadin.Flow.button.initDisableOnClick($0)");
+            getElement().getNode()
+                    .runWhenAttached(ui -> ui.beforeClientResponse(this,
+                            executionContext -> this.initDisableOnClick = null));
+        }
     }
 
     private void updateIconSlot() {
diff --git a/vaadin-button-flow-parent/vaadin-button-flow/src/test/java/com/vaadin/flow/component/button/tests/ButtonTest.java b/vaadin-button-flow-parent/vaadin-button-flow/src/test/java/com/vaadin/flow/component/button/tests/ButtonTest.java
index 4458c55b65b..8c4eaf2d3e6 100644
--- a/vaadin-button-flow-parent/vaadin-button-flow/src/test/java/com/vaadin/flow/component/button/tests/ButtonTest.java
+++ b/vaadin-button-flow-parent/vaadin-button-flow/src/test/java/com/vaadin/flow/component/button/tests/ButtonTest.java
@@ -17,18 +17,21 @@
 
 import java.io.Serializable;
 import java.util.HashMap;
+import java.util.Optional;
 import java.util.Set;
 import java.util.concurrent.atomic.AtomicBoolean;
 
 import com.vaadin.flow.component.HasAriaLabel;
 import org.junit.Assert;
 import org.junit.Test;
+import org.mockito.Mockito;
 
 import com.vaadin.flow.component.Text;
 import com.vaadin.flow.component.button.Button;
 import com.vaadin.flow.component.button.ButtonVariant;
 import com.vaadin.flow.component.icon.Icon;
 import com.vaadin.flow.component.icon.VaadinIcon;
+import com.vaadin.flow.component.internal.PendingJavaScriptInvocation;
 import com.vaadin.flow.component.shared.HasTooltip;
 import com.vaadin.flow.dom.Element;
 import com.vaadin.flow.internal.StateNode;
@@ -344,6 +347,28 @@ public void setAriaLabel() {
         Assert.assertEquals("Aria label", button.getAriaLabel().get());
     }
 
+    @Test
+    public void initDisableOnClick_onlyCalledOnceForSeverRoundtrip() {
+        final Element element = Mockito.mock(Element.class);
+        StateNode node = new StateNode();
+        button = Mockito.spy(Button.class);
+
+        Mockito.when(button.getElement()).thenReturn(element);
+
+        Mockito.when(element.executeJs(Mockito.anyString()))
+                .thenReturn(Mockito.mock(PendingJavaScriptInvocation.class));
+        Mockito.when(element.getComponent()).thenReturn(Optional.of(button));
+        Mockito.when(element.getParent()).thenReturn(null);
+        Mockito.when(element.getNode()).thenReturn(node);
+
+        button.setDisableOnClick(true);
+        button.setDisableOnClick(false);
+        button.setDisableOnClick(true);
+
+        Mockito.verify(element, Mockito.times(1))
+                .executeJs("window.Vaadin.Flow.button.initDisableOnClick($0)");
+    }
+
     private void assertButtonHasThemeAttribute(String theme) {
         Assert.assertTrue("Expected " + theme + " to be in the theme attribute",
                 button.getThemeNames().contains(theme));