CODEWITHSUNDEEP
angularasp.net-coreasp.net-core-mvcasp.net-core-1.0aspnetcoretemplatepack
Vinorth
Vinorth

Reputation: 1033

ASP.NET CORE Page Flicker

I recently started developing an ASP.NET Core SPA application that uses Angular 2. I am using a third party css library, along side bootstrap to determine a lot of the page styles. For some reason, I see a page flicker, sometimes with unstyled html and other pages with styled html just reloaded again. I've included the style sheet and other assets in the wwwroot/dist folder and link tags in the _Layout.cshtml page of the application. I've used chrome developer tools to try and debug the application and learned that the html is loaded once and the majority of the time spent loading the page is used on javascript.

Any help or a point in the right direction would be much appreciated.

Upvotes: 0

Views: 418

Answers (1)

James Joyce
James Joyce

Reputation: 1774

I presume you are using WebPack? This will bundle all your styles into a javascript file, load that file, and then process them. This processing occurs AFTER page load, so there is a period when your page has no style.

Then, once the javascript bundle is processed, style is applied, and all looks normal.

Use the webpack "MiniCssExtractPlugin" to extract your style into a separate CSS file, which you can include in the header of your pages (rather than a javascript version)

Upvotes: 1

Related Questions