[docs] Reduce image size in the inventory grid demo #19004
Conversation
|
Deploy preview: https://deploy-preview-19004--material-ui-x.netlify.app/ Bundle size report
|
|
Not sure if you already have these issues in a todo, but the rating seems to be cut off in desktop and the experience seems a bit weird in mobile: Screen.Recording.2025-08-01.at.08.57.28.mov |
| @@ -33,7 +33,7 @@ export const products: Product[] = [ | |||
| incoming: 30, | |||
| colors: ['Black', 'Silver'], | |||
| image: | |||
| 'https://images.pexels.com/photos/1983037/pexels-photo-1983037.jpeg?_gl=1*bf4yfr*_ga*OTUxMzk3MTE0LjE3NTAxOTYyMTM.*_ga_8JE65Q40S6*czE3NTAxOTYyMTMkbzEkZzEkdDE3NTAxOTYyMjgkajQ1JGwwJGgw', | |||
| 'https://images.pexels.com/photos/1983037/pexels-photo-1983037.jpeg?w=120&h=120&fit=crop', | |||
There was a problem hiding this comment.
Should we self-host these? I wonder if we might face throttling or the images might become unavailable.
There was a problem hiding this comment.
There is a TODO above to update images, but I left that task out of this PR
Update could also include putting them in our assets
CC @alelthomas
There was a problem hiding this comment.
Yup - adding them to our assets as we did the avatars for the PTO Calendar
My impression was that there is a follow up (based on #18180 (comment)), but I am not sure where to find it I saw that issues with the ratings, but I also noticed that we put labels in the aggregation in a different columns that the values related to those labels, which looks fine initially, but gets broken if you re-order columns |
docs/src/modules/components/demos/data-grid/Inventory/data/products.ts
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Nitpick
I have resized the images down to 120x120 - double than the image size from styles - because of retina displays
They have an API option dpr (device pixel ratio) for this.
Using that might yield better results. 🤷
There was a problem hiding this comment.
not all images are from the same platform, so I will leave this out for a follow up
I created #18994 to work on the container and visualization issues given that everything looks very constrained still with the current setup. I'm planning on fixing these there! |
b6f6892 to
5badd27
Compare
Reduces total download for all images in the demo from ~5MB to ~90kB.
I have resized the images down to 120x120 - double than the image size from styles - because of retina displays
I have also made master/detail props static, as it is suggested in https://mui.com/x/react-data-grid/master-detail
Preview
https://deploy-preview-19004--material-ui-x.netlify.app/x/react-data-grid/demos/inventory/