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

and what is that boolean variable you use in the HTML file? (: can we see it in the TypeScript excerpt provided? (: — IAfanasov
– IAfanasov, Commented May 26, 2020 at 8:17
yes is this : public startLoading() { this.loading = true; } public stopLoading() { this.loading = false; } — Nikolai Ivanov
– Nikolai Ivanov, Commented May 26, 2020 at 8:28

Aakash Garg · Accepted Answer · 2020-05-26 08:58:04Z

2

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();
        });
    }

answered May 26, 2020 at 8:58

Aakash Garg

11k2 gold badges11 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Nikolai Ivanov Over a year ago

thank you for your coment but im trying do use yor code and giving me the next errors. ERROR in GanttChartDemo.ts(382,21): error TS2304: Cannot find name 'Observable'. GanttChartDemo.ts(383,19): error TS2304: Cannot find name 'mergeMap'. GanttChartDemo.ts(387,89): error TS2551: Property 'getSwinlaneItems' does not exist on type 'UnderlyingModelService'. Did you mean 'getSwimlaneItems'?

Nikolai Ivanov Over a year ago

GanttChartDemo.ts(387,106): error TS2552: Cannot find name 'swinlane'. Did you mean 'swimlane'? GanttChartDemo.ts(387,124): error TS2304: Cannot find name 'mergeMap'. GanttChartDemo.ts(393,95): error TS2552: Cannot find name 'map'. Did you mean 'Map'? GanttChartDemo.ts(407,24): error TS2304: Cannot find name 'forkJoin'. GanttChartDemo.ts(407,33): error TS2552: Cannot find name 'mycalls'. Did you mean 'myCalls'? GanttChartDemo.ts(407,47): error TS2552: Cannot find name 'map'. Did you mean 'Map'?

Nikolai Ivanov Over a year ago

GanttChartDemo.ts(420,20): error TS2304: Cannot find name 'forkJoin'. GanttChartDemo.ts(420,49): error TS2552: Cannot find name 'map'. Did you mean 'Map'?

Aakash Garg Over a year ago

map, forkjoin, mermgemap are rxjs operators. You need to import them

Aakash Garg Over a year ago

you imported all operators?

|

Collectives™ on Stack Overflow

Problem adding loading icon with TypeScript

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related