DEV Community

Discussion on: Disable-With Using StimulusJS

View post
Collapse
 
thomasvanholder profile image
thomasvanholder • • Edited

Great write-up. This is common use case which I'm running into frequently myself. Recently, I started using an alternative approach with a spinner which avoids touching a stimulus controller to create the intended behaviour.

It requires to create a partial for the spinner SVG including a text variable and swapping f.submit events for f.button. It's fast, minimal overhead and reproducable. The only concern I have is if swapping the submit event for a button has other, unintended consequences. Love to hear your thoughts on this approach.

<svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
<span><%= text %></span>
Enter fullscreen mode Exit fullscreen mode 
 <%= f.button "Confirm", data: { disable_with: render('icons/spinner', text: "Confirming Subscription") } %>
Enter fullscreen mode Exit fullscreen mode
Collapse
 
jacobdaddario profile image
Jacob Daddario •

Very cool! How does this circumvent the use of a Stimulus controller though? I suppose it could just use UJS, but UJS being deprecated is why I wrote this up in the first place.

Collapse
 
thomasvanholder profile image
thomasvanholder •

Oh, okay.. I'm using UJS indeed for this.