Wrong loading animation is shown

[Niels Van Goethem]

Hi, I want to show the shimmer loading animation, while my data is loading.
Because I want to handle fetching the data myself, I use the showSpinner and hideSpinner functions.

But when I use these, the circle is shown although I pass the "Shimmer" indicatorType:

import { Component, Input, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';

import { ProjectDetails, ProjectScheduleStep } from '@shared/models';

import { ProjectsService } from '@shared/services';

import { GanttComponent } from '@syncfusion/ej2-angular-gantt';

import { delay, Observable } from 'rxjs';

import { finalize } from 'rxjs/operators';

@Component({

  selector: 'am-planning-overview',

  template: './planning-overview.component.html',

  encapsulation: ViewEncapsulation.None,

})

export class PlanningOverviewComponent implements OnInit {

  @Input() public project: ProjectDetails | undefined;

  @ViewChild('gantt') public gantt: GanttComponent | undefined;

  public data$: Observable<ProjectScheduleStep[]> | undefined;

  public taskSettings: object | undefined;

  public loadingIndicator = { indicatorType: 'Shimmer' };

  constructor(private readonly projectsService: ProjectsService) {}

  public ngOnInit(): void {

    this.data$ = this.projectsService.getProjectScheduleSummary$(this.project.id).pipe(

      delay(20000),

      finalize(() => this.gantt.hideSpinner())

    );

    this.taskSettings = {

      id: 'id',

      name: 'title',

      startDate: 'startDate',

      endDate: 'endDate',

      progress: 'percentCompleted',

      parentID: 'parentId',

      dependency: 'dependency',

      milestone: 'isMilestone',

      resourceInfo: 'resources',

    };

  }

  public onCreated() {

    this.gantt.showSpinner();

  }

  public onDataBound() {

    this.gantt.fitToProject();

  }

}

[Sridharan Jayabalan]

Hi Niels,

Greetings from Syncfusion.

For your query, we would like to inform you that by default, shimmer effect is occurred for every scroll action and data loading. So, no need to give indicator type. For programatically, you want to show and hide the shimmer effect, we suggest you use the showMaskRow and hideMaskRow methos respectively. Refer code snippet and sample for your reference.

 

Code-Snippet:   

app.component.ts:-

export class AppComponent {

  public projectEndDate: Date;

  public ngOnInit(): void {

    this.data = virtualData;

  }

  onButtonClick() {

    var ganttInstance = (document.getElementById('SplitTasks') as any)

      .ej2_instances[0];

    ganttInstance.showMaskRow();

  }

  onButtonClick1() {

    var ganttInstance = (document.getElementById('SplitTasks') as any)

      .ej2_instances[0];

    ganttInstance.hideMaskRow();

  }

}

 

Sample - Nxgnzj (forked) - StackBlitz

 

Regards,

Sridharan

[Niels Van Goethem]

I am using the created and dataBound events to show and hide maskRow, but nothing is shown

[Ajithkumar Gopalakrishnan]

Hi Niels,

We suspect that the theme references may not be properly updated in your project, which is causing the shimmer effect to not display on initial load and scroll. Please find the updated style references below:

../node_modules/@syncfusion/ej2-buttons/styles/material.css,

../node_modules/@syncfusion/ej2-calendars/styles/material.css,

../node_modules/@syncfusion/ej2-dropdowns/styles/material.css,

../node_modules/@syncfusion/ej2-lists/styles/material.css,

../node_modules/@syncfusion/ej2-layouts/styles/material.css,

../node_modules/@syncfusion/ej2-navigations/styles/material.css,

../node_modules/@syncfusion/ej2-popups/styles/material.css,

../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css,

../node_modules/@syncfusion/ej2-notifications/styles/material.css,

../node_modules/@syncfusion/ej2-grids/styles/material.css,

../node_modules/@syncfusion/ej2-treegrid/styles/material.css, ../node_modules/@syncfusion/ej2-gantt/styles/material.css

OR

// index.html
<link rel='nofollow' href=https://cdn.syncfusion.com/ej2/27.1.58/material.css rel="stylesheet" type="text/css" />

<link rel='nofollow' href=https://cdn.syncfusion.com/ej2-notifications/27.1.58/material.css rel="stylesheet" type="text/css" />

Note: The above styles are dependencies for the Gantt chart. When the shimmer effect is enabled, it will appear during the initial load and while scrolling.

We previously suggested using the showMaskRow and hideMaskRow methods in the created and dataBound events to render the shimmer effect in your project.

For more information, you may refer to the following link:

https://ej2.syncfusion.com/angular/documentation/gantt/getting-started

If still issue faced share the sample for our validation after we will share the validation details with proper solution.

Regards,

Ajithkumar G

[Niels Van Goethem]

Hi, I am using the material3 style sheets. Is there a problem there?

[Sridharan Jayabalan]

Niels,

No, there’s no issue with the Material3 theme. Refer the attached sample below for your reference which we used material3 theme.

 

Sample - Nxgnzj (forked) - StackBlitz

Try to incorporate the suggested themes files in our previous update in import statement to resolve issue.

Let us know if you need further assistance.

Regards,

Sridharan

[Niels Van Goethem]

I have found the problem. I cannot call maskRow() and pass a loadingIndicator object at the same time

[Sridharan Jayabalan]

Niels,

For your query, we would like to inform you that it is not necessary to use both loadingIndicator and showMaskRow methods simultaneously. You only need to use the showMaskRow and hideMaskRow methods, as the shimmer effect will appear by default during scrolling actions and initial load when virtualization is enabled. Please refer to the code snippet and sample for more information.

 

Code-Snippet:   

app.component.ts:-

export class AppComponent {

  public ngOnInit(): void {

    this.data = virtualData;

    this.taskSettings = {

      id: 'TaskID',

      name: 'TaskName',

      startDate: 'StartDate',

      endDate: 'EndDate',

      duration: 'Duration',

      progress: 'Progress',

      parentID: 'parentID',

    };

   ......................

  }

  created() {

    var ganttInstance = (document.getElementById('SplitTasks') as any)

      .ej2_instances[0];

    ganttInstance.showMaskRow();

  }

  dataBound() {

    var ganttInstance = (document.getElementById('SplitTasks') as any)

      .ej2_instances[0];

    ganttInstance.hideMaskRow();

  }

}

app.component.html:-

  <ejs-gantt

    id="SplitTasks"

    #splittasks

    height="450px"

    [dataSource]="data"

    [taskFields]="taskSettings"

    [treeColumnIndex]="1"

    [splitterSettings]="splitterSettings"

    [columns]="columns"

    [labelSettings]="labelSettings"

    [projectStartDate]="projectStartDate"

    [projectEndDate]="projectEndDate"

    [allowSelection]="true"

    [enableVirtualization]="true"

    [highlightWeekends]="true"

    [enableTimelineVirtualization]="true"

    (created)="created($event)"

    (dataBound)="dataBound($event)"

  >

  </ejs-gantt>

 

Sample - Nxgnzj (forked) - StackBlitz

Let us know if you need further assistance.

Regards,

Sridharan