Shimmer not showing up when calling showSpinner()

[Marijke Meersman]

I have my grid inside another component than the component that gets the data and not via DataManager.

I try to show the spinner as long as the component hasn't received any info on the @Input, but it doesn't want to show it. 

I made an example in stackblitz: https://stackblitz.com/edit/angular-gketkk-mykuks?file=src/app/grid/grid.component.ts

What can I do to make the shimmer loading indicator appear instead of 'no records to display'?

[Pavithra Subramaniyam]

Hi Marijke Meersman,

Thanks for contacting Sycnfusion support.

You can show the spinner when the Grid shows an empty record by calling the “showSpinner” method asynchronously. Please refer to the below code example for more information.

public created() {

  console.log('created: show spinner');

  setTimeout(() => {

    this.grid.showSpinner();

  });

  setTimeout(() => {

    console.log('this.grid.dataSource');

    this.grid.dataSource = orderDetails;

  }, 5000);

}

 

Regards,

Pavithra s

[Marijke Meersman]

Thanks, this indeed solves the problem that there is at least some form of spinner out there to make sure the user knows something is happening.

But my question was on how I can show the shimmer loading indicator during load time?

I already set [loadingIndicator] to shimmer as you can see in the stackblitz. But there doesn't seem to be a method like showShimmer() or showLoadingIndicator()?

[Pavithra Subramaniyam]

Marijke Meersman,

We suggest the internal method “showMaskRow” to achieve your requirement instead of showSpinner method inside the “created” event. Please refer to the below code example for more information.

public created() {

  setTimeout(() => {

    this.grid.showMaskRow();

  });

 

  setTimeout(() => {

    console.log('this.grid.dataSource');

 

    this.grid.dataSource = this.data;

  }, 5000);

}