From b36e9fe70e6b4ee21d1e68093c792de561feded8 Mon Sep 17 00:00:00 2001 From: Marc Thomas Date: Wed, 12 Oct 2022 20:11:14 +0100 Subject: [PATCH 1/9] chore: update loading state --- .../src/components/IndexTable/IndexTable.scss | 18 ++++++++ .../src/components/IndexTable/IndexTable.tsx | 44 ++----------------- .../IndexTable/tests/IndexTable.test.tsx | 6 ++- 3 files changed, 25 insertions(+), 43 deletions(-) diff --git a/polaris-react/src/components/IndexTable/IndexTable.scss b/polaris-react/src/components/IndexTable/IndexTable.scss index 88242d3e23c..0a9d4ace04b 100644 --- a/polaris-react/src/components/IndexTable/IndexTable.scss +++ b/polaris-react/src/components/IndexTable/IndexTable.scss @@ -74,6 +74,24 @@ $loading-panel-height: 53px; border-collapse: collapse; } +@keyframes shimmer { + 0% { + background: var(--p-surface); + } + 50% { + background: var(--p-surface-hovered); + } + 100% { + background: var(--p-surface); + } +} + +.Table-loading { + td { + animation: shimmer 1s infinite; + } +} + .Table-scrolling { // stylelint-disable-next-line selector-max-class, selector-max-combinators .TableCell-first, diff --git a/polaris-react/src/components/IndexTable/IndexTable.tsx b/polaris-react/src/components/IndexTable/IndexTable.tsx index 397fac4d8ca..0267ebf323d 100644 --- a/polaris-react/src/components/IndexTable/IndexTable.tsx +++ b/polaris-react/src/components/IndexTable/IndexTable.tsx @@ -4,8 +4,7 @@ import { SortAscendingMajor, SortDescendingMajor, } from '@shopify/polaris-icons'; -import {CSSTransition} from 'react-transition-group'; -import {tokens, toPx, motion} from '@shopify/polaris-tokens'; +import {tokens, toPx} from '@shopify/polaris-tokens'; import {debounce} from '../../utilities/debounce'; import {useToggle} from '../../utilities/use-toggle'; @@ -17,7 +16,6 @@ import {EmptySearchResult} from '../EmptySearchResult'; import {EventListener} from '../EventListener'; import {Stack} from '../Stack'; import {Sticky} from '../Sticky'; -import {Spinner} from '../Spinner'; import {VisuallyHidden} from '../VisuallyHidden'; import {Button} from '../Button'; import {Tooltip} from '../Tooltip'; @@ -505,37 +503,6 @@ function IndexTableBase({ const paginatedSelectAllAction = getPaginatedSelectAllAction(); - const loadingTransitionClassNames = { - enter: styles['LoadingContainer-enter'], - enterActive: styles['LoadingContainer-enter-active'], - exit: styles['LoadingContainer-exit'], - exitActive: styles['LoadingContainer-exit-active'], - }; - - const loadingMarkup = ( - -
-
- - - {i18n.translate( - 'Polaris.IndexTable.resourceLoadingAccessibilityLabel', - { - resourceNamePlural: resourceName.plural.toLocaleLowerCase(), - }, - )} - -
-
- - ); - const stickyTableClassNames = classNames( styles.StickyTable, condensed && styles['StickyTable-condensed'], @@ -565,7 +532,6 @@ function IndexTableBase({ const bulkActionsMarkup = shouldShowBulkActions ? (
- {loadingMarkup} - {loadingMarkup} {sort} {selectable && selectButtonMarkup}
@@ -616,7 +581,6 @@ function IndexTableBase({ className={stickyHeaderClassNames} ref={stickyHeaderWrapperElement} > - {loadingMarkup}
{stickyColumnHeader}
@@ -671,6 +635,7 @@ function IndexTableBase({ const tableClassNames = classNames( styles.Table, + loading && styles['Table-loading'], hasMoreLeftColumns && styles['Table-scrolling'], selectMode && styles.disableTextSelection, selectMode && shouldShowBulkActions && styles.selectMode, @@ -739,10 +704,7 @@ function IndexTableBase({ return ( <> -
- {!shouldShowBulkActions && !condensed && loadingMarkup} - {tableContentMarkup} -
+
{tableContentMarkup}
{scrollBarMarkup} ); diff --git a/polaris-react/src/components/IndexTable/tests/IndexTable.test.tsx b/polaris-react/src/components/IndexTable/tests/IndexTable.test.tsx index 206aca0e593..256ff162d78 100644 --- a/polaris-react/src/components/IndexTable/tests/IndexTable.test.tsx +++ b/polaris-react/src/components/IndexTable/tests/IndexTable.test.tsx @@ -102,14 +102,16 @@ describe('', () => { expect(index).toContainReactComponentTimes(Component, 2); }); - it('renders a spinner if loading is passed', () => { + it('passes a class if loading is passed', () => { const index = mountWithApp( {mockTableItems.map(mockRenderRow)} , ); - expect(index).toContainReactComponent(Spinner); + expect(index).toContainReactComponent('table', { + className: expect.stringContaining('Table-loading'), + }); }); it('toggles page selection when select all checkbox is changed', () => { From 52bb7886e7e0a4c5d0d453fcd7babf84d839bbb6 Mon Sep 17 00:00:00 2001 From: Marc Thomas Date: Wed, 12 Oct 2022 20:14:11 +0100 Subject: [PATCH 2/9] chore: add changeset --- .changeset/famous-penguins-tap.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/famous-penguins-tap.md diff --git a/.changeset/famous-penguins-tap.md b/.changeset/famous-penguins-tap.md new file mode 100644 index 00000000000..3df3540eaed --- /dev/null +++ b/.changeset/famous-penguins-tap.md @@ -0,0 +1,5 @@ +--- +'@shopify/polaris': minor +--- + +Updates the loading state of the `IndexTable` From 547ca4f071ebfa231026f7877089b7b772085455 Mon Sep 17 00:00:00 2001 From: Marc Thomas Date: Thu, 13 Oct 2022 12:18:22 +0100 Subject: [PATCH 3/9] chore: improve loading state --- .../src/components/IndexTable/IndexTable.scss | 75 +++--- .../IndexTable/IndexTable.stories.tsx | 233 ++++++++++++++++++ .../src/components/IndexTable/IndexTable.tsx | 7 +- 3 files changed, 286 insertions(+), 29 deletions(-) diff --git a/polaris-react/src/components/IndexTable/IndexTable.scss b/polaris-react/src/components/IndexTable/IndexTable.scss index 0a9d4ace04b..666d7105ea3 100644 --- a/polaris-react/src/components/IndexTable/IndexTable.scss +++ b/polaris-react/src/components/IndexTable/IndexTable.scss @@ -76,19 +76,48 @@ $loading-panel-height: 53px; @keyframes shimmer { 0% { - background: var(--p-surface); - } - 50% { - background: var(--p-surface-hovered); + background-position: 200% 0%; } 100% { - background: var(--p-surface); + background-position: 0%; } } .Table-loading { - td { - animation: shimmer 1s infinite; + tbody tr { + background: linear-gradient( + 90deg, + var(--p-surface) 40%, + var(--p-surface-hovered) 50%, + var(--p-surface) 60% + ); + background-size: 200% 100%; + animation: shimmer 2s infinite var(--p-ease-in-out); + } + + @for $stagger from 1 through 25 { + tbody tr:nth-child(25n + #{$stagger}) { + animation-delay: $stagger / 25 * 2s; + } + } +} + +.CondensedList-loading { + li { + background: linear-gradient( + 90deg, + var(--p-surface) 40%, + var(--p-surface-hovered) 50%, + var(--p-surface) 60% + ); + background-size: 200% 100%; + animation: shimmer 2s infinite var(--p-ease-in-out); + } + + @for $stagger from 1 through 10 { + li:nth-child(10n + #{$stagger}) { + animation-delay: $stagger / 10 * 2s; + } } } @@ -145,49 +174,39 @@ $loading-panel-height: 53px; } &.statusSuccess { - // stylelint-disable-next-line selector-max-combinators, selector-max-class, selector-max-specificity - &, - .TableCell-first, - .TableCell-first + .TableCell { + // stylelint-disable-next-line selector-max-class + .TableCell { background-color: var(--p-surface-primary-selected); } } &.statusSubdued { - // stylelint-disable-next-line selector-max-combinators, selector-max-class, selector-max-specificity - &, - .TableCell-first, - .TableCell-first + .TableCell { + // stylelint-disable-next-line selector-max-class + .TableCell { background-color: var(--p-surface-subdued); } } &.TableRow-hovered { - // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity - &, - .TableCell-first, - .TableCell-first + .TableCell { + // stylelint-disable-next-line selector-max-class + .TableCell { background-color: var(--p-surface-hovered); } } &.TableRow-selected { - // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity - &, + // stylelint-disable-next-line selector-max-class + .TableCell, .TableHeading-first, - .TableHeading-second, - .TableCell-first, - .TableCell-first + .TableCell { + .TableHeading-second { background-color: var(--p-surface-selected); } } // stylelint-disable-next-line selector-max-class &.TableRow-hovered.TableRow-selected { - // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity - &, - .TableCell-first, - .TableCell-first + .TableCell { + // stylelint-disable-next-line selector-max-class + .TableCell { background-color: var(--p-surface-selected-hovered); } } diff --git a/polaris-react/src/components/IndexTable/IndexTable.stories.tsx b/polaris-react/src/components/IndexTable/IndexTable.stories.tsx index 4708780d521..cb21a3b979c 100644 --- a/polaris-react/src/components/IndexTable/IndexTable.stories.tsx +++ b/polaris-react/src/components/IndexTable/IndexTable.stories.tsx @@ -223,6 +223,159 @@ export function SmallScreen() { ); } +export function SmallScreenLoading() { + const customers = [ + { + id: '3415', + url: 'customers/341', + name: 'Mae Jemison', + location: 'Decatur, USA', + orders: 20, + amountSpent: '$2,400', + }, + { + id: '2565', + url: 'customers/256', + name: 'Ellen Ochoa', + location: 'Los Angeles, USA', + orders: 30, + amountSpent: '$140', + }, + { + id: '1234', + url: 'customers/341', + name: 'David Reynolds', + location: 'Phoenix, USA', + orders: 4, + amountSpent: '$84', + }, + { + id: '1289', + url: 'customers/256', + name: 'Jennifer Jennings', + location: 'Boise, USA', + orders: 62, + amountSpent: '$542', + }, + { + id: '9874', + url: 'customers/341', + name: 'Robert Bradley', + location: 'Seattle, USA', + orders: 21, + amountSpent: '$450', + }, + { + id: '4873', + url: 'customers/256', + name: 'Brian Johnson', + location: 'San Diego, USA', + orders: 35, + amountSpent: '$765', + }, + { + id: '9082', + url: 'customers/341', + name: 'Kimberley Rogers', + location: 'Kansas City, USA', + orders: 36, + amountSpent: '$1,230', + }, + { + id: '3627', + url: 'customers/256', + name: 'Nina Rodriguez', + location: 'Mobile, USA', + orders: 67, + amountSpent: '$986', + }, + { + id: '4328', + url: 'customers/341', + name: 'Pam Mahoney', + location: 'Austin, USA', + orders: 24, + amountSpent: '$2,300', + }, + { + id: '2635', + url: 'customers/256', + name: 'Joe Talbot', + location: 'Tacoma, USA', + orders: 5, + amountSpent: '$86', + }, + { + id: '0982', + url: 'customers/341', + name: 'Billy Parker', + location: 'Madison, USA', + orders: 87, + amountSpent: '$1,930', + }, + { + id: '8326', + url: 'customers/256', + name: 'Ahmed Mahmood', + location: 'Portland, USA', + orders: 34, + amountSpent: '$243', + }, + ]; + const resourceName = { + singular: 'customer', + plural: 'customers', + }; + + const {selectedResources, allResourcesSelected, handleSelectionChange} = + useIndexResourceState(customers); + + const rowMarkup = customers.map( + ({id, name, location, orders, amountSpent}, index) => ( + +
+

+ {name} +

+

{location}

+

{orders}

+

{amountSpent}

+
+ + ), + ); + + return ( +
+ + + {rowMarkup} + + +
+ ); +} + export function WithEmptyState() { const customers = []; const resourceName = { @@ -597,6 +750,86 @@ export function WithLoadingState() { orders: 30, amountSpent: '$140', }, + { + id: '1234', + url: 'customers/341', + name: 'David Reynolds', + location: 'Phoenix, USA', + orders: 4, + amountSpent: '$84', + }, + { + id: '1289', + url: 'customers/256', + name: 'Jennifer Jennings', + location: 'Boise, USA', + orders: 62, + amountSpent: '$542', + }, + { + id: '9874', + url: 'customers/341', + name: 'Robert Bradley', + location: 'Seattle, USA', + orders: 21, + amountSpent: '$450', + }, + { + id: '4873', + url: 'customers/256', + name: 'Brian Johnson', + location: 'San Diego, USA', + orders: 35, + amountSpent: '$765', + }, + { + id: '9082', + url: 'customers/341', + name: 'Kimberley Rogers', + location: 'Kansas City, USA', + orders: 36, + amountSpent: '$1,230', + }, + { + id: '3627', + url: 'customers/256', + name: 'Nina Rodriguez', + location: 'Mobile, USA', + orders: 67, + amountSpent: '$986', + }, + { + id: '4328', + url: 'customers/341', + name: 'Pam Mahoney', + location: 'Austin, USA', + orders: 24, + amountSpent: '$2,300', + }, + { + id: '2635', + url: 'customers/256', + name: 'Joe Talbot', + location: 'Tacoma, USA', + orders: 5, + amountSpent: '$86', + }, + { + id: '0982', + url: 'customers/341', + name: 'Billy Parker', + location: 'Madison, USA', + orders: 87, + amountSpent: '$1,930', + }, + { + id: '8326', + url: 'customers/256', + name: 'Ahmed Mahmood', + location: 'Portland, USA', + orders: 34, + amountSpent: '$243', + }, ]; const resourceName = { singular: 'customer', diff --git a/polaris-react/src/components/IndexTable/IndexTable.tsx b/polaris-react/src/components/IndexTable/IndexTable.tsx index 0267ebf323d..7ead97732dd 100644 --- a/polaris-react/src/components/IndexTable/IndexTable.tsx +++ b/polaris-react/src/components/IndexTable/IndexTable.tsx @@ -668,12 +668,17 @@ function IndexTableBase({ ); + const condensedListClassNames = classNames( + styles.CondensedList, + loading && styles['CondensedList-loading'], + ); + const bodyMarkup = condensed ? ( <> {sharedMarkup}
    {children} From 3a9c95f87855b63519b80fcc5ccf6c9e5c6d4d06 Mon Sep 17 00:00:00 2001 From: Marc Thomas Date: Thu, 13 Oct 2022 12:27:03 +0100 Subject: [PATCH 4/9] chore: linting --- .../src/components/IndexTable/tests/IndexTable.test.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/polaris-react/src/components/IndexTable/tests/IndexTable.test.tsx b/polaris-react/src/components/IndexTable/tests/IndexTable.test.tsx index 256ff162d78..0c5eeaba90b 100644 --- a/polaris-react/src/components/IndexTable/tests/IndexTable.test.tsx +++ b/polaris-react/src/components/IndexTable/tests/IndexTable.test.tsx @@ -6,7 +6,6 @@ import {getTableHeadingsBySelector} from '../utilities'; import {EmptySearchResult} from '../../EmptySearchResult'; // eslint-disable-next-line import/no-deprecated import {EventListener} from '../../EventListener'; -import {Spinner} from '../../Spinner'; import {Sticky} from '../../Sticky'; import {Button} from '../../Button'; import {Checkbox} from '../../Checkbox'; From f52cac299d06c844cfacb1e13d6e451b530bc8dd Mon Sep 17 00:00:00 2001 From: Marc Thomas Date: Thu, 13 Oct 2022 12:59:21 +0100 Subject: [PATCH 5/9] chore: reverse animation timings --- .../src/components/IndexTable/IndexTable.scss | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/polaris-react/src/components/IndexTable/IndexTable.scss b/polaris-react/src/components/IndexTable/IndexTable.scss index 666d7105ea3..78f372f592b 100644 --- a/polaris-react/src/components/IndexTable/IndexTable.scss +++ b/polaris-react/src/components/IndexTable/IndexTable.scss @@ -83,6 +83,8 @@ $loading-panel-height: 53px; } } +$table-loading-duration: 2s; + .Table-loading { tbody tr { background: linear-gradient( @@ -92,12 +94,13 @@ $loading-panel-height: 53px; var(--p-surface) 60% ); background-size: 200% 100%; - animation: shimmer 2s infinite var(--p-ease-in-out); + animation: shimmer $table-loading-duration infinite var(--p-ease-in-out); } @for $stagger from 1 through 25 { tbody tr:nth-child(25n + #{$stagger}) { - animation-delay: $stagger / 25 * 2s; + animation-delay: ($stagger / 25 * $table-loading-duration) - + $table-loading-duration; } } } @@ -111,12 +114,13 @@ $loading-panel-height: 53px; var(--p-surface) 60% ); background-size: 200% 100%; - animation: shimmer 2s infinite var(--p-ease-in-out); + animation: shimmer $table-loading-duration infinite var(--p-ease-in-out); } @for $stagger from 1 through 10 { li:nth-child(10n + #{$stagger}) { - animation-delay: $stagger / 10 * 2s; + animation-delay: ($stagger / 10 * $table-loading-duration) - + $table-loading-duration; } } } From 8b05da047bd71a3a9d7cf90223370b12e7cc43a8 Mon Sep 17 00:00:00 2001 From: Marc Thomas Date: Thu, 13 Oct 2022 13:27:49 +0100 Subject: [PATCH 6/9] chore: update place of gradient --- .../src/components/IndexTable/IndexTable.scss | 25 +++++++++---------- 1 file changed, 12 insertions(+), 13 deletions(-) diff --git a/polaris-react/src/components/IndexTable/IndexTable.scss b/polaris-react/src/components/IndexTable/IndexTable.scss index 78f372f592b..77a73bb0c1a 100644 --- a/polaris-react/src/components/IndexTable/IndexTable.scss +++ b/polaris-react/src/components/IndexTable/IndexTable.scss @@ -83,24 +83,24 @@ $loading-panel-height: 53px; } } -$table-loading-duration: 2s; +$table-loading-animation-duration: 2s; .Table-loading { + // stylelint-disable-next-line selector-max-type, selector-max-combinators tbody tr { background: linear-gradient( 90deg, - var(--p-surface) 40%, - var(--p-surface-hovered) 50%, - var(--p-surface) 60% + var(--p-surface) 10%, + var(--p-surface-hovered) 20%, + var(--p-surface) 30% ); background-size: 200% 100%; - animation: shimmer $table-loading-duration infinite var(--p-ease-in-out); + animation: shimmer $table-loading-animation-duration infinite linear; } @for $stagger from 1 through 25 { tbody tr:nth-child(25n + #{$stagger}) { - animation-delay: ($stagger / 25 * $table-loading-duration) - - $table-loading-duration; + animation-delay: $stagger / 25 * $table-loading-animation-duration; } } } @@ -109,18 +109,17 @@ $table-loading-duration: 2s; li { background: linear-gradient( 90deg, - var(--p-surface) 40%, - var(--p-surface-hovered) 50%, - var(--p-surface) 60% + var(--p-surface) 10%, + var(--p-surface-hovered) 20%, + var(--p-surface) 30% ); background-size: 200% 100%; - animation: shimmer $table-loading-duration infinite var(--p-ease-in-out); + animation: shimmer $table-loading-animation-duration infinite linear; } @for $stagger from 1 through 10 { li:nth-child(10n + #{$stagger}) { - animation-delay: ($stagger / 10 * $table-loading-duration) - - $table-loading-duration; + animation-delay: $stagger / 10 * $table-loading-animation-duration; } } } From ecb841e3be730123df6d20180719bee3de4b26d6 Mon Sep 17 00:00:00 2001 From: Marc Thomas Date: Thu, 13 Oct 2022 13:36:59 +0100 Subject: [PATCH 7/9] chore: lint --- polaris-react/src/components/IndexTable/IndexTable.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/polaris-react/src/components/IndexTable/IndexTable.scss b/polaris-react/src/components/IndexTable/IndexTable.scss index 77a73bb0c1a..8b5d5ee2b00 100644 --- a/polaris-react/src/components/IndexTable/IndexTable.scss +++ b/polaris-react/src/components/IndexTable/IndexTable.scss @@ -78,6 +78,7 @@ $loading-panel-height: 53px; 0% { background-position: 200% 0%; } + 100% { background-position: 0%; } @@ -208,7 +209,7 @@ $table-loading-animation-duration: 2s; // stylelint-disable-next-line selector-max-class &.TableRow-hovered.TableRow-selected { - // stylelint-disable-next-line selector-max-class + // stylelint-disable-next-line selector-max-class, selector-max-specificity .TableCell { background-color: var(--p-surface-selected-hovered); } From 6e628d071c9767a89459fe4770ebfd96caf1bcb5 Mon Sep 17 00:00:00 2001 From: Marc Thomas Date: Thu, 13 Oct 2022 14:40:32 +0100 Subject: [PATCH 8/9] chore: use css custom property to stagger --- .../src/components/IndexTable/IndexTable.scss | 22 +++++-------------- .../IndexTable/components/Row/Row.tsx | 5 +++++ 2 files changed, 11 insertions(+), 16 deletions(-) diff --git a/polaris-react/src/components/IndexTable/IndexTable.scss b/polaris-react/src/components/IndexTable/IndexTable.scss index 8b5d5ee2b00..c8dbfa03ee8 100644 --- a/polaris-react/src/components/IndexTable/IndexTable.scss +++ b/polaris-react/src/components/IndexTable/IndexTable.scss @@ -91,18 +91,13 @@ $table-loading-animation-duration: 2s; tbody tr { background: linear-gradient( 90deg, - var(--p-surface) 10%, + var(--p-surface) 5%, var(--p-surface-hovered) 20%, - var(--p-surface) 30% + var(--p-surface) 35% ); background-size: 200% 100%; animation: shimmer $table-loading-animation-duration infinite linear; - } - - @for $stagger from 1 through 25 { - tbody tr:nth-child(25n + #{$stagger}) { - animation-delay: $stagger / 25 * $table-loading-animation-duration; - } + animation-delay: calc(0.125s * var(--pc-index-table-row-stagger-index)); } } @@ -110,18 +105,13 @@ $table-loading-animation-duration: 2s; li { background: linear-gradient( 90deg, - var(--p-surface) 10%, + var(--p-surface) 5%, var(--p-surface-hovered) 20%, - var(--p-surface) 30% + var(--p-surface) 35% ); background-size: 200% 100%; animation: shimmer $table-loading-animation-duration infinite linear; - } - - @for $stagger from 1 through 10 { - li:nth-child(10n + #{$stagger}) { - animation-delay: $stagger / 10 * $table-loading-animation-duration; - } + animation-delay: calc(0.125s * var(--pc-index-table-row-stagger-index)); } } diff --git a/polaris-react/src/components/IndexTable/components/Row/Row.tsx b/polaris-react/src/components/IndexTable/components/Row/Row.tsx index c97795fb1f9..e8562cf43d7 100644 --- a/polaris-react/src/components/IndexTable/components/Row/Row.tsx +++ b/polaris-react/src/components/IndexTable/components/Row/Row.tsx @@ -143,6 +143,10 @@ export const Row = memo(function Row({ const checkboxMarkup = selectable ? : null; + const style = { + '--pc-index-table-row-stagger-index': position, + } as React.CSSProperties; + return ( @@ -153,6 +157,7 @@ export const Row = memo(function Row({ onMouseLeave={setHoverOut} onClick={handleRowClick} ref={tableRowCallbackRef} + style={style} > {checkboxMarkup} {children} From ff67a0793ee79e41eb19a1af432aea6510bd6ae9 Mon Sep 17 00:00:00 2001 From: Marc Thomas Date: Thu, 13 Oct 2022 17:16:26 +0100 Subject: [PATCH 9/9] chore: add reduced motion animation --- .../src/components/IndexTable/IndexTable.scss | 25 +++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/polaris-react/src/components/IndexTable/IndexTable.scss b/polaris-react/src/components/IndexTable/IndexTable.scss index c8dbfa03ee8..35d05e1437f 100644 --- a/polaris-react/src/components/IndexTable/IndexTable.scss +++ b/polaris-react/src/components/IndexTable/IndexTable.scss @@ -84,6 +84,17 @@ $loading-panel-height: 53px; } } +@keyframes shimmer-min-motion { + 0%, + 100% { + background: var(--p-surface); + } + + 50% { + background: var(--p-surface-hovered); + } +} + $table-loading-animation-duration: 2s; .Table-loading { @@ -98,6 +109,13 @@ $table-loading-animation-duration: 2s; background-size: 200% 100%; animation: shimmer $table-loading-animation-duration infinite linear; animation-delay: calc(0.125s * var(--pc-index-table-row-stagger-index)); + + // stylelint-disable-next-line stylelint-polaris/media-queries-allowed-list + @media (prefers-reduced-motion) { + background: var(--p-surface); + animation-name: shimmer-min-motion; + animation-delay: 0s; + } } } @@ -112,6 +130,13 @@ $table-loading-animation-duration: 2s; background-size: 200% 100%; animation: shimmer $table-loading-animation-duration infinite linear; animation-delay: calc(0.125s * var(--pc-index-table-row-stagger-index)); + + // stylelint-disable-next-line stylelint-polaris/media-queries-allowed-list + @media (prefers-reduced-motion) { + background: var(--p-surface); + animation-name: shimmer-min-motion; + animation-delay: 0s; + } } }