SharePoint Framework Design Patterns – Asynchronous Rendering

In this 15-minute developer-focused demo, slow page loads, slow Teams apps, is often attributed to slow web part rendering and commonly due to waiting on data. Hugo Bernier reminds viewers that OOB rendering is typically synchronous. The fix - asynchronous rendering with isRenderAsync. Referenced samples in this demo use this method. Tips for better user experience include using progress indicators (spinners, bars, shimmer interface) to make rendering seem faster. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on October 7, 2021.

Demo Presenter: Hugo Bernier (Microsoft) | @bernierh

Supporting materials:
• Tools – Fluent UI - Shimmer web | https://developer.microsoft.com/fluentui#/controls/web/shimmer
• Sample - React HTM (Hyperscript Tagged Markup) Templating | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-htm-templating
• Sample - Microsoft Graph People Search | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-msgraph-peoplesearch

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos