[RFR] Display a skeleton instead of empty datagrid when loading #2706
Conversation
This file contains 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
fzaninotto
commented
Dec 31, 2018
| @@ -135,7 +135,7 @@ export class ReferenceManyFieldController extends Component { | |||
| currentSort: this.state.sort, | |||
| data, | |||
| ids, | |||
| isLoading: typeof ids === 'undefined', | |||
| loadedOnce: typeof ids !== 'undefined', | |||
There was a problem hiding this comment.
this can be considered a BC break, but it was never documented, so I'm confident it should not break much.
djhi
reviewed
Jan 1, 2019
| resource, | ||
| basePath, | ||
| children, | ||
| linkType, | ||
| ...rest | ||
| } = this.props; | ||
|
|
||
| if (loadedOnce === false) { | ||
| return <LinearProgress />; |
There was a problem hiding this comment.
Why not faking multiple lines here too ?
There was a problem hiding this comment.
SingleFieldList can contain anything (usually in-line <ChipField>) so I don’t think faking several lines does make sense here.
Besides, I just added the <LinearProgress> here because I removed it from <ReferenceManyField>: it’s now the responsibility of the child to display a loader, not the parent. That way, the loader can look like the upcoming content (e.g. data grid skeleton).
djhi
approved these changes
Jan 1, 2019
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
This PR slightly improves the User Experience by showing a skeleton datagrid during the first load instead of nothing. On slow networks, the previous user experience could lead the users to thing there is a bug.
Note that this only affects the first load. On subsequent renderings of the datagrid, react-admin still displays stale data while fetching up-to-date data (optimistic rendering).
The skeleton tries to minimize screen fickering by displaying checkboxes only when bulk actions are on, by showing as many columns as the datagrid has children, etc.
Incidentally, this also solves a UI problem that I used to think of "the lone record". When a users opens the app directly in a record detail page and goes back to the list, the list used to display only that record while loading the first page. Now it displays the skeleton instead.
Tested on
Datagriddirectly descending aList, and descending aReferenceManyField.Note that if the dataProvider fails fetching the list the first time, the skeleton will remain on screen. That's assumed.
Adds a new entry in the resource state to avoid changing the initial value of the list data or ids.
When React Suspense is a thing, we'll add a time threshold to display the skeleton only after a short delay.