Fix TableView infinite resize (#3474)

Author: snowystinger

packages/@react-spectrum/table/stories/Table.stories.tsx

@@ -28,6 +28,7 @@ import {HidingColumnsAllowsResizing} from './HidingColumnsAllowsResizing';
 import {IllustratedMessage} from '@react-spectrum/illustratedmessage';
 import {Link} from '@react-spectrum/link';
 import {LoadingState, SelectionMode} from '@react-types/shared';
+import NoSearchResults from '@spectrum-icons/illustrations/NoSearchResults';
 import {Radio, RadioGroup} from '@react-spectrum/radio';
 import React, {Key, useState} from 'react';
 import {SearchField} from '@react-spectrum/searchfield';
@@ -1361,6 +1362,15 @@ storiesOf('TableView', module)
     () => (
       <HidingColumnsAllowsResizing />
     )
+  )
+  .add(
+    'zoom resizing table',
+    () => (
+      <div style={{position: 'absolute', height: 'calc(100vh-32px)', width: 'calc(100vw - 32px)'}}>
+        <ZoomResizing />
+      </div>
+    ),
+    {description: {data: 'Using browser zoom should not trigger an infinite resizing loop. CMD+"+" to zoom in and CMD+"-" to zoom out.'}}
   );
 
 function AsyncLoadingExample(props) {
@@ -1709,3 +1719,46 @@ export function TableWithBreadcrumbs() {
     </Flex>
   );
 }
+
+
+function EmptyState() {
+  return (
+    <IllustratedMessage>
+      <NoSearchResults />
+      <Heading>No results</Heading>
+    </IllustratedMessage>
+  );
+}
+
+function ZoomResizing() {
+  const [child, setChild] = useState('loader');
+
+  return (
+    <div className="App" style={{height: '100vh'}}>
+      <RadioGroup
+        label="Child type"
+        orientation="horizontal"
+        value={child}
+        onChange={setChild}>
+        <Radio value="loader">Loading state</Radio>
+        <Radio value="empty">Empty state</Radio>
+      </RadioGroup>
+      <Flex height="100%">
+        <TableView
+          height="100%"
+          width="100%"
+          renderEmptyState={child === 'empty' ? () => <EmptyState /> : undefined}>
+          <TableHeader>
+            <Column>column</Column>
+          </TableHeader>
+          <TableBody
+            items={[]}
+            loadingState={child === 'loader' ? 'loading' : undefined}>
+            {(item) => <Row>{(column) => <Cell>{item[column]}</Cell>}</Row>}
+          </TableBody>
+        </TableView>
+      </Flex>
+    </div>
+  );
+}
+

packages/@react-stately/layout/src/TableLayout.ts

@@ -191,7 +191,8 @@ export class TableLayout<T> extends ListLayout<T> {
     }
 
     if (this.isLoading) {
-      let rect = new Rect(0, y, width || this.virtualizer.visibleRect.width, children.length === 0 ? this.virtualizer.visibleRect.height : 60);
+      // Add some margin around the loader to ensure that scrollbars don't flicker in and out.
+      let rect = new Rect(40,  Math.max(y, 40), (width || this.virtualizer.visibleRect.width) - 80, children.length === 0 ? this.virtualizer.visibleRect.height - 80 : 60);
       let loader = new LayoutInfo('loader', 'loader', rect);
       loader.parentKey = 'body';
       loader.isSticky = children.length === 0;
@@ -200,7 +201,7 @@ export class TableLayout<T> extends ListLayout<T> {
       y = loader.rect.maxY;
       width = Math.max(width, rect.width);
     } else if (children.length === 0) {
-      let rect = new Rect(0, y, this.virtualizer.visibleRect.width, this.virtualizer.visibleRect.height);
+      let rect = new Rect(40, Math.max(y, 40), this.virtualizer.visibleRect.width - 80, this.virtualizer.visibleRect.height - 80);
       let empty = new LayoutInfo('empty', 'empty', rect);
       empty.parentKey = 'body';
       empty.isSticky = true;