Partially rendered FileManager view component on browser (hard) refresh

[Renato]

Am I the only one running into this? When I do a hard reload on the page (shift + ⌘ + R) so it doesn't cache static files, the file manager view gets rendered in half. It happens at every single request. It eventually renders correctly after I do a regular refresh (⌘ + R).

Below, a screenshot of a halfway render:

Specs:

Browser: Version 99.0.4844.84

OS: macOS Big Sur v11.4

React: 18.1.0

dependencies:

├── @syncfusion/[email protected]

├── @syncfusion/[email protected]

├── @syncfusion/[email protected]

├── @syncfusion/[email protected]

├── [email protected]

 

[Keerthana Rajendran]

Hi Renato,

We have checked the reported issue in File Manager with “macOS Catalina Version 10.15.7” and it is working fine. However, we have planned to ensure this with your exact Mac OS configuration. We will validate and get back to you with further details on May 11, 2022.

We appreciate your patience.

Regards,

Keerthana R.

[Renato]

Hi Keerthana,

I don't think the OS should play a role here. I also tested it with Safari and the problem occurs. Seems to me that the the CDN are loaded after the html components are loaded into the page which cause the bad FileManager rendering.

By the way, I load the CDN css by doing an import from my index css file:

@import url("https://cdn.syncfusion.com/ej2/tailwind.css");

Unless there is a more recommended/standard way.

Thanks for looking into it.

Renato

[Renato]

Ok it's solved by doing the CDN import at the header of the index html file:

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

I am not sure why I did it with an import statement, perhaps I seen it in the documentation , perhaps I did it on my own. Either way, then it should be explicit that that CDN resources must be imported in t html header.

Thanks.

Renato

[Keerthana Rajendran]

Hi Renato,

We are happy to hear that the issue is resolved. The import statement can be used if the styles are imported from packages.

Here, you can see in the below UG link that the styles are imported from node modules.

https://ej2.syncfusion.com/react/documentation/file-manager/getting-started/#adding-style-sheet-to-the-application

If you are referring to the style sheet through the CDN link, then it can be referred at the header part of the index.html file.

Please get back to us if you need any further assistance.

Regards,

Keerthana R.