ShimmeredDetailsList: wrapper for DetailsList with Shimmer.#5374
Merged
ThomasMichon merged 10 commits intomicrosoft:masterfrom Jun 29, 2018
Merged
ShimmeredDetailsList: wrapper for DetailsList with Shimmer.#5374ThomasMichon merged 10 commits intomicrosoft:masterfrom
ThomasMichon merged 10 commits intomicrosoft:masterfrom
Conversation
added 9 commits
June 27, 2018 16:22
dzearing
approved these changes
Jun 28, 2018
atneik
approved these changes
Jun 28, 2018
ThomasMichon
approved these changes
Jun 29, 2018
Markionium
added a commit
to Markionium/office-ui-fabric-react
that referenced
this pull request
Jul 1, 2018
* master: (151 commits) Css updates for card components (microsoft#5393) DatePicker MergeStyles step 2 - Converts scss to js styles (microsoft#5362) Update stale with 60 day comment and updated ignored label names. (microsoft#5388) replaced await for ie compat syntax - but still needs promise (microsoft#5387) Slider - mergestyle conversion (microsoft#5379) Applying package updates. Enabling publishing for charting and gridlayout. (microsoft#5378) TilesList: fadeOut overlay. (microsoft#5381) Pivot: JS Styling (microsoft#5324) ShimmeredDetailsList: wrapper for DetailsList with Shimmer. (microsoft#5374) dashboard-grid-layout improved example (microsoft#5373) Applying package updates. Addressing Issue microsoft#5165 - Using Customizer with Nav Component (microsoft#5361) Applying package updates. Address issue microsoft#5353 (microsoft#5359) Change log to trigger release (microsoft#5358) Fluent updates (microsoft#5357) TextField render value undefined as empty string (microsoft#5349) Applying package updates. DetailsColumn: css class changes to show gripper when hover on draggable columns (microsoft#5309) ...
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Pull request checklist
$ npm run changeDescription of changes
Introduces a wrapper component called ShimmeredDetailsList which can be used in place of regular DetailsList when you want to augment it with the Shimmer placeholder as an alternative to have it integrated internally which was causing a bundle size increase. The purpose of this wrapper is to give a quick default shimmer placeholder to users who don't modify the renderer of each row by just toggling the
enableShimmerprop, plus the possibility to provide a custom shimmer skeleton throughonRenderCustomPlaceholderprop when in need. TheshimmerLinesprop gives more control over the default 10 lines when necessary.Focus areas to test
In
DetailsListI added a conditional to trigger aforceUpdateas changing the propcompactwas not propagated to the new wrapper for correct sizes of Shimmer Elements. How expensive is theforceUpate?P.S.
There is a bunch of code related to the current implementation of Shimmer in DetailsList, most specifically in the
DetailsRow.scssplus some props forDetailsRowandDetailsRowFields. Those will eventually be removed as soon as we have a v6 Fabric bump in ourcommonrepo and I can change the imports in there to use the Shimmer from Fabric and not from experiments package.Microsoft Reviewers: Open in CodeFlow