pnp / pnp/sp-dev-fx-controls-react

PeoplePicker - delay in first time content rendering with large number of users in defaultSelectedUsers property

Open
#1,344 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

help wanted Needs: Design 🎨 type:enhancement
Dominant language
TypeScript
Stars
433
Forks
418
Avg merge
5d 6m
Merged PRs (30d)
19

Description

Thank you for reporting an issue, suggesting an enhancement, or asking a question. We appreciate your feedback - to help the team understand your
needs please complete the below template to ensure we have the details to help. Thanks!

Please check out the documentation to see if your question is already addressed there. This will help us ensure our documentation is up to date.

Category

[X ] Enhancement

[ ] Bug

[ X] Question

Version

Please specify what version of the library you are using: [3.11.0]

Expected / Desired Behavior / Question

Suppose that you have the peoplepicker control on an SPFx web part together with other controls. Using the "defaultSelectedUsers" attribute you set the initial values of the control e.g. a large number of users that are retreived from a user field in a list - the population of the controls, will happen upon completion of the retrieval all all the list item attributes. In this scenario, you set the default users values in the control state variable, and you expect that the control will be populated in a decent amount of time.

Instead, the rest of the controls are populated but the people picker remains empty for some time (3-5 secs even more depending on the number of the retreived users), then all users appear. The user experience is that the source list item does have values in the user field - eventually the control will be populated, but till then, this delay may lead to wrong user actions.

I wonder if there is an event that can be triggered upon completion of rendering of the peoplepicker TOGETHER with the data. This event could be used to improve the user experience by, e.g. have a loading panel, or make other controls disabled - in this case the user will be prevented from proceeding to a wrong action.

The documentaion does not provide information on such type of event - I wonder if this can be an improvment in a future release, or there is a techinque that can by-pass the problem described above.

Thanks!

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the PeoplePicker control and its defaultSelectedUsers handling, using the reported 3–5 second delay with many users as the scenario to understand. Review the linked project documentation for existing events or rendering guidance; done should mean the requested completion behavior or an agreed alternative is clearly defined and supported.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.