ref(feedback): Replace react-virtualized with

`@tanstack/react-virtual` in Feedback

Author: ryan953

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

@@ -1,11 +1,4 @@
-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';
@@ -15,157 +8,94 @@ 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}
+        <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>
+              </ErrorBoundary>
+            )}
+            emptyMessage={() => <NoFeedback />}
+            loadingMoreMessage={() => (
+              <Centered>
+                <Tooltip title={t('Loading more feedback...')}>
+                  <LoadingIndicator mini />
+                </Tooltip>
+              </Centered>
+            )}
+            loadingCompleteMessage={() => null}
+          />
+        </InfiniteListState>
       </FeedbackListItems>
     </Fragment>
   );
 }
 
 const FeedbackListItems = styled('div')`
-  display: grid;
+  display: flex;
+  flex-direction: column;
   flex-grow: 1;
-  min-height: 300px;
+  padding-bottom: ${space(0.5)};
 `;
 
-const FloatingContainer = styled('div')`
-  position: absolute;
+const Centered = 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 +105,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/feedback/list/feedbackListItem.tsx

@@ -1,4 +1,3 @@
-import type {CSSProperties} from 'react';
 import styled from '@emotion/styled';
 
 import {ActorAvatar} from 'sentry/components/core/avatar/actorAvatar';
@@ -29,8 +28,6 @@ interface Props {
   feedbackItem: FeedbackIssueListItem;
   isSelected: 'all-selected' | boolean;
   onSelect: (isSelected: boolean) => void;
-  ref?: React.Ref<HTMLDivElement>;
-  style?: CSSProperties;
 }
 
 function useIsSelectedFeedback({feedbackItem}: {feedbackItem: FeedbackIssueListItem}) {
@@ -41,7 +38,7 @@ function useIsSelectedFeedback({feedbackItem}: {feedbackItem: FeedbackIssueListI
   return feedbackId === feedbackItem.id;
 }
 
-function FeedbackListItem({feedbackItem, isSelected, onSelect, style, ref}: Props) {
+export default function FeedbackListItem({feedbackItem, isSelected, onSelect}: Props) {
   const organization = useOrganization();
   const isOpen = useIsSelectedFeedback({feedbackItem});
   const {feedbackHasReplay} = useReplayCountForFeedbacks();
@@ -53,7 +50,7 @@ function FeedbackListItem({feedbackItem, isSelected, onSelect, style, ref}: Prop
   const hasComments = feedbackItem.numComments > 0;
 
   return (
-    <CardSpacing ref={ref} style={style}>
+    <CardSpacing>
       <LinkedFeedbackCard
         data-selected={isOpen}
         to={{
@@ -169,8 +166,6 @@ function FeedbackListItem({feedbackItem, isSelected, onSelect, style, ref}: Prop
   );
 }
 
-export default FeedbackListItem;
-
 const LinkedFeedbackCard = styled(Link)`
   position: relative;
   padding: ${space(1)} ${space(3)} ${space(1)} ${space(1.5)};