Grid Spinner sometimes not displaying in *newer* browsers

[pcafstockf]

I apologize in advance for this report being a bit complicated (I'm not sure how to simplify the reproduction of the problem).

Problem

When Angular CLI (ng serve) generates an index.html file with:

          <script src="vendor.js" defer>

     instead of generating it with:

          <script src="vendor.js" type="module">

Grid.showSpinner will often fail to display the spinner.

Setup

I've created a stackblitz project to demonstrate the problem, *but* please note that you must download the project and run it locally to see the problem.

The project is based very loosely off the code found in this support thread.

Download the project from stackblitz, unzip, run "npm install", and then invoke the *local* ng with "./node_modules/.bin/ng serve".

Code/Behavior

When the browser loads the app, remote data is loaded into the Grid.

In ngAfterViewInit, a timer is set which waits for 2 seconds and then loads *more* remote data into the grid.

The remote data loading Observable also contains a 2 second delay before it responds with the requested remote data.

Working Scenario

When you refresh the web page, you will see a grid with data.  

After 2 seconds, the spinner will appear (for another 2 seconds), and then the grid will redraw with the next 10 records that have been retrieved.

This will work perfectly every time.  

Further, if you inspect index.html, you will notice that it loads all the js files with type="module".

     e.g. <script src="vendor.js" type="module">

Failing Scenario

Now stop 'ng', and then edit the ".browserslistrc" file to support only the last *4* versions of Safari (the stackblizt ".browserslistrc" is initially set to support the last *5* versions of Safari).

Now re-run "./node_modules/.bin/ng serve", and again refresh the browser page.

You will see that the spinner does *not* shows after most page loads (although it will show about every 4th or 5th page load on my machine).

You will also note that because ".browserslistrc" specifies only the last 4 versions of Safari, that index.html now loads all the js files with "defer".

     e.g. <script src="vendor.js" defer>

Explanation

Safari 10 did not support loading js modules.  So by including an old browser like Safari 10, Angular CLI generates an index.html file with <script src="vendor.js" type="module">, but when you drop the older Safari 10, Angluar CLI generates an index.html file with <script src="vendor.js" defer> (this seems backwards to me, but that is another story).

Also please note that I am doing all this testing with Chrome 87, so the problem is not with Safari.  I'm simply using the fact that Safari 10 did not support modules in order to control how Angular CLI generates the index.html file.

Summary

The important point of this report is that when Syncfusion spinner is loaded via type="module", it always works correctly.  

But, when it is loaded via "defer", it frequently fails.  

As more and more developers configure ".browserslistrc" to only support newer browsers, this will become an increasingly common problem for the Syncfusion spinner.

Just for completeness, I've also attached a zip of the stackblitz project.

P.S.

If the script is loaded via defer (which fails to show the spinner), you can then disable Chrome's cache (in the Developer Tools > Network tab), and the spinner will reliably show every time when you refresh the page.

This fact plus the type=module vs defer scenarios suggests to me that there is something in the Spinner code that is dependent on code execution ordering.

Attachment: angularivy7koogw_2ec17b3c.zip

[Manivel Sellamuthu]

Hi Earl, 

Greetings from Syncfusion support. 

We have validated the reported scenario and we are able to replicate the reported behavior. But before proceeding the query Could you please share the below details, which will be helpful for us to validate further about issue. 

1. By default while using Observable binding for the Grid, the service will be executed in the ngOnit as discussed in the below documentation.

Could you please explain the reason for using ngAfterViewInit 

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/observables/#data-binding 

 

2. Please explain your requirement or purpose of showing the spinner in the ngAfterViewInit

Regards, 

Manivel 

[pcafstockf]

Hi Manivel,

There was no significant reason for using ngAfterViewInit.  

ngAfterViewInit comes later in the lifecycle than ngOnInit, so it introduced a *tiny* bit more delay before data reload.

You can move the code from ngAfterViewInit into an ngOnInit method and get the same results.

Also, there is nothing special about the 2 second delays.  You can change them to 1 second or 10 seconds.

Please keep in mind this is just a sample to demonstrate the problem.  I just wanted to simplify the number of steps to reproduce as much as possible.

My own application is more complex and performs remote data fetching in response to user interaction.  In my app, I show the spinner as soon as the user triggers a remote fetch, and then hide the spinner once the response is received.  

Much different code, but ultimately still the same problem... The spinner seldom shows when I target newer browsers.

-Earl

[Manivel Sellamuthu]

Hi Earl, 

Sorry for the delay getting back to you. 

We have checked the shared sample. The spinner is not shown in the page, since the styles are not loaded properly for the spinner when loading scripts page with the defer loading. We suggest you to load the component styles, in the head section of the index.html to resolve the reported issue.  

src/index.html  

  

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

  

Reference link for defer script loading: https://javascript.info/script-async-defer#defer 

Please let us know, if you need further assistance. 

Regards, 

Manivel 

[pcafstockf]

Hi Manivel,

We are both talking about an Angular project, right ?

Angular's "ng" bundles all the styles together (see angular.json in the project I sent).  

If your assertion were correct, all styles would be missing (instead of just the Spinner).

Even if that really was the problem (and you can verify in Chrome's Developer Tools that it is not), this in Syncfusion *Angular*, it should be fully compatible with a simple "ng build".

>please note that you must download the project and run it locally to see the problem.

When you run the project locally, open your Chrome Developer Tools to the Network tab, and when you reproduce the problem as I described above, you will be able to see that it was *not* an issue of the styles being un-available.

Please reach out if you have additional questions as you track down this defect.

Thanks,

-Earl

[Manivel Sellamuthu]

Hi Earl, 

Thanks for your update. 

In order to explain the validation in detail, the styles referred from the node_modules in the angular.json is rendered in the page dynamically. With page refresh, the styles.css file is not generated after page refresh, which contains the spinner style for creating hence the spinner is not shown. After 4th or 5th refresh the styles.css is loaded in the page and spinner is shown. The style.css must be loaded in the page initially before creating the spinner, hence suggested loading the material.css file in the head section to resolve the reported issue. Check the below screenshots for reference. 

Spinner style is not loaded 

 

Spinner style is loaded 

 

 

Regards, 

Manivel