Update ListTable display of items.

src/components/metrics/ListTable.js

@@ -1,4 +1,3 @@
-import useMeasure from 'react-use-measure';
 import { FixedSizeList } from 'react-window';
 import { useSpring, animated, config } from '@react-spring/web';
 import classNames from 'classnames';
@@ -7,6 +6,8 @@ import { formatLongNumber } from 'lib/format';
 import useMessages from 'components/hooks/useMessages';
 import styles from './ListTable.module.css';
 
+const ITEM_SIZE = 30;
+
 export function ListTable({
   data = [],
   title,
@@ -16,9 +17,9 @@ export function ListTable({
   animate = true,
   virtualize = false,
   showPercentage = true,
+  itemCount = 10,
 }) {
   const { formatMessage, labels } = useMessages();
-  const [ref, bounds] = useMeasure();
 
   const getRow = row => {
     const { x: label, y: value, z: percent } = row;
@@ -45,10 +46,14 @@ export function ListTable({
         <div className={styles.title}>{title}</div>
         <div className={styles.metric}>{metric}</div>
       </div>
-      <div ref={ref} className={styles.body}>
+      <div className={styles.body}>
         {data?.length === 0 && <Empty />}
         {virtualize && data.length > 0 ? (
-          <FixedSizeList height={bounds.height} itemCount={data.length} itemSize={30}>
+          <FixedSizeList
+            height={itemCount * ITEM_SIZE}
+            itemCount={data.length}
+            itemSize={ITEM_SIZE}
+          >
             {Row}
           </FixedSizeList>
         ) : (

src/components/metrics/MetricsTable.js

@@ -1,6 +1,5 @@
 import { useMemo } from 'react';
-import { Loading, Icon, Text, Button } from 'react-basics';
-import Link from 'next/link';
+import { Loading, Icon, Text } from 'react-basics';
 import firstBy from 'thenby';
 import classNames from 'classnames';
 import useApi from 'components/hooks/useApi';
@@ -8,12 +7,13 @@ import { percentFilter } from 'lib/filters';
 import useDateRange from 'components/hooks/useDateRange';
 import useNavigation from 'components/hooks/useNavigation';
 import ErrorMessage from 'components/common/ErrorMessage';
+import LinkButton from 'components/common/LinkButton';
 import ListTable from './ListTable';
 import { DEFAULT_ANIMATION_DURATION } from 'lib/constants';
 import Icons from 'components/icons';
 import useMessages from 'components/hooks/useMessages';
-import styles from './MetricsTable.module.css';
 import useLocale from 'components/hooks/useLocale';
+import styles from './MetricsTable.module.css';
 
 export function MetricsTable({
   websiteId,
@@ -103,14 +103,12 @@ export function MetricsTable({
       {data && !error && <ListTable {...props} data={filteredData} className={className} />}
       <div className={styles.footer}>
         {data && !error && limit && (
-          <Link href={makeUrl({ view: type })}>
-            <Button variant="quiet">
-              <Text>{formatMessage(labels.more)}</Text>
-              <Icon size="sm" rotate={dir === 'rtl' ? 180 : 0}>
-                <Icons.ArrowRight />
-              </Icon>
-            </Button>
-          </Link>
+          <LinkButton href={makeUrl({ view: type })} variant="quiet">
+            <Text>{formatMessage(labels.more)}</Text>
+            <Icon size="sm" rotate={dir === 'rtl' ? 180 : 0}>
+              <Icons.ArrowRight />
+            </Icon>
+          </LinkButton>
         )}
       </div>
     </div>

src/components/metrics/MetricsTable.module.css

@@ -1,7 +1,6 @@
 .container {
   position: relative;
   min-height: 430px;
-  height: 100%;
   display: flex;
   flex-direction: column;
   flex: 1;