Home

A question about spfx extensions!

%3CLINGO-SUB%20id%3D%22lingo-sub-283103%22%20slang%3D%22en-US%22%3EA%20question%20about%20spfx%20extensions!%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-283103%22%20slang%3D%22en-US%22%3E%3CP%3EHi%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20created%20an%20extension%2C%20a%20very%20simple%20one%2C%20that%20contain%20a%20custom%20css%20file.%26nbsp%3B%3C%2FP%3E%3CP%3Ethe%20idea%20is%20to%20hide%20the%20%3CSPAN%3ESuiteNavPlaceHolder%20with%20display%3A%20none.%20That's%20it!%20%2C%20as%20I%20said%20is%20a%20very%20simple%20one.%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%3EThe%20extension%20is%20working%20as%20expected%20but%20there%20is%20a%20little%20issue%20and%20I%20don't%20think%20that%20it%20has%20something%20to%20do%20with%20the%20extension%20but%20the%20browser.%26nbsp%3B%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EEach%20time%20I%20load%20the%20page%20I%20can%20see%20the%20%3CSPAN%3ESuiteNavPlaceHolder%20container%20for%20a%20half%20second%20before%20it%20gets%20hidden.%20I%20think%20that%20it%20is%20the%20time%20that%20the%20browser%20takes%20to%20read%20the%20extension.%26nbsp%3B%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%3CSPAN%3ESo%20the%20question%20is%20how%20to%20make%20it%20faster%2C%20or%20even%20better%2C%20load%20the%20css%20before%20the%20page%20so%20the%26nbsp%3B%3C%2FSPAN%3E%3C%2FP%3E%3CDIV%3E%3CDIV%3E%3CSPAN%3ESuiteNavPlaceHolder%20is%20already%20hidden%20when%20the%20page%20loads.%26nbsp%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3EI%20am%20calling%20the%20css%20file%20from%20inside%20the%20onInit()%20method%20and%20the%20css%20file%20is%20in%20the%20assets%20folder%20of%20the%20extension.%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3EBest%20regards%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3EAmerico%3C%2FSPAN%3E%3C%2FDIV%3E%3C%2FDIV%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-283103%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EDeveloper%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-283157%22%20slang%3D%22en-US%22%3ERe%3A%20A%20question%20about%20spfx%20extensions!%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-283157%22%20slang%3D%22en-US%22%3E%3CP%3EYes%2C%20I%20am%20aware%20that%20I%20shouldn't%20do%20that%20but%20the%20goal%20with%20this%20page%20is%20show%20it%20in%20a%20tv-screen%20and%20the%20customer%20doesn't%20want%20either%20the%20name%20of%20the%20page%20nor%20the%20navigation%20shows.%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20created%20a%20new%20extension%20using%20top%20placeholder%20and%20inside%20the%20%3CSPAN%3E_renderPlaceHolders()%20method%20I%20call%20the%20custom%20css.%20It%20seems%20to%20work%20but%20I%20am%20not%20sure%20if%20it%20is%20because%20the%20browser%20cache%20or%20the%20top%20section%20of%20the%20page%20actually%20hides%20as%20soon%20the%20page%20start%20rendering.%26nbsp%3B%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%3ERegards%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%3CSPAN%3EAmerico%3C%2FSPAN%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-283110%22%20slang%3D%22en-US%22%3ERe%3A%20A%20question%20about%20spfx%20extensions!%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-283110%22%20slang%3D%22en-US%22%3EHi%2C%3CBR%20%2F%3E%3CBR%20%2F%3EYou%20shouldn't%20really%20be%20doing%20this%20as%20it's%20not%20recommended%2C%20but%20I%20understand%20your%20need%20%3A)%3C%2Fimg%3E%3CBR%20%2F%3EUnfortunately%20extensions%20come%20quite%20late%20on%20the%20page%20loading%20order%2C%20so%20I%20don't%20think%20that%20you%20will%20be%20able%20to%20get%20rid%20of%20the%20little%20delay.%3CBR%20%2F%3EI%20believe%20there%20are%20use%20voice%20requests%20to%20move%20extensions%20loading%20time%20to%20an%20earlier%20stage%20of%20the%20page%20lifecycle%2C%20but%20not%20sure%20when%20that%20will%20be%20released.%3CBR%20%2F%3E%3CBR%20%2F%3EI%20have%20done%20this%20in%20the%20past%20for%20classic%20sites%20by%20using%20custom%20actions%20and%20setting%20loading%20dependencies%20on%20the%20OOB%20JavaScript%20files%20to%20ensure%20that%20my%20file%20was%20always%20loaded%20before%2C%20but%20haven't%20tried%20a%20similar%20approach%20on%20modern%20sites%20so%20far%3CBR%20%2F%3E%3C%2FLINGO-BODY%3E
Highlighted
Americo Perez
Regular Contributor

Hi,

 

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
Americo
2 Replies
Hi,

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. 

 

Regards

Americo

Related Conversations
Tabs and Dark Mode
cjc2112 in Discussions on
46 Replies
Extentions Synchronization
Deleted in Discussions on
3 Replies
Stable version of Edge insider browser
HotCakeX in Discussions on
35 Replies
How to Prevent Teams from Auto-Launch
chenrylee in Microsoft Teams on
30 Replies
flashing a white screen while open new tab
Deleted in Discussions on
14 Replies
Security Community Webinars
Valon_Kolica in Security, Privacy & Compliance on
13 Replies