microsoft-graph-toolkit icon indicating copy to clipboard operation
microsoft-graph-toolkit copied to clipboard

[file-list] mgt-file-list should have spinner/Shimmer when loading content content when query changes

Open aaclage opened this issue 3 years ago • 3 comments

Describe the bug As follow up from #954 also would like to recommend to have a loading when query is changed. Using the mgt-file-list control with dynamic queries there are some milliseconds "SharePoint Context" of loading, could be important to include a loading action for slower environments.

To Reproduce Steps to reproduce the behavior: Include "<FileList" with fileListQuery property that will be change during the applications such us "/me/drive/root/search(q='" + SearchQuery + "')"

This behavior can be seen in the following example when making a search in Drive Library: https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-onedrive-finder

Expected behavior When control has dynamic queries, control will refresh content to display, the loading of content could be slower using different environment and no information regarding loading is displayed. Could create questions to User such us "If he already clicked?".

Screenshots Using graph Drive "search" parameter to find documents but no loading image

Mgt-file-list loading expectation between changing of queries image

Environment (please complete the following information):

  • OS: Windows 10
  • Browser [edge, chrome]
  • Framework [reac]
  • Context [SharePoint]
  • Version [2.2.0-next.file.0e80deb]

aaclage avatar May 03 '21 14:05 aaclage

Hello aaclage, thank you for opening an issue with us!

I have automatically added a "needs triage" label to help get things started. Our team will analyze and investigate the issue, and escalate it to the relevant team if possible. Other community members may also look into the issue and provide feedback 🙌

ghost avatar May 03 '21 14:05 ghost

I think this is a great feature request, I agree. We should update the file picker for the next release to support shimmer.

nmetulev avatar May 04 '21 16:05 nmetulev

To investigate: Shimmer in Fluent UI @yyiinnggzz

beth-panx avatar Jun 09 '21 20:06 beth-panx