spfx web parts not rendered on page load until scrolled to

[stchiew]

I have custom spfx web parts located at various locations in a long site page. I notice that these web parts are rendered only when user scrolls down the page and upon nearly reaching the viewport does the web part code fires. Is this some sort of page optimization, so that wayward web parts do not cause any page to load slowly?

I have custom dynamic web parts for page navigation that depends on all the web parts being loaded upon page load. The web part at the top of the page needs the anchor links of web parts at the bottom of the page to be displayed, so this issue is causing the custom navigation bar to not display all the anchor links.

This used to work some months ago, but now it doesn't.

[#2]

Hi @stchiew,

You're right. This is default behavior for modern pages in SharePoint. Maybe it was working before because your page was not long enough to not load some webparts?

I can see how that would be a problem for you, though. What you could do is group your webparts together inside a big webpart. I've done that for other reasons but surely it would to solve your problem, too. Or you could change the logic of your custom nav.

Let me know if you need any help.

[#3]

@Carlos_Marins thanks for your reply!

I'm pretty sure it worked earlier this year with some very long pages. Actually this is the web part solution I am trying to implement from the spfx PnP Sample repos react-page-sections-navigation , so it really depends on all subsequent web parts to be loaded and registered as a data source before the top navigation displays all links.

I did some more testing, with the standard Hello World web part at the bottom of a simple modern page with many OOTB webparts, both in a Targeted Release tenant and a Standard Release tenant and got different results! Seems in targeted release the web part is loaded in full on page load, while in the latter release it doesn't. So my web part works in target but not in standard. Below are snapshots from browser dev tools, upon page load without scrolling. (Hoping these changes will be rolled out to standard release tenants soon)

Standard Release - there's a div data-viewport-id, but the rest of the webpart is not rendered.

Target release tenant - the WP is rendered without scrolling, without the div data-viewport-id tag

[#4]

@stchiew - I do have the same issue. Few of the custom components which replied on webpart on the page doesnt work anymore until I scroll the page to bottom. 

@microsoft - Is this a bug or a page behavior change? Can we override this?

[#5]

@stchiew Did you ever manage to find a solution to this? I was trying to use the same webpart with the same issue (I did come up with a very hacky alternative by inspect what DOM does get loaded but it's unreliable at best).

[#6]

@JonHayDev Unfortunately, not. I have opened an issue on this in github here https://github.com/SharePoint/sp-dev-docs/issues/6091 and there is still a debate among the engineering teams and users on how to go around this.