Lazy loading of custom web parts in modern pages

[stchiew]

Category

• Question
• Typo
• Additional article idea

Question

I am observing lazy loading of custom web parts in modern pages. A web part is not loaded/rendered until it is scrolled to. This was observed in both Targeted and Standard release tenants starting Jul 18. See snapshot of elements rendered of a HelloWorld webpart upon initial page load and then after it is scrolled into view.

My question: is there a way to override this behavior (either thru PS or even within spfx code) to render all webparts on page load?

My use case for this is in using dynamic data source web parts where the data source web part is at the bottom of a large page, while my destination/receiving web part is at the top. (Example: a navigation menu of various web parts in the page). Since the source is not rendered yet at the bottom, the top web part does not have any data coming from the source web parts.
Prior to Jul 18, all web parts were renderd on page load, so my consumer web part was able to get all data from the source/publisher web parts at the bottom of the page.

Upon page load

After scrolling to web part

Environment details (development & target environment)

• Your Developer Environment: Windows 10
• Target Environment: SharePoint Online (Targeted and Standard release tenants)
• Framework: Node.js v6/v8/v10/v12]
• Browser(s): All
• Tooling: VS Code , SPFx v1.10.0
• Additional details:
  This was not observed prior to Jul 18. After Jul 18, the web parts are being wrapped around a <div data-viewport-id tag.

[msft-github-bot]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[AJIXuMuK]

Related issue in PnP Web Parts samples repo: #1375

Steps to reproduce

1. Get the code from Page Sections Navigation sample
2. Add Page Section Navigation web part on top of the page.
3. Add multiple Page Sections Navigation Anchor web parts on the page: some of them visible as soon as you open the page, some - invisible until you scroll down
4. Save the page
5. Only visible anchors are listed in the navigation

Expected behavior

All anchors are listed in the navigation

Additional context

The connection between navigation web part and anchor web part is done using Dynamic Data capability of SPFx.
Anchor web part is registered as a data source using this.context.dynamicDataSourceManager.initializeSource(this);.
Navigation web part consumes dynamic data using API approach:

protected onInit(): Promise<void> {
    //...
    // getting data sources that have already been added on the page
    this._initDataSources();
    // registering for changes in available datasources
    this.context.dynamicDataProvider.registerAvailableSourcesChanged(this._availableSourcesChanged);

    //...
  }

private _initDataSources(reRender?: boolean) {
    // all data sources on the page
    const availableDataSources = this.context.dynamicDataProvider.getAvailableSources();

    for (let i = 0, len = availableDataSources.length; i < len; i++) {
      let dataSource = availableDataSources[i];
      if (!dataSource.getPropertyDefinitions().filter(pd => pd.id === 'anchor').length) {
        continue; // we don't need data sources other than anchors
      }
      if (!dataSources || !dataSources.filter(ds => ds.id === dataSource.id).length) {
        this.context.dynamicDataProvider.registerPropertyChanged(dataSource.id, 'anchor', this._onAnchorChanged);
      }
    }
  }

[tgorgdotcom]

Also experiencing this issue. I found that the OOTB Text webpart does not lazy load, I think due in part to allowing for headers to become anchors. If there's any way to expose that to webparts we create, that would be awesome!

[netti01]

We can also confirm that the OOTB Text webpart is directly loaded on the page, independent of it's position. Is there any setting/attribute that we can pass to our webparts in order to achieve the same behaviour?

[pratk30]

I observed it is not working for OOTB webparts too. On a large page I have added 15 ListWebparts and one custom webpart on top of those webpart in same section. Custom webpart is applying some css through jQuery on each ListWebParts, but due to this issues only few ListWebparts are having that css. So I believe this is all due to lazy loading of OOTB webparts too.

[tgorgdotcom]

Hello @pratk30 Would you be able to try seeing if the OOTB Text webpart is lazy loaded on your end?

[pratk30]

Hello @pratk30 Would you be able to try seeing if the OOTB Text webpart is lazy loaded on your end?

@tgorgdotcom No, for this webpart this is not an issues. I mostly using document library OOTB webpart and having issues there. Only view port is created until you scrolled to webpart position.

[AdenKenny]

We've also got this issue with attempting to implement anchor web parts with a navigation bar. The anchors that are out of the viewport will not be created and cannot be picked up by the receiving dynamic data source. If the page is scrolled to the bottom, the anchors will be picked up.