{"id":2344,"date":"2024-12-15T23:09:45","date_gmt":"2024-12-15T22:09:45","guid":{"rendered":"https:\/\/blog.kodono.info\/wordpress\/?p=2344"},"modified":"2024-12-15T23:09:45","modified_gmt":"2024-12-15T22:09:45","slug":"remove-lazy-loading-for-a-custom-spfx-webpart","status":"publish","type":"post","link":"https:\/\/blog.kodono.info\/wordpress\/2024\/12\/15\/remove-lazy-loading-for-a-custom-spfx-webpart\/","title":{"rendered":"Remove lazy loading for a custom SPFx webpart"},"content":{"rendered":"<p>SharePoint Online is doing lazy loading when we hit a page with webparts. If you created a SPFx webpart, and if it&#8217;s not visible right after the page load, then it will only be loaded once the user scrolls to it&#8230;<\/p>\n<p>To remove this behavior, and load the webpart as soon as possible, <a href=\"https:\/\/github.com\/SharePoint\/sp-dev-docs\/discussions\/7918\">you must declare your webpart as a dynamic data source<\/a>.<\/p>\n<p>Here is the minimal code example (in pure JS, not in TS):<\/p>\n<pre class=\"brush:javascript\">\r\nimport { BaseClientSideWebPart } from '@microsoft\/sp-webpart-base';\r\nimport { DisplayMode } from '@microsoft\/sp-core-library';\r\n\r\nexport default class HtmlViewerWebPart extends BaseClientSideWebPart {\r\n  constructor() {\r\n    super();\r\n    \/\/ the below is used by the dynamic data source to avoid lazy loading\r\n    this._sourceId = 'my_webpart';\r\n  }\r\n\r\n  onInit() {\r\n    \/\/ to avoid lazy loading of the webpart, we register it as a dynamic data source\r\n    \/\/ we only need to do it during the Edit of the page\r\n    if (this.isPageInEditMode() &#038;& this.context.dynamicDataSourceManager) {\r\n      this.context.dynamicDataSourceManager.initializeSource(this);\r\n      console.log('Dynamic Data Source initialized to avoid lazy loading.');\r\n    }\r\n    \r\n    return Promise.resolve();\r\n  }\r\n\r\n  isPageInEditMode() {\r\n    return this.displayMode === DisplayMode.Edit;\r\n  }\r\n\r\n  \/\/ we need to declare this method because it's used by the data source to avoid lazy loading\r\n  getPropertyDefinitions() {\r\n    return []\r\n  }\r\n\r\n  \/\/ we need to declare this method because it's used by the data source to avoid lazy loading\r\n  getPropertyValue(propertyId) {\r\n    return propertyId;\r\n  }\r\n}\r\n<\/pre>\n<p>Then, edit the page, which will trigger the dynamic data source registration, and publish it.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>SharePoint Online is doing lazy loading when we hit a page with webparts. If you created a SPFx webpart, and if it&#8217;s not visible right after the page load, then it will only be loaded once the user scrolls to it&#8230; To remove this behavior, and load the webpart as soon as possible, you must [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_coblocks_attr":"","_coblocks_dimensions":"","_coblocks_responsive_height":"","_coblocks_accordion_ie_support":"","hide_page_title":"","footnotes":""},"categories":[15,170,13],"tags":[153,123,152],"class_list":["post-2344","post","type-post","status-publish","format-standard","hentry","category-astuce","category-english","category-niveau-intermediaire","tag-astuce","tag-english","tag-niveau-intermediaire"],"_links":{"self":[{"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/posts\/2344","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/comments?post=2344"}],"version-history":[{"count":2,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/posts\/2344\/revisions"}],"predecessor-version":[{"id":2346,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/posts\/2344\/revisions\/2346"}],"wp:attachment":[{"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/media?parent=2344"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/categories?post=2344"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/tags?post=2344"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}