How to debounce and prevent a double click on a LitElement in Vaadin 23

Flow
1

For Vaadin 23:
The Button component (and I think a few others) have a disable on click capability to prevent double clicks. I however have a clickable LitElement and need the same capability. How can this be achieved please?

2

Simplest solution might be to store the last click time on the server and if that was within the last 500ms; stop execution of the second invocation.

3

You might want to look at how disable on click is implemented in the Button component for inspiration.

There are three essential parts of it:

  1. A client-side listener that sets the button as disabled immediately when clicked if the feature is enabled, and some state management logic for making sure this listener isn’t added multiple times.
  2. A server-side listener that ensures the disabled state is also reflected on the server when an event is received from the client.
  3. Overriding the way the enabled state is applied on the server to bypass the regular dirty checks that would make it impossible to re-enabled the button if the server-side logic believes that the last setting sent to the button was to enable it.