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

[Skeleton] Improve wave dark mode support #20112

Merged
merged 3 commits into from
Mar 16, 2020

Conversation

oliviertassinari
Copy link
Member

The new strategy is to double the opacity for the wave animation. It seems to perform better:

  • In light mode, the emphasis is performed with a darker background, like Facebook
  • in dark mode, it looks much better

Before

Capture d’écran 2020-03-15 à 00 58 58

After

Capture d’écran 2020-03-15 à 00 58 48

@oliviertassinari oliviertassinari added new feature New feature or request component: skeleton This is the name of the generic UI component, not the React module! labels Mar 14, 2020
Copy link
Member

@eps1lon eps1lon left a comment

Choose a reason for hiding this comment

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

Did you reverse the images? "Before" has higher contrast. This should be preferred IMO.

@oliviertassinari
Copy link
Member Author

@eps1lon I think that the visual accessibility of the Skeleton should be completely ignored. The component targets users with good visual capabilities in the first place.

@eps1lon
Copy link
Member

eps1lon commented Mar 15, 2020

The component targets users with good visual capabilities in the first place.

Why would you exclude some people? Am I only allowed to orient myself in a perfectly light environment with perfect vision?

@oliviertassinari
Copy link
Member Author

oliviertassinari commented Mar 15, 2020

Why would you exclude some people? Am I only allowed to orient myself in a perfectly light environment with perfect vision?

I believe there is a tradeoff to find between how much contrast the element has and how good it "feels". The more contrast, the "uglier" it becomes. I have slithy increased the contrast.

@oliviertassinari oliviertassinari dismissed eps1lon’s stale review March 15, 2020 12:07

updated with more contrast

@eps1lon
Copy link
Member

eps1lon commented Mar 15, 2020

The more contrast, the "uglier" it becomes.

Well I disagree. It's ugly regardless of the contrast since it's just a block. But the purpose of it is that users can orient themselves. Not to act as decoration.

This reverts commit a530f7f.
@mui-pr-bot
Copy link

mui-pr-bot commented Mar 15, 2020

Details of bundle changes.

Comparing: eb1529f...e97ff40

Details of page changes
bundle Size Change Size Gzip Change Gzip
docs:chunks/3036d2b1d7f88a07c2e5a5bd28ab4e82bfbf325c.e4fec7.js ▲ +14.9 kB (+Infinity% ) 14.9 kB ▼ -1 B (-Infinity% ) -1 B
docs:chunks/d8a61a76539a37a9f65839de448a747ae8f13d75.e4fec7.js ▼ -14.9 kB (-100.00% ) 0 B ▲ +1 B (-100.00% ) 0 B
docs:chunks/32d42932f3b6849b72e958353e4762c41e094370.23d094.js ▲ +14.3 kB (+Infinity% ) 14.3 kB ▼ -1 B (-Infinity% ) -1 B
docs:chunks/7d3fbce2b1146805b782a8b65c543932d2f269fe.3bbb15.js ▼ -14.3 kB (-100.00% ) 0 B ▲ +1 B (-100.00% ) 0 B
docs:chunks/7315e1ad35e482bc7a0e04e0e92a16400ac01074.25a992.js ▼ -13.9 kB (-100.00% ) 0 B ▲ +1 B (-100.00% ) 0 B
docs:chunks/efa6cee5b9120f917cb80d97dcf68cbabec585b1.5cedd8.js ▲ +13.9 kB (+Infinity% ) 13.9 kB ▼ -1 B (-Infinity% ) -1 B
docs:chunks/46a677d0043c788cb4fc59a79dbffd6d4bfcaec5.74e66c.js ▲ +8.22 kB (+Infinity% ) 8.22 kB ▼ -1 B (-Infinity% ) -1 B
docs:chunks/996f79d13c1e19467c275bef016a9c90b5e22d8c.c16f0a.js ▼ -8.22 kB (-100.00% ) 0 B ▲ +1 B (-100.00% ) 0 B
docs:chunks/2e84835550e84ff3a90e5d2644ef4d9a20b91127.f1aa72.js ▲ +7.32 kB (+Infinity% ) 7.32 kB ▼ -1 B (-Infinity% ) -1 B
docs:chunks/3444ce7f09d47af3eb0acfcfc1e784b97b35d23c.f1aa72.js ▼ -7.32 kB (-100.00% ) 0 B ▲ +1 B (-100.00% ) 0 B
docs:runtime/main.1f9dd2.js ▼ -6.88 kB (-100.00% ) 0 B ▲ +1 B (-100.00% ) 0 B
docs:runtime/main.56ef79.js ▲ +6.88 kB (+Infinity% ) 6.88 kB ▼ -1 B (-Infinity% ) -1 B
docs:chunks/f08a496f5e16fc075d39c9eaac352e5053412c2d.b06403.js ▲ +5.74 kB (+Infinity% ) 5.74 kB ▼ -1 B (-Infinity% ) -1 B
docs:chunks/fde1981b0022417b87fc954da250a81377d0f396.b06403.js ▼ -5.74 kB (-100.00% ) 0 B ▲ +1 B (-100.00% ) 0 B
docs:chunks/2779aaa82217e18adc5eb29a8b3d78dc52a2f054.d0a0b7.js ▲ +2.81 kB (+Infinity% ) 2.81 kB ▼ -1 B (-Infinity% ) -1 B
docs:chunks/36d8c3017ad4a3987490f46f65a590939b34d6d8.d0a0b7.js ▼ -2.81 kB (-100.00% ) 0 B ▲ +1 B (-100.00% ) 0 B
docs:runtime/webpack.250784.js ▲ +1.24 kB (+Infinity% ) 1.24 kB ▼ -1 B (-Infinity% ) -1 B
docs:runtime/webpack.ae5c47.js ▼ -1.24 kB (-100.00% ) 0 B ▲ +1 B (-100.00% ) 0 B
/components/lists ▲ +100 B (+0.30% ) 33.1 kB -- -1 B
/components/toggle-button ▲ +100 B (+0.95% ) 10.6 kB -- -1 B
/customization/density ▲ +10 B (+0.11% ) 9.17 kB -- -1 B
/discover-more/team ▲ +10 B (+0.15% ) 6.51 kB -- -1 B
/getting-started/templates/blog ▲ +10 B (+0.13% ) 7.43 kB -- -1 B
/getting-started/templates/sign-in-side ▲ +10 B (+0.11% ) 9.32 kB -- -1 B
/performance/table-emotion ▲ +10 B (+0.34% ) 2.97 kB -- -1 B
/system/palette ▲ +10 B (+0.23% ) 4.29 kB -- -1 B
/_app -- 33.9 kB -- -1 B
/api-docs/alert-title -- 1.12 kB -- -1 B
/api-docs/alert -- 2.15 kB -- -1 B
/api-docs/app-bar -- 1.69 kB -- -1 B
/api-docs/autocomplete -- 3.86 kB -- -1 B
/api-docs/avatar-group -- 1.23 kB -- -1 B
/api-docs/avatar -- 1.61 kB -- -1 B
/api-docs/backdrop -- 1.38 kB -- -1 B
/api-docs/badge -- 1.88 kB -- -1 B
/api-docs/bottom-navigation-action -- 1.55 kB -- -1 B
/api-docs/bottom-navigation -- 1.43 kB -- -1 B
/api-docs/breadcrumbs -- 1.59 kB -- -1 B
/api-docs/button-base -- 2.08 kB -- -1 B
/api-docs/button-group -- 1.95 kB -- -1 B
/api-docs/button -- 2.32 kB -- -1 B
/api-docs/card-action-area -- 1.32 kB -- -1 B
/api-docs/card-actions -- 1.22 kB -- -1 B
/api-docs/card-content -- 1.2 kB -- -1 B
/api-docs/card-header -- 1.53 kB -- -1 B
/api-docs/card-media -- 1.43 kB -- -1 B
/api-docs/card -- 1.25 kB -- -1 B
/api-docs/checkbox -- 2.05 kB -- -1 B
/api-docs/chip -- 2.19 kB -- -1 B
/api-docs/circular-progress -- 1.8 kB -- -1 B
/api-docs/click-away-listener -- 1.13 kB -- -1 B
/api-docs/collapse -- 1.76 kB -- -1 B
/api-docs/container -- 1.62 kB -- -1 B
/api-docs/css-baseline -- 1.14 kB -- -1 B
/api-docs/dialog-actions -- 1.22 kB -- -1 B
/api-docs/dialog-content-text -- 1.23 kB -- -1 B
/api-docs/dialog-content -- 1.2 kB -- -1 B
/api-docs/dialog-title -- 1.26 kB -- -1 B
/api-docs/dialog -- 2.48 kB -- -1 B
/api-docs/divider -- 1.55 kB -- -1 B
/api-docs/drawer -- 1.87 kB -- -1 B
/api-docs/expansion-panel-actions -- 1.25 kB -- -1 B
/api-docs/expansion-panel-details -- 1.18 kB -- -1 B
/api-docs/expansion-panel-summary -- 1.46 kB -- -1 B
/api-docs/expansion-panel -- 1.7 kB -- -1 B
/api-docs/fab -- 1.86 kB -- -1 B
/api-docs/fade -- 1.17 kB -- -1 B
/api-docs/filled-input -- 2.65 kB -- -1 B
/api-docs/form-control-label -- 1.73 kB -- -1 B
/api-docs/form-control -- 2.1 kB -- -1 B
/api-docs/form-group -- 1.3 kB -- -1 B
/api-docs/form-helper-text -- 1.66 kB -- -1 B
/api-docs/form-label -- 1.59 kB -- -1 B
/api-docs/grid-list-tile-bar -- 1.54 kB -- -1 B
/api-docs/grid-list-tile -- 1.46 kB -- -1 B
/api-docs/grid-list -- 1.37 kB -- -1 B
/api-docs/grid -- 2.29 kB -- -1 B
/api-docs/grow -- 1.23 kB -- -1 B
/api-docs/hidden -- 1.32 kB -- -1 B
/api-docs/icon-button -- 1.85 kB -- -1 B
/api-docs/icon -- 1.54 kB -- -1 B
/api-docs/input-adornment -- 1.68 kB -- -1 B
/api-docs/input-base -- 2.74 kB -- -1 B
/api-docs/input-label -- 1.82 kB -- -1 B
/api-docs/input -- 2.61 kB -- -1 B
/api-docs/linear-progress -- 1.78 kB -- -1 B
/api-docs/link -- 1.68 kB -- -1 B
/api-docs/list-item-avatar -- 1.25 kB -- -1 B
/api-docs/list-item-icon -- 1.27 kB -- -1 B
/api-docs/list-item-secondary-action -- 1.22 kB -- -1 B
/api-docs/list-item-text -- 1.54 kB -- -1 B
/api-docs/list-item -- 2 kB -- -1 B
/api-docs/list-subheader -- 1.51 kB -- -1 B
/api-docs/list -- 1.44 kB -- -1 B
/api-docs/menu-item -- 1.46 kB -- -1 B
/api-docs/menu-list -- 1.33 kB -- -1 B
/api-docs/menu -- 2.12 kB -- -1 B
/api-docs/mobile-stepper -- 1.67 kB -- -1 B
/api-docs/modal -- 2.14 kB -- -1 B
/api-docs/native-select -- 1.83 kB -- -1 B
/api-docs/no-ssr -- 1.09 kB -- -1 B
/api-docs/outlined-input -- 2.76 kB -- -1 B
/api-docs/pagination-item -- 1.71 kB -- -1 B
/api-docs/pagination -- 1.98 kB -- -1 B
/api-docs/paper -- 1.61 kB -- -1 B
/api-docs/popover -- 2.5 kB -- -1 B
/api-docs/popper -- 1.76 kB -- -1 B
/api-docs/portal -- 1.12 kB -- -1 B
/api-docs/radio-group -- 1.2 kB -- -1 B
/api-docs/radio -- 1.89 kB -- -1 B
/api-docs/rating -- 2.25 kB -- -1 B
/api-docs/root-ref -- 1.2 kB -- -1 B
/api-docs/scoped-css-baseline -- 1.15 kB -- -1 B
/api-docs/select -- 2.65 kB -- -1 B
/api-docs/skeleton -- 1.52 kB -- -1 B
/api-docs/slide -- 1.31 kB -- -1 B
/api-docs/slider -- 2.85 kB -- -1 B
/api-docs/snackbar-content -- 1.36 kB -- -1 B
/api-docs/snackbar -- 2.46 kB -- -1 B
/api-docs/speed-dial-action -- 1.67 kB -- -1 B
/api-docs/speed-dial-icon -- 1.29 kB -- -1 B
/api-docs/speed-dial -- 2.05 kB -- -1 B
/api-docs/step-button -- 1.38 kB -- -1 B
/api-docs/step-connector -- 1.29 kB -- -1 B
/api-docs/step-content -- 1.47 kB -- -1 B
/api-docs/step-icon -- 1.33 kB -- -1 B
/api-docs/step-label -- 1.64 kB -- -1 B
/api-docs/step -- 1.38 kB -- -1 B
/api-docs/stepper -- 1.6 kB -- -1 B
/api-docs/svg-icon -- 2.01 kB -- -1 B
/api-docs/swipeable-drawer -- 1.78 kB -- -1 B
/api-docs/switch -- 2.19 kB -- -1 B
/api-docs/tab -- 1.74 kB -- -1 B
/api-docs/table-body -- 1.21 kB -- -1 B
/api-docs/table-cell -- 1.87 kB -- -1 B
/api-docs/table-container -- 1.22 kB -- -1 B
/api-docs/table-footer -- 1.22 kB -- -1 B
/api-docs/table-head -- 1.21 kB -- -1 B
/api-docs/table-pagination -- 2.21 kB -- -1 B
/api-docs/table-row -- 1.43 kB -- -1 B
/api-docs/table-sort-label -- 1.57 kB -- -1 B
/api-docs/table -- 1.43 kB -- -1 B
/api-docs/tabs -- 2.28 kB -- -1 B
/api-docs/text-field -- 2.94 kB -- -1 B
/api-docs/textarea-autosize -- 908 B -- -1 B
/api-docs/toggle-button-group -- 1.56 kB -- -1 B
/api-docs/toggle-button -- 1.55 kB -- -1 B
/api-docs/toolbar -- 1.4 kB -- -1 B
/api-docs/tooltip -- 2.3 kB -- -1 B
/api-docs/tree-item -- 1.53 kB -- -1 B
/api-docs/tree-view -- 1.67 kB -- -1 B
/api-docs/typography -- 2.33 kB -- -1 B
/api-docs/zoom -- 1.19 kB -- -1 B
/blog/2019-developer-survey-results -- 5.94 kB -- -1 B
/blog/2019 -- 3.82 kB -- -1 B
/blog/april-2019-update -- 2.71 kB -- -1 B
/blog/august-2019-update -- 1.82 kB -- -1 B
/blog/december-2019-update -- 1.96 kB -- -1 B
/blog/july-2019-update -- 1.71 kB -- -1 B
/blog/june-2019-update -- 1.58 kB -- -1 B
/blog/march-2019-update -- 2.12 kB -- -1 B
/blog/material-ui-v1-is-out -- 6.25 kB -- -1 B
/blog/material-ui-v4-is-out -- 9.28 kB -- -1 B
/blog/may-2019-update -- 1.91 kB -- -1 B
/blog/november-2019-update -- 2.32 kB -- -1 B
/blog/october-2019-update -- 2.06 kB -- -1 B
/blog/september-2019-update -- 2.25 kB -- -1 B
/company/about -- 1.51 kB -- -1 B
/company/contact -- 1.1 kB -- -1 B
/company/jobs -- 1.11 kB -- -1 B
/company/software-engineer -- 5.03 kB -- -1 B
/components/about-the-lab -- 3.19 kB -- -1 B
/components/alert -- 11.1 kB -- -1 B
/components/app-bar -- 30.9 kB -- -1 B
/components/autocomplete -- 106 kB -- -1 B
/components/avatars -- 8.48 kB -- -1 B
/components/backdrop -- 3.51 kB -- -1 B
/components/badges -- 14.2 kB -- -1 B
/components/bottom-navigation -- 6.22 kB -- -1 B
/components/box -- 7.96 kB -- -1 B
/components/breadcrumbs -- 14.4 kB -- -1 B
/components/button-group -- 6.56 kB -- -1 B
/components/buttons -- 17.6 kB -- -1 B
/components/cards -- 16.8 kB -- -1 B
/components/checkboxes -- 16.9 kB -- -1 B
/components/chips -- 21.6 kB -- -1 B
/components/click-away-listener -- 3.39 kB -- -1 B
/components/container -- 3.6 kB -- -1 B
/components/css-baseline -- 5.86 kB -- -1 B
/components/dialogs -- 42.1 kB -- -1 B
/components/dividers -- 12.1 kB -- -1 B
/components/drawers -- 30.3 kB -- -1 B
/components/expansion-panels -- 20.1 kB -- -1 B
/components/floating-action-button -- 10.2 kB -- -1 B
/components/grid-list -- 11.9 kB -- -1 B
/components/grid -- 33.4 kB -- -1 B
/components/hidden -- 10.5 kB -- -1 B
/components/icons -- 22.3 kB -- -1 B
/components/links -- 6.83 kB -- -1 B
/components/material-icons -- 708 kB -- -1 B
/components/menus -- 23.3 kB -- -1 B
/components/modal -- 11.5 kB -- -1 B
/components/no-ssr -- 5.02 kB -- -1 B
/components/pagination -- 6.75 kB -- -1 B
/components/paper -- 3.34 kB -- -1 B
/components/pickers -- 38.1 kB -- -1 B
/components/popover -- 14.7 kB -- -1 B
/components/popper -- 22.5 kB -- -1 B
/components/portal -- 3.29 kB -- -1 B
/components/progress -- 21.8 kB -- -1 B
/components/radio-buttons -- 15.5 kB -- -1 B
/components/rating -- 10.7 kB -- -1 B
/components/selects -- 25.2 kB -- -1 B
/components/skeleton -- 10.1 kB -- -1 B
/components/slider -- 14.5 kB -- -1 B
/components/snackbars -- 24.8 kB -- -1 B
/components/speed-dial -- 14.6 kB -- -1 B
/components/steppers -- 35.9 kB -- -1 B
/components/switches -- 16.5 kB -- -1 B
/components/tables -- 176 kB -- -1 B
/components/tabs -- 19.3 kB -- -1 B
/components/text-fields -- 53 kB -- -1 B
/components/textarea-autosize -- 2.81 kB -- -1 B
/components/tooltips -- 17.3 kB -- -1 B
/components/transfer-list -- 9.3 kB -- -1 B
/components/transitions -- 10.8 kB -- -1 B
/components/tree-view -- 11.1 kB -- -1 B
/components/typography -- 9.67 kB -- -1 B
/components/use-media-query -- 13.1 kB -- -1 B
/customization/breakpoints -- 15.2 kB -- -1 B
/customization/color -- 21.6 kB -- -1 B
/customization/components -- 37.9 kB -- -1 B
/customization/default-theme -- 7.99 kB -- -1 B
/customization/globals -- 4.65 kB -- -1 B
/customization/palette -- 11.8 kB -- -1 B
/customization/spacing -- 2.51 kB -- -1 B
/customization/theming -- 17.4 kB -- -1 B
/customization/typography -- 10.9 kB -- -1 B
/customization/z-index -- 3.03 kB -- -1 B
/discover-more/backers -- 2.89 kB -- -1 B
/discover-more/changelog -- 1.37 kB -- -1 B
/discover-more/languages -- 3.32 kB -- -1 B
/discover-more/related-projects -- 6.02 kB -- -1 B
/discover-more/roadmap -- 3.67 kB -- -1 B
/discover-more/showcase -- 13.3 kB -- -1 B
/discover-more/vision -- 7.03 kB -- -1 B
/getting-started/example-projects -- 6.17 kB -- -1 B
/getting-started/faq -- 31.8 kB -- -1 B
/getting-started/installation -- 7.05 kB -- -1 B
/getting-started/learn -- 7.88 kB -- -1 B
/getting-started/support -- 9.7 kB -- -1 B
/getting-started/supported-components -- 6.19 kB -- -1 B
/getting-started/supported-platforms -- 5.69 kB -- -1 B
/getting-started/templates -- 8.1 kB -- -1 B
/getting-started/templates/album -- 5.66 kB -- -1 B
/getting-started/templates/checkout -- 11.2 kB -- -1 B
/getting-started/templates/dashboard -- 8.56 kB -- -1 B
/getting-started/templates/pricing -- 7.86 kB -- -1 B
/getting-started/templates/sign-in -- 9.54 kB -- -1 B
/getting-started/templates/sign-up -- 9.65 kB -- -1 B
/getting-started/templates/sticky-footer -- 1.54 kB -- -1 B
/getting-started/usage -- 9.37 kB -- -1 B
/guides/api -- 17.4 kB -- -1 B
/guides/composition -- 14 kB -- -1 B
/guides/flow -- 2.21 kB -- -1 B
/guides/interoperability -- 10.8 kB -- -1 B
/guides/localization -- 19.7 kB -- -1 B
/guides/migration-v0x -- 7.23 kB -- -1 B
/guides/migration-v3 -- 20.8 kB -- -1 B
/guides/minimizing-bundle-size -- 8.86 kB -- -1 B
/guides/responsive-ui -- 4.16 kB -- -1 B
/guides/right-to-left -- 6.7 kB -- -1 B
/guides/server-rendering -- 8.38 kB -- -1 B
/guides/testing -- 8.33 kB -- -1 B
/guides/typescript -- 12.8 kB -- -1 B
/performance/table-component -- 1.44 kB -- -1 B
/performance/table-hook -- 2.22 kB -- -1 B
/performance/table-mui -- 4.34 kB -- -1 B
/performance/table-raw -- 613 B -- -1 B
/performance/table-styled-components -- 2.61 kB -- -1 B
/premium-themes/onepirate -- 7.11 kB -- -1 B
/premium-themes/onepirate/forgot-password -- 1.01 kB -- -1 B
/premium-themes/onepirate/privacy -- 4.44 kB -- -1 B
/premium-themes/onepirate/sign-in -- 1.07 kB -- -1 B
/premium-themes/onepirate/sign-up -- 1.12 kB -- -1 B
/premium-themes/onepirate/terms -- 11.8 kB -- -1 B
/premium-themes/paperbase -- 8.73 kB -- -1 B
/styles/advanced -- 30.2 kB -- -1 B
/styles/api -- 16 kB -- -1 B
/styles/basics -- 17.2 kB -- -1 B
/system/api -- 5.85 kB -- -1 B
/system/basics -- 25.2 kB -- -1 B
/system/borders -- 4.04 kB -- -1 B
/system/display -- 6.2 kB -- -1 B
/system/flexbox -- 5.71 kB -- -1 B
/system/positions -- 2.46 kB -- -1 B
/system/shadows -- 3.44 kB -- -1 B
/system/sizing -- 3.34 kB -- -1 B
/system/spacing -- 6.05 kB -- -1 B
/system/typography -- 4.22 kB -- -1 B
/versions -- 22.7 kB -- -1 B
docs:chunks/commons.5243ee.js -- 5.99 kB -- -1 B
docs:chunks/framework.460644.js -- 42.3 kB -- -1 B
bundle Size Change Size Gzip Change Gzip
@material-ui/lab ▲ +10 B (+0.01% ) 199 kB ▲ +2 B (0.00% ) 59 kB
Skeleton ▲ +10 B (+0.02% ) 66.3 kB -- 20.9 kB
@material-ui/core -- 360 kB -- 98.8 kB
@material-ui/core[umd] -- 318 kB -- 92.2 kB
@material-ui/styles -- 51.4 kB -- 15.4 kB
@material-ui/system -- 16.6 kB -- 4.31 kB
Alert -- 86.6 kB -- 27.3 kB
AlertTitle -- 67.5 kB -- 21.2 kB
AppBar -- 67.4 kB -- 21.1 kB
Autocomplete -- 135 kB -- 42.2 kB
Avatar -- 68.5 kB -- 21.7 kB
AvatarGroup -- 65.7 kB -- 20.6 kB
Backdrop -- 71.2 kB -- 21.9 kB
Badge -- 68.7 kB -- 21.3 kB
BottomNavigation -- 65.8 kB -- 20.6 kB
BottomNavigationAction -- 78.8 kB -- 24.9 kB
Box -- 72.3 kB -- 21.8 kB
Breadcrumbs -- 83.6 kB -- 26.5 kB
Button -- 83 kB -- 25.4 kB
ButtonBase -- 77.3 kB -- 24.2 kB
ButtonGroup -- 86.5 kB -- 26.6 kB
Card -- 66.2 kB -- 20.7 kB
CardActionArea -- 78.4 kB -- 24.7 kB
CardActions -- 65.4 kB -- 20.5 kB
CardContent -- 65.3 kB -- 20.4 kB
CardHeader -- 68.4 kB -- 21.5 kB
CardMedia -- 65.7 kB -- 20.6 kB
Checkbox -- 85.4 kB -- 27 kB
Chip -- 85.9 kB -- 26.3 kB
CircularProgress -- 67.5 kB -- 21.2 kB
ClickAwayListener -- 3.84 kB -- 1.54 kB
Collapse -- 71.3 kB -- 22 kB
colorManipulator -- 3.88 kB -- 1.52 kB
Container -- 66.5 kB -- 20.8 kB
CssBaseline -- 65.3 kB -- 20.5 kB
Dialog -- 86.2 kB -- 26.9 kB
DialogActions -- 65.4 kB -- 20.5 kB
DialogContent -- 65.6 kB -- 20.5 kB
DialogContentText -- 67.4 kB -- 21.1 kB
DialogTitle -- 67.6 kB -- 21.2 kB
Divider -- 66 kB -- 20.7 kB
docs:/ -- 10.4 kB -- -1 B
docs:/_app -- 33.9 kB -- -1 B
Drawer -- 87.9 kB -- 26.8 kB
ExpansionPanel -- 74.9 kB -- 23.5 kB
ExpansionPanelActions -- 65.4 kB -- 20.5 kB
ExpansionPanelDetails -- 65.3 kB -- 20.4 kB
ExpansionPanelSummary -- 81.4 kB -- 25.7 kB
Fab -- 80.1 kB -- 24.9 kB
Fade -- 27.1 kB -- 9.04 kB
FilledInput -- 76.9 kB -- 23.9 kB
FormControl -- 67.7 kB -- 21.1 kB
FormControlLabel -- 68.8 kB -- 21.6 kB
FormGroup -- 65.4 kB -- 20.5 kB
FormHelperText -- 66.7 kB -- 20.7 kB
FormLabel -- 66.8 kB -- 20.7 kB
Grid -- 68.5 kB -- 21.4 kB
GridList -- 65.8 kB -- 20.6 kB
GridListTile -- 67.1 kB -- 21 kB
GridListTileBar -- 66.6 kB -- 20.8 kB
Grow -- 27.7 kB -- 9.25 kB
Hidden -- 69.3 kB -- 21.7 kB
Icon -- 66.1 kB -- 20.7 kB
IconButton -- 79.4 kB -- 24.8 kB
Input -- 75.9 kB -- 23.7 kB
InputAdornment -- 68.4 kB -- 21.5 kB
InputBase -- 74 kB -- 23.2 kB
InputLabel -- 68.6 kB -- 21.2 kB
LinearProgress -- 68.7 kB -- 21.2 kB
Link -- 69.9 kB -- 22.1 kB
List -- 65.7 kB -- 20.4 kB
ListItem -- 80.3 kB -- 25.1 kB
ListItemAvatar -- 65.5 kB -- 20.5 kB
ListItemIcon -- 65.5 kB -- 20.5 kB
ListItemSecondaryAction -- 65.4 kB -- 20.4 kB
ListItemText -- 68.3 kB -- 21.5 kB
ListSubheader -- 66.1 kB -- 20.8 kB
Menu -- 91.8 kB -- 28.3 kB
MenuItem -- 81.4 kB -- 25.4 kB
MenuList -- 69.3 kB -- 21.7 kB
MobileStepper -- 71.2 kB -- 22.3 kB
Modal -- 14.3 kB -- 5.04 kB
NativeSelect -- 80.1 kB -- 25.3 kB
NoSsr -- 2.17 kB -- 1.03 kB
OutlinedInput -- 77.9 kB -- 24.2 kB
Pagination -- 87.6 kB -- 27 kB
PaginationItem -- 84 kB -- 25.9 kB
Paper -- 65.7 kB -- 20.5 kB
Popover -- 86.3 kB -- 26.7 kB
Popper -- 28.8 kB -- 10.3 kB
Portal -- 2.87 kB -- 1.29 kB
Radio -- 86.4 kB -- 27.3 kB
RadioGroup -- 67.1 kB -- 20.8 kB
Rating -- 73.8 kB -- 23.7 kB
RootRef -- 4.21 kB -- 1.64 kB
ScopedCssBaseline -- 66.2 kB -- 20.7 kB
Select -- 119 kB -- 35.3 kB
Slide -- 29.1 kB -- 9.78 kB
Slider -- 79.1 kB -- 25.2 kB
Snackbar -- 78.6 kB -- 24.5 kB
SnackbarContent -- 66.9 kB -- 21 kB
SpeedDial -- 89.4 kB -- 28.3 kB
SpeedDialAction -- 121 kB -- 38.4 kB
SpeedDialIcon -- 67.9 kB -- 21.3 kB
Step -- 66 kB -- 20.7 kB
StepButton -- 85.5 kB -- 27 kB
StepConnector -- 66.1 kB -- 20.8 kB
StepContent -- 72.5 kB -- 22.6 kB
StepIcon -- 67.9 kB -- 21.2 kB
StepLabel -- 71.9 kB -- 22.2 kB
Stepper -- 68.2 kB -- 21.5 kB
styles/createMuiTheme -- 20.9 kB -- 7.27 kB
SvgIcon -- 66.4 kB -- 20.7 kB
SwipeableDrawer -- 95.3 kB -- 29.9 kB
Switch -- 84.6 kB -- 26.5 kB
Tab -- 79.6 kB -- 25.3 kB
Table -- 65.9 kB -- 20.6 kB
TableBody -- 65.4 kB -- 20.4 kB
TableCell -- 67.4 kB -- 21.2 kB
TableContainer -- 65.3 kB -- 20.4 kB
TableFooter -- 65.5 kB -- 20.5 kB
TableHead -- 65.5 kB -- 20.5 kB
TablePagination -- 145 kB -- 42.6 kB
TableRow -- 65.8 kB -- 20.6 kB
TableSortLabel -- 80.6 kB -- 25.5 kB
Tabs -- 88.6 kB -- 28.3 kB
TextareaAutosize -- 5.19 kB -- 2.17 kB
TextField -- 127 kB -- 37.3 kB
ToggleButton -- 79.4 kB -- 25.1 kB
ToggleButtonGroup -- 66.5 kB -- 20.9 kB
Toolbar -- 65.7 kB -- 20.6 kB
Tooltip -- 105 kB -- 33.1 kB
TreeItem -- 78.5 kB -- 24.8 kB
TreeView -- 71.5 kB -- 22.4 kB
Typography -- 67 kB -- 20.9 kB
useAutocomplete -- 15 kB -- 5.38 kB
useMediaQuery -- 2.56 kB -- 1.06 kB
Zoom -- 27.1 kB -- 9.17 kB

Generated by 🚫 dangerJS against e97ff40

@oliviertassinari
Copy link
Member Author

oliviertassinari commented Mar 15, 2020

I have reverted that last commit, it looked better will less contrast.

I think that the take away is that this animation isn't very important. It's better to have it only visible in great contrast conditions (for people that start to wonder if the app hasn't frozen) than something that catches the attention for no reason and feels off.

@oliviertassinari oliviertassinari merged commit 1d20156 into mui:master Mar 16, 2020
@oliviertassinari oliviertassinari deleted the skeleton-wave-dark-mode branch March 16, 2020 13:27
EsoterikStare pushed a commit to EsoterikStare/material-ui that referenced this pull request Mar 30, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: skeleton This is the name of the generic UI component, not the React module! new feature New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants