CSS loading delay on server side rendering - Angular

*_Expected behavior_*Like any standard website, style should apply on page load and page refresh. Must avoid to see a broken website even if style apply few seconds later.

*_Actual behavior_*I configured my website for server side rendering and the MDBootstrap style do not apply immediately on page load and page refresh. There is a short delay before the CSS apply completly.

*_Resources (screenshots, code snippets etc.)_*Those lines from angular.json work correctly in a no server side environment:

• "node_modules/ng-uikit-pro-standard/assets/scss/bootstrap/bootstrap.scss",
• "node_modules/ng-uikit-pro-standard/assets/scss/mdb.scss",

Above a screen shot of the broken style just after a page load

I testing with some style inside an html component and without any MDBootstrap and it worked as expected. The problem of style and broken website appears immediately after switching back to MDBootstrap.

** How to reproduce on your end ** I suggest to start with this repository : https://github.com/PieterjanDeClippel/AspNetCoreSpaPrerenderingV2/tree/85ef52ddbfa87d320c18da678bc4eff0e3af81f0 because of its integration of i18n files.

Step 1 : Goto angular.json file then add

"styles": [ "node_modules/ng-uikit-pro-standard/assets/scss/bootstrap/bootstrap.scss", "node_modules/ng-uikit-pro-standard/assets/scss/mdb.scss", "src/styles.scss" ]

Step 2: Goto package.json and add those packages

"@angular/cdk": "^10.1.3", "ng-uikit-pro-standard": "file:ng-uikit-pro-standard-9.3.1.tgz",

Step 3 (final step):If you run the application in the SSR mode, you should already see the problem I told about on the existing html elements of the repository. You can add an image with some style and some stuff to see that there is a gap where CSS is not active on page load and page refresh.