Skip to content

Commit

Permalink
feat(react): use native CSS transition for IndexTable loading
Browse files Browse the repository at this point in the history
  • Loading branch information
LA1CH3 committed Mar 29, 2024
1 parent 0c26884 commit d466758
Show file tree
Hide file tree
Showing 4 changed files with 68 additions and 84 deletions.
5 changes: 5 additions & 0 deletions .changeset/wild-sloths-begin.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@shopify/polaris': patch
---

Fixed `IndexTable` `loading` prop to correctly show/hide loading UI when prop value changes
38 changes: 14 additions & 24 deletions polaris-react/src/components/IndexTable/IndexTable.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -34,30 +34,6 @@
border-radius: 0;
}

.LoadingContainer-enter {
opacity: 0;
transform: translateY(-100%);
}

.LoadingContainer-enter-active {
opacity: 1;
transition: opacity var(--p-motion-duration-100) var(--p-motion-ease-out),
transform var(--p-motion-duration-100) var(--p-motion-ease-out);
transform: translateY(0);
}

.LoadingContainer-exit {
opacity: 1;
transform: translateY(0);
}

.LoadingContainer-exit-active {
opacity: 0;
transform: translateY(-100%);
transition: opacity var(--p-motion-duration-100) var(--p-motion-ease-in),
transform var(--p-motion-duration-100) var(--p-motion-ease-in);
}

.LoadingPanel {
position: absolute;
z-index: var(--p-z-index-2);
Expand All @@ -70,6 +46,20 @@
background: var(--p-color-bg-surface);
padding: var(--p-space-200) var(--p-space-400);
box-shadow: var(--p-shadow-300);
opacity: 0;
transform: translateY(-100%);
transition: opacity var(--p-motion-duration-100) var(--p-motion-ease-in),
transform var(--p-motion-duration-100) var(--p-motion-ease-in),
visibility 0s linear var(--p-motion-duration-100);
visibility: hidden;

&.LoadingPanelEntered {
visibility: visible;
opacity: 1;
transform: translateY(0);
transition: opacity var(--p-motion-duration-100) var(--p-motion-ease-out),
transform var(--p-motion-duration-100) var(--p-motion-ease-out);
}

.LoadingPanelRow {
display: flex;
Expand Down
61 changes: 33 additions & 28 deletions polaris-react/src/components/IndexTable/IndexTable.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -1491,6 +1491,8 @@ export function WithBulkActionsAndSelectionAcrossPages() {
}

export function WithLoadingState() {
const [loading, setLoading] = useState(true);

const customers = [
{
id: '3410',
Expand Down Expand Up @@ -1574,34 +1576,37 @@ export function WithLoadingState() {
);

return (
<LegacyCard>
<IndexTable
condensed={useBreakpoints().smDown}
resourceName={resourceName}
itemCount={customers.length}
selectedItemsCount={
allResourcesSelected ? 'All' : selectedResources.length
}
onSelectionChange={handleSelectionChange}
loading
headings={[
{title: 'Name'},
{title: 'Location'},
{
alignment: 'end',
id: 'order-count',
title: 'Order count',
},
{
alignment: 'end',
id: 'amount-spent',
title: 'Amount spent',
},
]}
>
{rowMarkup}
</IndexTable>
</LegacyCard>
<>
<Button onClick={() => setLoading(!loading)}>Toggle loading state</Button>
<LegacyCard>
<IndexTable
condensed={useBreakpoints().smDown}
resourceName={resourceName}
itemCount={customers.length}
selectedItemsCount={
allResourcesSelected ? 'All' : selectedResources.length
}
onSelectionChange={handleSelectionChange}
loading={loading}
headings={[
{title: 'Name'},
{title: 'Location'},
{
alignment: 'end',
id: 'order-count',
title: 'Order count',
},
{
alignment: 'end',
id: 'amount-spent',
title: 'Amount spent',
},
]}
>
{rowMarkup}
</IndexTable>
</LegacyCard>
</>
);
}

Expand Down
48 changes: 16 additions & 32 deletions polaris-react/src/components/IndexTable/IndexTable.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import React, {useRef, useState, useEffect, useCallback, useMemo} from 'react';
import {SortAscendingIcon, SortDescendingIcon} from '@shopify/polaris-icons';
import {CSSTransition} from 'react-transition-group';
import {themeDefault, toPx} from '@shopify/polaris-tokens';
import type {SpaceScale} from '@shopify/polaris-tokens';

Expand Down Expand Up @@ -41,7 +40,6 @@ import type {
Width,
TooltipOverlayProps,
} from '../Tooltip';
import {useTheme} from '../../utilities/use-theme';

import {getTableHeadingsBySelector} from './utilities';
import {ScrollContainer, Cell, Row} from './components';
Expand Down Expand Up @@ -156,8 +154,6 @@ function IndexTableBase({
pagination,
...restProps
}: IndexTableBaseProps) {
const theme = useTheme();

const {
loading,
bulkSelectState,
Expand All @@ -184,7 +180,6 @@ function IndexTableBase({
const tableElement = useRef<HTMLTableElement>(null);
const tableBodyElement = useRef<Element | null>(null);
const condensedListElement = useRef<HTMLUListElement>(null);
const loadingElement = useRef<HTMLDivElement>(null);

const [tableInitialized, setTableInitialized] = useState(false);
const [stickyWrapper, setStickyWrapper] = useState<HTMLElement | null>(null);
Expand Down Expand Up @@ -541,36 +536,25 @@ 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 = (
<CSSTransition
in={loading}
classNames={loadingTransitionClassNames}
timeout={parseInt(theme.motion['motion-duration-100'], 10)}
nodeRef={loadingElement}
appear
unmountOnExit
<div
className={classNames(
styles.LoadingPanel,
loading && styles.LoadingPanelEntered,
)}
>
<div className={styles.LoadingPanel} ref={loadingElement}>
<div className={styles.LoadingPanelRow}>
<Spinner size="small" />
<span className={styles.LoadingPanelText}>
{i18n.translate(
'Polaris.IndexTable.resourceLoadingAccessibilityLabel',
{
resourceNamePlural: resourceName.plural.toLocaleLowerCase(),
},
)}
</span>
</div>
<div className={styles.LoadingPanelRow}>
<Spinner size="small" />
<span className={styles.LoadingPanelText}>
{i18n.translate(
'Polaris.IndexTable.resourceLoadingAccessibilityLabel',
{
resourceNamePlural: resourceName.plural.toLocaleLowerCase(),
},
)}
</span>
</div>
</CSSTransition>
</div>
);

const stickyTableClassNames = classNames(
Expand Down

0 comments on commit d466758

Please sign in to comment.