Ionic - 8.18 Afficher un contrôleur de chargement plein écran

Le contrôleur de chargement se distingue du spinner : il recouvre toute la page, comme un overlay. Pendant ce temps, l'utilisateur ne peut pas cliquer sur la page. Cette leçon montre comment le créer, l'afficher, simuler une connexion, puis le faire disparaître.

Injecter et créer le contrôleur

Dans la page, le contrôleur de chargement est injecté dans le constructeur, sous le type LoadingController. Il faut vérifier que ce type est bien importé depuis Ionic.

Dans la méthode appelée au clic, la vidéo utilise la méthode create du contrôleur. Elle accepte des options, comme la fermeture du clavier sur mobile ou l'affichage d'un message.

constructor(private loadingCtrl: LoadingController) {}

Afficher puis masquer l'overlay

La méthode create renvoie une promesse. Dans son then, l'élément reçu est affiché avec present. Un setTimeout simule la connexion, puis dismiss retire l'overlay au bout de 1,5 seconde.

Pendant l'affichage, on ne peut pas cliquer sur la page. Une fois l'overlay retiré, l'interface redevient disponible.

this.loadingCtrl.create().then(loadingEl => {
  loadingEl.present();
  setTimeout(() => {
    loadingEl.dismiss();
  }, 1500);
});

En résumé

Le contrôleur de chargement affiche un overlay qui recouvre la page. Il se crée avec create, s'affiche avec present et se ferme avec dismiss. Dans la démonstration, la fermeture intervient après 1,5 seconde. La prochaine étape de la vidéo traite le contrôleur d'action.

Points clés

• Le contrôleur de chargement recouvre toute la page.
• LoadingController.create prépare l'overlay.
• present affiche l'overlay.
• dismiss le retire.
• Pendant l'affichage, la page ne peut pas être utilisée.

Questions fréquentes

Quelle différence avec un spinner ?

Le spinner est une petite animation dans la page. Le contrôleur de chargement prend toute la page, comme un overlay.

Pourquoi utiliser un setTimeout ?

Dans la vidéo, il simule la durée d'une connexion. Dans une application réelle, l'overlay se fermerait après la réponse du serveur.

Peut-on personnaliser la création du contrôleur ?

Oui. La méthode create accepte des options, comme un message, selon la vidéo.