Problem adding loading icon with TypeScript

Question

Hi team i have a problem when im trying to add a loading icon and the problem is this. Wen i loading the webservice the icon is showed but inmediatly desapear and the webservice it takes about 6 second do show all data.... here is my code.

public loadData(): void {
        dataModel = new TimelineStructure();
        this.dataManager = new RoadmapDataManager(dataModel, this, this.underlyingModelService, this.commonService);
        // Visualization starts always first day of month.
        dataModel.originDate = moment(new Date()).format('YYYY-MM-DD');
        // dataModel.originDate = moment().format().valueOf();

        this.startLoading();
        const call: Promise<McDataResponse<Swimlane>> = this.underlyingModelService.getSwimlanes(this.journeyId).toPromise();
        call.then(data => {
            const swimlanes: any[] = (data.data as []);
            let countdown = swimlanes.length;
            let count = 0;
            swimlanes.forEach(swimlane => {
                const task: Task = TaskParser.parser(swimlane, count++);
                dataModel.tasks.push(task);
                dataModel.unfilteredTasks.push(task);
                this.setSwimlaneAssignee(task);
                this.underlyingModelService.getSwimlaneItems(swimlane.id).subscribe(
                    dataItem => {
                        const items: any[] = (dataItem.data as []);
                        items.forEach(i => {
                            const activity: Activity = this.activityParser.parser(i, swimlane.index);
                            if (i.label === 'Plan') {
                                this.underlyingModelService.countTasks(i.projectId).subscribe(
                                    response => {
                                        this.activityEmpty = response.data[0] === 0;
                                        activity.isEmpty = response.data[0] === 0;
                                        dataModel.activities.push(activity);
                                        dataModel.unfilteredActivities.push(activity);
                                        this.setPlanAssignee(activity);
                                        this.destroyAndReload();
                                    });
                            } else {
                                dataModel.activities.push(activity);
                                dataModel.unfilteredActivities.push(activity);
                            }
                        });

                        if (--countdown === 0) {
                            this.loadGanttChart(this.primaryPeriod, this.secondaryPeriod);
                            this.destroyAndReload();
                        }
                    });
            });
            this.createMarker();
        }).finally(() => {
            this.stopLoading();
        });
    }

the function that do start loading icon is StartLoading and is a sample boolean variable that i use in my html file

Answer 1

The problem in the above code was that the promise got resolved even before the inner api gets complete which you are subscribing to. Actually there is no need of changing the code into a promised. Your Code should look something like this :-

public loadData(): void {
        dataModel = new TimelineStructure();
        this.dataManager = new RoadmapDataManager(dataModel, this, this.underlyingModelService, this.commonService);
        // Visualization starts always first day of month.
        dataModel.originDate = moment(new Date()).format('YYYY-MM-DD');
        // dataModel.originDate = moment().format().valueOf();

        this.startLoading();
        const call: Observable<McDataResponse<Swimlane>> = this.underlyingModelService.getSwimlanes(this.journeyId);
        call.pipe(mergeMap(data => {
            const swimlanes: any[] = (data.data as []);
            let countdown = swimlanes.length;
            let count = 0;
            const swimLaneCalls = swimlanes.map((swimlane)=>this.underlyingModelService.getSwinlaneItems(swinlane.id).pipe(mergeMap(dataItem => {
                        const items: any[] = (dataItem.data as []);
                        const myCalls = [];
                        items.forEach(i => {
                            const activity: Activity = this.activityParser.parser(i, swimlane.index);
                            if (i.label === 'Plan') {
                                myCalls.push(this.underlyingModelService.countTasks(i.projectId).pipe(map(
                                    response => {
                                        this.activityEmpty = response.data[0] === 0;
                                        activity.isEmpty = response.data[0] === 0;
                                        dataModel.activities.push(activity);
                                        dataModel.unfilteredActivities.push(activity);
                                        this.setPlanAssignee(activity);
                                        this.destroyAndReload();
                                    })));
                            } else {
                                dataModel.activities.push(activity);
                                dataModel.unfilteredActivities.push(activity);
                            }
                        });
                        return forkJoin(mycalls).pipe(map(()=> {
                if (--countdown === 0) {
                                    this.loadGanttChart(this.primaryPeriod, this.secondaryPeriod);
                                    this.destroyAndReload();
                            }
                        });
                      })));
            swimlanes.forEach(swimlane => {
                const task: Task = TaskParser.parser(swimlane, count++);
                dataModel.tasks.push(task);
                dataModel.unfilteredTasks.push(task);
                this.setSwimlaneAssignee(task);
            });
            return forkJoin(swimLaneCalls).pipe(map(res=> {
                 this.createMarker();
            });
        })).subscribe(() => {
            this.stopLoading();
        });
    }