Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[docs] Fix flag layout shift #3773

Merged
merged 1 commit into from Jan 31, 2022

Conversation

oliviertassinari
Copy link
Member

@oliviertassinari oliviertassinari commented Jan 29, 2022

Open https://master--material-ui-x.netlify.app/components/data-grid/demo/. The width of the flag change between no loaded and loaded img:

Screenshot 2022-01-29 at 01 31 01

This creates a layout shift which is distracting. To be clear, this is a low value fix, but I noticed it, knew the solution as I faced it with the Autocomplete's demo already so went for it: small improvements like this compound.

Preview: https://deploy-preview-3773--material-ui-x.netlify.app/components/data-grid/demo/

@oliviertassinari oliviertassinari added the docs Improvements or additions to the documentation label Jan 29, 2022
@@ -19,13 +19,15 @@ const Country = React.memo(function Country(props: CountryProps) {
display: 'flex',
alignItems: 'center',
'& > img': {
mr: '4px',
mr: 0.5,
flexShrink: 0,
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The fix

@mui-bot
Copy link

mui-bot commented Jan 29, 2022

These are the results for the performance tests:

Test case Unit Min Max Median Mean σ
Filter 100k rows ms 1,163.6 1,892.7 1,193.9 1,462.26 344.616
Sort 100k rows ms 683.9 1,190.1 1,190.1 984.34 218.238
Select 100k rows ms 139.5 280.9 180.3 196 48.04
Deselect 100k rows ms 109.5 181.9 119.1 131.46 26.433

Generated by 🚫 dangerJS against dce5282

@oliviertassinari oliviertassinari added the component: data grid This is the name of the generic UI component, not the React module! label Jan 29, 2022
@oliviertassinari oliviertassinari merged commit 0348caa into mui:master Jan 31, 2022
@oliviertassinari oliviertassinari deleted the fix-layout-shift branch January 31, 2022 17:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: data grid This is the name of the generic UI component, not the React module! docs Improvements or additions to the documentation
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants