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` diff --git a/polaris-react/src/components/IndexTable/IndexTable.scss b/polaris-react/src/components/IndexTable/IndexTable.scss index 88242d3e23c..35d05e1437f 100644 --- a/polaris-react/src/components/IndexTable/IndexTable.scss +++ b/polaris-react/src/components/IndexTable/IndexTable.scss @@ -74,6 +74,72 @@ $loading-panel-height: 53px; border-collapse: collapse; } +@keyframes shimmer { + 0% { + background-position: 200% 0%; + } + + 100% { + background-position: 0%; + } +} + +@keyframes shimmer-min-motion { + 0%, + 100% { + background: var(--p-surface); + } + + 50% { + background: var(--p-surface-hovered); + } +} + +$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) 5%, + var(--p-surface-hovered) 20%, + var(--p-surface) 35% + ); + 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; + } + } +} + +.CondensedList-loading { + li { + background: linear-gradient( + 90deg, + var(--p-surface) 5%, + var(--p-surface-hovered) 20%, + var(--p-surface) 35% + ); + 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; + } + } +} + .Table-scrolling { // stylelint-disable-next-line selector-max-class, selector-max-combinators .TableCell-first, @@ -127,49 +193,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, selector-max-specificity + .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 397fac4d8ca..7ead97732dd 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, @@ -703,12 +668,17 @@ function IndexTableBase({ ); + const condensedListClassNames = classNames( + styles.CondensedList, + loading && styles['CondensedList-loading'], + ); + const bodyMarkup = condensed ? ( <> {sharedMarkup}