Lazy Loading of SPFx Web Parts on a Page Messes up Dynamic Data Connected Web Parts

[AJIXuMuK]

Category

• Bug

Describe the bug

It seems like currently web parts are added to the page at the moment when they're become visible (user scrolls to web part's position).
It is good from performance perspective but it messes up Dynamic Data web part connections.

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

Environment details (development & target environment)

• Your Developer Environment: N/A
• Target Environment: SharePoint Online
• Framework: N/A
• Browser(s): any
• Tooling: SPFx v1.11.0

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);
      }
    }
  }

[msft-github-bot]

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

[bcameron1231]

Thanks Alex! This is a duplicate, do you mind closing this one out adding your comment / information to the other ticket? It's #6091

[AJIXuMuK]

Sure @bcameron1231!

[msft-github-bot]

Issues that have been closed & had no follow-up activity for at least 7 days are automatically locked. Please refer to our wiki for more details, including how to remediate this action if you feel this was done prematurely or in error: Issue List: Our approach to locked issues