загрузка анимации, пока данные не загружены в Typescript (ionic)

Question

Я бы хотел добавить анимацию на экран, пока проекты не загрузятся.

constructor(
        public platform: Platform,
        private network: NetworkService,
        public navContrl: NavController,
        public modalCtrl: ModalController
    ) {
        this.loadProjects();

        this.admin = this.network.isUserAdmin();
    }

loadProjects() {
        this.network.getAllProjects()
            .then(projects => this.projs = projects)
            .catch(err => this.logout());
    }

Моей первой мыслью было реализовать settimeout, который является худшим решением.Есть ли хороший способ решить эту проблему?

Answer 1

Аналогичная альтернатива, использующая async и await.

async loadProjects() {
    // start loader:
    let loading = this.loadingCtrl.create({
        content: 'Please wait...'
    });

    try {
        await loading.present();
        this.projs = await this.network.getAllProjects();
    }
    catch (error) {
        //TODO: Log the error, show a friendly message
        this.logout();
    }
    finally {
        loading && loading.dismiss();
    }
}

Answer 2

вам нужно импортировать загрузчик и использовать его соответственно вашему асинхронному коду:

import { LoadingController, ModalController, Platform } from "ionic-angular";
// add your further imports here...

constructor(
        public platform: Platform,
        private network: NetworkService,
        public navContrl: NavController,
        public modalCtrl: ModalController,
        // inject it:
        public loadingCtrl: LoadingController
    ) {
        this.loadProjects();
        this.admin = this.network.isUserAdmin();
    }

loadProjects() {
        // start loader:
        let loading = this.loadingCtrl.create({
            content: 'Please wait...'
        });
        loading.present();
        this.network.getAllProjects()
            .then((projects) => {
                this.projs = projects;
                loading.dismiss();
             })
            .catch(err => this.logout());
    }

Не уверен, что вы разместили полный пример кода в вашем случае.Надеюсь, это поможет.Смотрите использование здесь: https://ionicframework.com/docs/api/components/loading/LoadingController/