Bonjour les amis,

Il y'a un truc qui me taraude un peu dans Vue JS. Dans le cycle de l'application, on a les méthodes created ou mounted qu'on peut utiliser pour afficher les données au chargement de la page. Cependant, selon l'API utilisé pour la récupération des données, il arrive que cela prenne un peu de temps souvent. Alors on se retrouve avec un message du genre "Aucune donnée" au chargement et quelques millisecondes après les données apparaissent.

Comment éviter ce "problème" qui gâche un peu l'expérience utilisateur. J'ai pensé à un loader mais, dans ce cas comment lui dire de disparaître quand les données ont fini de charger et d'afficher ces données.

Merci d'avance...

-
Edité par SaintCyr 8 août 2018 à 14:33:26

Bonjour,

Majuscules abusives

L'écriture en majuscules est considérée comme une parole criée et diminue autant la lisibilité du texte que sa compréhension. Les majuscules abusives sont donc interdites aussi bien dans les titres que dans les messages.

Bonjour,

Il y a plusieurs solutions et la plus simple (pas forcément la meilleure) selon moi ressemble à ça :

<template>
  <loader v-if="loading"/>
  <div v-else>Le contenu de ta page</div>
</template>

Ensuite il suffit de modifier la variable loading en fonction de l'état de tes requêtes AJAX.

Qu'utilises-tu pour faire tes requêtes ?

Avec des promesses par exemple :

created() {
  // Montre le loader
  this.loading = true;

  API.getData()
    .then((data) => {
      // Utilise les données
      this.data = data;
    })
    .catch((err) => {
      // Gère l'erreur
      this.error = err;
    })
    .finally(() => {
      // Cache le loader			
      this.loading = false;
    });
}

Bonjour,

Si tu veux pouvoir faire une sorte d'animation douce et afficher un loader le temps de récupérer des données depuis une API, tu peux combiner une transition Vue avec la directive v-if pour créer une UX optimale, ne pas brusquer l'utilisateur et ne lui afficher les éléments que lorsque l'API nous a servi des données. Une fois ces éléments maîtrisés, ce n'est qu'une histoire de style, d'animation et de savoir quelle expérience utilisateur tu souhaites réstituer.

Démo JSFiddle beaucoup plus parlante.

Tu peux t'inspirer, reprendre le code, le modifier à ta guise si tu ne sais pas par où commencer. Et ce n'est qu'un exemple de comment faire sous Vue, mais il y a sûrement 1M d'approche différente à ce problème.

Merci bien à tous pour vos réponses. C’est vraiment super. Finalement j’ai opté pour l’afficha d’un loader le temps de récupérer les données. 

Ps: TryAbdShare, j’utilise Axios