Improve user experience when using Turbolinks

Turbolinks are great for simple projects. Even though they have some drawbacks, they make your site load faster and give you the AJAX application feeling for free.

They replace only parts of the page that changed and that means that the request is running in the background. No loading bars, no indication that something is happening. That’s one of their biggest disadvantages because that means that there is no feedback on user action.

But you can improve this experience by adding a great javascript loading bar nprogress. The easiest way to add it to your project would be with the rails gem. Just follow the installation instructions:

update the gemfile

gem 'nprogress-rails'

include javascript files to application.js

//= require nprogress
//= require nprogress-turbolinks

and add css files to application.css.scss

*= require nprogress

and that’s it. Each click will use the awesome progress bar and users will have an instant feedback on their actions – 110% UX amazement.

Would you like to get the most interesting content about programming every Monday?
Sign up to Programming Digest and stay up to date!