Skip to main content

50 Button Loading Animations with jQuery UJS

Episode 16 · July 21, 2014

Learn how to easily disable the submit button and display a loading animation when a user submits the form

Javascript Frontend


Code

Standard Rails

<%= f.button "Sign In", class: "btn btn-success", data: {disable_with: "<i class='fa fa-spinner fa-spin'></i> Signing in..."} %>

SimpleForm

<%= f.button :button, "Save Post".html_safe, data: {disable_with: "<i class='fa fa-spinner fa-spin'></i> Saving..."} %>

Resources

Transcripts

The combination of rails and FontAwesome CSS library allow us to easily drop in loading animations into all of our form buttons. This is something that I think that almost every developer should be doing, and it's actually super simple, we just need to take some time and put this into our applications by default. If we take a look at the examples on FontAwesome's website, and we scroll down to the spinning icons, this is what I'm talking about, we have this loading animation, that basically says: Hey, the website is processing, let us do our work, and don't start getting ahead of yourself, so if we're processing a credit card, we want the user to wait a second, because we've got to talk to Stripe, we've got to let them check the credit card validation, make sure they can charge the card, and then get back to us, and then we can finally get back to the user and say: Hey, your card was successfully charged. These loading animations are very important for things like this, and we're starting to do more complex stuff in our applications.

Most of the forms that I see are created with the f.submit tag, and when you inspect the form that is generated, you can take a look at the button, and you'll see that it creates an input tag, has my classes, has a type of submit, and then the value is the actual text of the button. When we right click on this, we can say "edit as html", but it's editing the whole button. If we try to put an i tag in here in the value, we can see that it gets escaped by browser, which of course it should, because these input type submit tags are not intended for this, they're not intended to have html inside the content of the button, they're just very simple submit button, and that's basically all they're intended for. If the input type submit isn't going to work for what we want, we can change this to a button tag, and if we inspect this page again, we'll see here that the button actually has this sign-in text inside of the button tag, so the button wraps this text, it means that we can edit as html, and we can put in some html in here, and we'll see that now we have an italic letter "a", so that is working, and it does allow us to have html in it. Now, the only other thing that we have to solve is: When you click on this button, we need it to actually change immediately before the form gets submitted, and then insert that html, and preferably disable the button as well, and UJS to the rescue. jQuery UJS that ships with rails comes with functionality that allows us to do this automatically, and we don't have to write any of the code ourselves. All we have to do is add a data attribute onto this button tag. This works very similarly to when you have a link_to, and you write method: post or method: delete, so this will add the attributes to the link, and jQuery UJS will interpret that. With the thing that we're trying to do here, we want to add a data: {disable_with:""}, and this is going to be the string of the contents of the button that we want. jQuery UJS will look for any attribute that has data: {disable_with:""} and then it will take the appropriate action when the form gets submitted. Here we can say that we want that icon class is

data: {disable_with: "<i class='fa fa-spinner fa-spin'></i> Signing in..."}

jQuery UJS needs to be in your application.js file, but it should be there by default, so you'll have jQuery and jQuery UJS, and you shouldn't have to worry about that. As long as those are in there and being loaded on the page, when you add this data: {disable_with:""} attribute, you'll be able to just drop that in, reload your page, and then now when you click "Sign In", it will disable the button, show the loading animation, and change the text all in one swoop, and you didn't have to write any JavaScript to take care of that, the only changes we did were add this data attribute, and change f.submit to f.button, and we're done, which is really really cool. I highly encourage you to take this and add it to pretty much every single form in your application. If a button just links to another page, you don't really need to say that you're loading another page, but when you're submitting a form, I highly encourage you to make this change, because it really makes the UX feel more intuitive. I definitely encourage you to search for all the submit tags in your application and add this attribute on to them, and if you have any other quick wins like this to improve the UX, definitely let me know, write me an email: [email protected], and I will see you next episode.

Discussion