A question about spfx extensions!

Iron Contributor



I created an extension, a very simple one, that contain a custom css file. 

the idea is to hide the SuiteNavPlaceHolder with display: none. That's it! , as I said is a very simple one.


The extension is working as expected but there is a little issue and I don't think that it has something to do with the extension but the browser. 


Each time I load the page I can see the SuiteNavPlaceHolder container for a half second before it gets hidden. I think that it is the time that the browser takes to read the extension. 

So the question is how to make it faster, or even better, load the css before the page so the 

SuiteNavPlaceHolder is already hidden when the page loads. 
I am calling the css file from inside the onInit() method and the css file is in the assets folder of the extension.
Best regards
2 Replies

You shouldn't really be doing this as it's not recommended, but I understand your need :)
Unfortunately extensions come quite late on the page loading order, so I don't think that you will be able to get rid of the little delay.
I believe there are use voice requests to move extensions loading time to an earlier stage of the page lifecycle, but not sure when that will be released.

I have done this in the past for classic sites by using custom actions and setting loading dependencies on the OOB JavaScript files to ensure that my file was always loaded before, but haven't tried a similar approach on modern sites so far

Yes, I am aware that I shouldn't do that but the goal with this page is show it in a tv-screen and the customer doesn't want either the name of the page nor the navigation shows. 


I created a new extension using top placeholder and inside the _renderPlaceHolders() method I call the custom css. It seems to work but I am not sure if it is because the browser cache or the top section of the page actually hides as soon the page start rendering.