Pour un indicateur de chargement SPA plus visible

// The english version of this article can be found here: For a more conspicuous SPA loader.

Depuis la version 7.0 de Liferay, vous avez surement remarqué l’apparition d’une fine barre de chargement en haut de l’écran en réponse à la plupart des actions utilisateur.

Cette barre de chargement intervient dans le cadre du nouveau fonctionnement SPA (Single Page Application) de Liferay, assuré par le framework Senna.js.

Malheureusement, cette barre est tellement discrète que la plupart des utilisateurs ne la voient pas. En général, ne constatant pas de retour visuel à leur action, ils réitèrent leur action plusieurs fois, ce qui souvent allonge encore le temps d’attente.

Au final les utilisateurs sont souvent inutilement frustrés juste parce-que cet indicateur de chargement n’est pas assez visible.

Heureusement, il est assez simple de remédier à cela avec quelques lignes de CSS dans un thème personnalisé, car cette barre de chargement est juste une unique balise HTML sur laquelle est appliquée dynamiquement une classe CSS.

<div class="lfr-spa-loading-bar"></div>

Comme point de départ, on pourra considérer les superbes loaders proposé par Luke Haas dans son projet Single Element CSS Spinners. Il suffit alors faire quelques adaptations pour obtenir un loader CSS compatible avec Liferay :

/* Reset properties used by the original loader */

.lfr-spa-loading .lfr-spa-loading-bar, .lfr-spa-loading-bar {
    -moz-animation: none 0 ease 0 1 normal none running;
    -webkit-animation: none 0 ease 0 1 normal none running;
    -o-animation: none 0 ease 0 1 normal none running;
    -ms-animation: none 0 ease 0 1 normal none running;
    animation: none 0 ease 0 1 normal none running;
    display: block;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
    background: transparent;
    right: initial;
    bottom: initial;
}

/* Pure CSS loader from https://projects.lukehaas.me/css-loaders */

.lfr-spa-loading .lfr-spa-loading-bar,
.lfr-spa-loading .lfr-spa-loading-bar:after  {
  border-radius: 50%;
  width: 10em;
  height: 10em;
    z-index: 1999999;
    
}
.lfr-spa-loading .lfr-spa-loading-bar  {
  margin: 60px auto;
  font-size: 10px;
  text-indent: -9999em;
  border-top: 1.1em solid rgba(47, 164, 245, 0.2);
  border-right: 1.1em solid rgba(47, 164, 245, 0.2);
  border-bottom: 1.1em solid rgba(47, 164, 245, 0.2);
  border-left: 1.1em solid #2FA4F5;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}
@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* Positionning */

.lfr-spa-loading .lfr-spa-loading-bar {
  position: fixed;
  top: 50%; 
  left: 50%;
  margin-top: -5em;
  margin-left: -5em;
}

Une fois le thème personnalisé appliqué on obtient un loader bien visible, qu’aucun utilisateur ne pourra plus manquer :

Ce snippet est compatible avec les versions 7.0 et 7.1 de Liferay et est également disponible sur gist.

Si vous aussi vous avez des astuces pour améliorer l’UX d’un portail Liferay, n’hésitez pas à les partager dans les commentaires de ce billet ou dans un billet dédié.

Sébastien Le Marchand
Consultant Technique indépendant à Paris