ref(feedback): Replace react-virtualized with

`@tanstack/react-virtual` in Feedback

Author: ryan953

static/app/components/feedback/list/feedbackList.tsx

@@ -1,171 +1,95 @@
-import {Fragment, useMemo, useRef} from 'react';
-import type {ListRowProps} from 'react-virtualized';
-import {
-  AutoSizer,
-  CellMeasurer,
-  InfiniteLoader,
-  List as ReactVirtualizedList,
-} from 'react-virtualized';
+import {Fragment, useMemo} from 'react';
 import styled from '@emotion/styled';
 
 import waitingForEventImg from 'sentry-images/spot/waiting-for-event.svg';
 
+import {Flex} from 'sentry/components/core/layout';
 import {Tooltip} from 'sentry/components/core/tooltip';
 import ErrorBoundary from 'sentry/components/errorBoundary';
 import FeedbackListHeader from 'sentry/components/feedback/list/feedbackListHeader';
 import FeedbackListItem from 'sentry/components/feedback/list/feedbackListItem';
 import useFeedbackQueryKeys from 'sentry/components/feedback/useFeedbackQueryKeys';
+import InfiniteListItems from 'sentry/components/infiniteList/infiniteListItems';
+import InfiniteListState from 'sentry/components/infiniteList/infiniteListState';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
-import useFetchInfiniteListData from 'sentry/utils/api/useFetchInfiniteListData';
+import uniqueBy from 'sentry/utils/array/uniqBy';
 import type {FeedbackIssueListItem} from 'sentry/utils/feedback/types';
 import {useListItemCheckboxContext} from 'sentry/utils/list/useListItemCheckboxState';
-import useVirtualizedList from 'sentry/views/replays/detail/useVirtualizedList';
+import {useInfiniteApiQuery} from 'sentry/utils/queryClient';
 
-// Ensure this object is created once as it is an input to
-// `useVirtualizedList`'s memoization
-const cellMeasurer = {
-  fixedWidth: true,
-  minHeight: 24,
-};
-
-function NoFeedback({title, subtitle}: {subtitle: string; title: string}) {
+function NoFeedback() {
   return (
-    <Wrapper>
-      <img src={waitingForEventImg} alt="No feedback found spot illustration" />
-      <EmptyMessage>{title}</EmptyMessage>
-      <p>{subtitle}</p>
-    </Wrapper>
+    <NoFeedbackWrapper>
+      <img src={waitingForEventImg} alt={t('A person waiting for a phone to ring')} />
+      <NoFeedbackMessage>{t('Inbox Zero')}</NoFeedbackMessage>
+      <p>{t('You have two options: take a nap or be productive.')}</p>
+    </NoFeedbackWrapper>
   );
 }
 
 export default function FeedbackList() {
   const {listQueryKey} = useFeedbackQueryKeys();
-  const {
-    isFetchingNextPage,
-    isFetchingPreviousPage,
-    isLoading, // If anything is loaded yet
-    getRow,
-    isRowLoaded,
-    issues,
-    loadMoreRows,
-    hits,
-  } = useFetchInfiniteListData<FeedbackIssueListItem>({
+  const queryResult = useInfiniteApiQuery<FeedbackIssueListItem[]>({
     queryKey: listQueryKey ?? ['infinite', ''],
-    uniqueField: 'id',
     enabled: Boolean(listQueryKey),
   });
 
+  const issues = useMemo(
+    () => uniqueBy(queryResult.data?.pages.flatMap(([pageData]) => pageData) ?? [], 'id'),
+    [queryResult.data?.pages]
+  );
   const checkboxState = useListItemCheckboxContext({
-    hits,
+    hits: issues.length,
     knownIds: issues.map(issue => issue.id),
     queryKey: listQueryKey,
   });
 
-  const listRef = useRef<ReactVirtualizedList>(null);
-
-  const deps = useMemo(() => [isLoading, issues.length], [isLoading, issues.length]);
-  const {cache, updateList} = useVirtualizedList({
-    cellMeasurer,
-    ref: listRef,
-    deps,
-  });
-
-  const renderRow = ({index, key, style, parent}: ListRowProps) => {
-    const item = getRow({index});
-    if (!item) {
-      return null;
-    }
-
-    return (
-      <ErrorBoundary mini key={key}>
-        <CellMeasurer cache={cache} columnIndex={0} parent={parent} rowIndex={index}>
-          <FeedbackListItem
-            feedbackItem={item}
-            isSelected={checkboxState.isSelected(item.id)}
-            onSelect={() => {
-              checkboxState.toggleSelected(item.id);
-            }}
-            style={style}
-          />
-        </CellMeasurer>
-      </ErrorBoundary>
-    );
-  };
-
   return (
     <Fragment>
       <FeedbackListHeader {...checkboxState} />
-      <FeedbackListItems>
-        <InfiniteLoader
-          isRowLoaded={isRowLoaded}
-          loadMoreRows={loadMoreRows}
-          rowCount={hits}
+      <Flex direction="column" style={{flexGrow: 1}}>
+        <InfiniteListState
+          queryResult={queryResult}
+          backgroundUpdatingMessage={() => null}
+          loadingMessage={() => <LoadingIndicator />}
         >
-          {({onRowsRendered, registerChild}) => (
-            <AutoSizer onResize={updateList}>
-              {({width, height}) => (
-                <ReactVirtualizedList
-                  deferredMeasurementCache={cache}
-                  height={height}
-                  noRowsRenderer={() =>
-                    isLoading ? (
-                      <LoadingIndicator />
-                    ) : (
-                      <NoFeedback
-                        title={t('Inbox Zero')}
-                        subtitle={t('You have two options: take a nap or be productive.')}
-                      />
-                    )
-                  }
-                  onRowsRendered={onRowsRendered}
-                  overscanRowCount={5}
-                  ref={e => {
-                    listRef.current = e;
-                    registerChild(e);
+          <InfiniteListItems<FeedbackIssueListItem>
+            estimateSize={() => 24}
+            queryResult={queryResult}
+            itemRenderer={({item}) => (
+              <ErrorBoundary mini>
+                <FeedbackListItem
+                  feedbackItem={item}
+                  isSelected={checkboxState.isSelected(item.id)}
+                  onSelect={() => {
+                    checkboxState.toggleSelected(item.id);
                   }}
-                  rowCount={issues.length}
-                  rowHeight={cache.rowHeight}
-                  rowRenderer={renderRow}
-                  width={width}
                 />
-              )}
-            </AutoSizer>
-          )}
-        </InfiniteLoader>
-        <FloatingContainer style={{top: '2px'}}>
-          {isFetchingPreviousPage ? (
-            <Tooltip title={t('Loading more feedback...')}>
-              <LoadingIndicator mini />
-            </Tooltip>
-          ) : null}
-        </FloatingContainer>
-        <FloatingContainer style={{bottom: '2px'}}>
-          {isFetchingNextPage ? (
-            <Tooltip title={t('Loading more feedback...')}>
-              <LoadingIndicator mini />
-            </Tooltip>
-          ) : null}
-        </FloatingContainer>
-      </FeedbackListItems>
+              </ErrorBoundary>
+            )}
+            emptyMessage={() => <NoFeedback />}
+            loadingMoreMessage={() => (
+              <LoadingMoreContainer>
+                <Tooltip title={t('Loading more feedback...')}>
+                  <LoadingIndicator mini />
+                </Tooltip>
+              </LoadingMoreContainer>
+            )}
+            loadingCompleteMessage={() => null}
+          />
+        </InfiniteListState>
+      </Flex>
     </Fragment>
   );
 }
 
-const FeedbackListItems = styled('div')`
-  display: grid;
-  flex-grow: 1;
-  min-height: 300px;
-`;
-
-const FloatingContainer = styled('div')`
-  position: absolute;
+const LoadingMoreContainer = styled('div')`
   justify-self: center;
 `;
 
-const Wrapper = styled('div')`
-  display: flex;
+const NoFeedbackWrapper = styled('div')`
   padding: ${space(4)} ${space(4)};
   flex-direction: column;
   align-items: center;
@@ -175,12 +99,9 @@ const Wrapper = styled('div')`
   @media (max-width: ${p => p.theme.breakpoints.sm}) {
     font-size: ${p => p.theme.fontSize.md};
   }
-  position: relative;
-  top: 50%;
-  transform: translateY(-50%);
 `;
 
-const EmptyMessage = styled('div')`
+const NoFeedbackMessage = styled('div')`
   font-weight: ${p => p.theme.fontWeight.bold};
   color: ${p => p.theme.gray400};
 

static/app/components/infiniteList/infiniteListItems.tsx

@@ -0,0 +1,146 @@
+import {useEffect, useRef} from 'react';
+import styled from '@emotion/styled';
+import type {InfiniteData, UseInfiniteQueryResult} from '@tanstack/react-query';
+import {useVirtualizer} from '@tanstack/react-virtual';
+
+import type {ApiResult} from 'sentry/api';
+import LoadingIndicator from 'sentry/components/loadingIndicator';
+import {t} from 'sentry/locale';
+
+type Overwrite<T, U> = Pick<T, Exclude<keyof T, keyof U>> & U;
+
+interface Props<Data> {
+  itemRenderer: ({index, item}: {index: number; item: Data}) => React.ReactNode;
+  queryResult: Overwrite<
+    Pick<
+      UseInfiniteQueryResult<InfiniteData<ApiResult<Data[]>>, Error>,
+      'data' | 'hasNextPage' | 'isFetchingNextPage' | 'fetchNextPage'
+    >,
+    {fetchNextPage: () => Promise<unknown>}
+  >;
+  emptyMessage?: () => React.ReactNode;
+  estimateSize?: () => number;
+  loadingCompleteMessage?: () => React.ReactNode;
+  loadingMoreMessage?: () => React.ReactNode;
+  overscan?: number;
+}
+
+export default function InfiniteListItems<Data>({
+  estimateSize,
+  itemRenderer,
+  emptyMessage = EmptyMessage,
+  loadingCompleteMessage = LoadingCompleteMessage,
+  loadingMoreMessage = LoadingMoreMessage,
+  overscan,
+  queryResult,
+}: Props<Data>) {
+  const {data, hasNextPage, isFetchingNextPage, fetchNextPage} = queryResult;
+  const loadedRows = data ? data.pages.flatMap(d => d[0]) : [];
+  const parentRef = useRef<HTMLDivElement>(null);
+
+  const rowVirtualizer = useVirtualizer({
+    count: hasNextPage ? loadedRows.length + 1 : loadedRows.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize: estimateSize ?? (() => 100),
+    overscan: overscan ?? 5,
+  });
+  const items = rowVirtualizer.getVirtualItems();
+
+  useEffect(() => {
+    const lastItem = items.at(-1);
+    if (!lastItem) {
+      return;
+    }
+
+    if (lastItem.index >= loadedRows.length - 1 && hasNextPage && !isFetchingNextPage) {
+      fetchNextPage();
+    }
+  }, [hasNextPage, fetchNextPage, loadedRows.length, isFetchingNextPage, items]);
+
+  return (
+    <FlexOverscroll ref={parentRef}>
+      <FlexListContainer style={{height: rowVirtualizer.getTotalSize()}}>
+        <PositionedList style={{transform: `translateY(${items[0]?.start ?? 0}px)`}}>
+          {items.length ? null : emptyMessage()}
+          {items.map(virtualRow => {
+            const isLoaderRow = virtualRow.index > loadedRows.length - 1;
+            const item = loadedRows.at(virtualRow.index);
+
+            return (
+              <li
+                data-index={virtualRow.index}
+                key={virtualRow.index}
+                ref={rowVirtualizer.measureElement}
+              >
+                {isLoaderRow
+                  ? hasNextPage
+                    ? loadingMoreMessage()
+                    : loadingCompleteMessage()
+                  : item && itemRenderer({index: virtualRow.index, item})}
+              </li>
+            );
+          })}
+        </PositionedList>
+      </FlexListContainer>
+    </FlexOverscroll>
+  );
+}
+
+function EmptyMessage() {
+  return <p>{t('No items to show')}</p>;
+}
+
+function LoadingMoreMessage() {
+  return (
+    <Footer title={t('Loading more items...')}>
+      <LoadingIndicator size={20} />
+    </Footer>
+  );
+}
+
+function LoadingCompleteMessage() {
+  return <p>{t('Nothing more to load')}</p>;
+}
+
+const FlexOverscroll = styled('div')`
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  overflow: auto;
+  overscroll-behavior: contain;
+  contain: strict;
+`;
+
+const FlexListContainer = styled('div')`
+  position: absolute;
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+`;
+
+const PositionedList = styled('ul')`
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  & > li {
+    margin: 0;
+    padding: 0;
+  }
+`;
+
+const Footer = styled('footer')`
+  position: absolute;
+  bottom: 0;
+  z-index: ${p => p.theme.zIndex.initial};
+  display: flex;
+  width: 100%;
+  flex-grow: 1;
+  align-items: center;
+  justify-content: center;
+`;