We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Shimmer not showing up when calling showSpinner()

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'?


3 Replies 1 reply marked as answer

PS Pavithra Subramaniyam Syncfusion Team April 4, 2023 09:37 AM UTC

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



MM Marijke Meersman April 4, 2023 10:06 AM UTC

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()?



PS Pavithra Subramaniyam Syncfusion Team April 6, 2023 06:33 AM UTC

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

}

 



Marked as answer
Loader.
Live Chat Icon For mobile
Up arrow icon