Como personalizar el loader de Ajax

Desde Drupal 8.6 es posible sobreescribir el HTML que crea el loader de Ajax y esto es muy útil para poder personalizar su apariencia, en este artículo te mostraré como hacerlo desde el tema de tu sitio.

Definiendo la librería

El primer paso es definir una nueva librería que llamara el JavaScript necesario, esto lo puedes hacer en el archivo .libraries.yml de tu tema y quedaría de la siguiente manera:

throbber:
  js:
    js/ajax-loader.js: {}
  dependencies:
    - core/drupal

Aquí estamos definiendo una librería llamada throbber en el tema.

Extendiendo la librería drupal.ajax

Para que Drupal cargue tu librería a la vez que carga la del Ajax del core es necesario extenderla y eso lo puedes hacer muy simple en el archivo .info de tu tema agregando las siguientes líneas, recuerda cambiar la palabra tu-tema por el nombre del tuyo.

libraries-extend:
  core/drupal.ajax:
    - tu-tema/throbber

¿Que ponemos en el archivo ajax-loader.js?

Definimos 2 funciones que reemplazan a las funciones del core encargadas de crear el loader, estas son:

• ajaxProgressThrobber - Loader que aparece cuando haces clic en algún botón y suele estar a lado del mismo.

• ajaxProgressIndicatorFullscreen - Loader que suele aparecer centrado en la pantalla y es común en el AJAX de las vistas.

El código JS en el archivo ajax-loader.js quedaría así:

(function (Drupal) {
  Drupal.theme.ajaxProgressThrobber = function () {
    return "<div class=\"loader-wrapper\"><div class=\"loader is-loading\">" + Drupal.t('Loading&nbsp;&hellip;', {}, {
      context: "Loading text for Drupal cores Ajax throbber (inline)"
    }) + "</div></div>";
  };

  Drupal.theme.ajaxProgressIndicatorFullscreen = function () {
    return "<div class=\"loader-wrapper\"><div class=\"loader is-loading\"></div></div>";
  };
})(Drupal);

Como puedes ver en la primera función se usa Drupal.t para hacer traducible el texto que aparece y para la segunda decidí dejarlo sin texto para solo tener los elementos para personalizar por medio de CSS.

Conclusión

Aunque es posible alterar el loader de AJAX solamente por medio de CSS, esta forma de hacerlo nos permite también cambiar el HTML generado y nos da mayor control para poder hacer todo más limpio.