Mejora el UX animando el botón al enviar un formulario en Rails

Algo muy importante en la experiencia de usuario es dar retroalimentación inmediata luego de una acción, en este caso me gusta mostrar inmediatamente un spinner en el mismo botón al que se hizo click al enviar un formulario en Rails.

Para aplicar la animación, utilizo Font Awesome y en específico el ícono spinner

En el código de la vista -en este caso ERB- podemos agregar al generador del botón:

<%= f.button "Registrarse", class: "btn btn-primary", data: {disable_with: "<i class='fa fa-spinner fa-spin'></i> Registrando…z"} %>

Con esto al dar click Rails reemplaza el contenido del botón y lo sustituye por lo que le enviamos con la opción disable_with la clase fa-spin de Font Awesome hace que el ícono gire.

Los pequeños detalles importan y esta pequeña, pero muy útil opción que brinda Rails a través de su librería UJS Unobtrusive scripting adapter for jQuery mejora mucho la experiencia de usuario.

Esto es parte de las opciones que se pueden pasar al buttong_tag https://api.rubyonrails.org/v5.1/classes/ActionView/Helpers/FormTagHelper.html#method-i-button_tag

Hasta la próxima…

Publicado originalmente en: http://blog.neydroid.com/mejora-el-ux-agregando-animacion-al-enviar-un-formulario-en-rails/