diff --git a/static/app/components/feedback/list/feedbackList.tsx b/static/app/components/feedback/list/feedbackList.tsx
index 035f355d0b9643..3515ffb726f16f 100644
--- a/static/app/components/feedback/list/feedbackList.tsx
+++ b/static/app/components/feedback/list/feedbackList.tsx
@@ -1,12 +1,6 @@
-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 uniqBy from 'lodash/uniqBy';
import waitingForEventImg from 'sentry-images/spot/waiting-for-event.svg';
@@ -15,172 +9,105 @@ 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 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 (
-
- {title}
- {subtitle}
-
+
+ {t('Inbox Zero')}
+ {t('You have two options: take a nap or be productive.')}
+
);
}
export default function FeedbackList() {
const {listQueryKey} = useFeedbackQueryKeys();
- const {
- isFetchingNextPage,
- isFetchingPreviousPage,
- isLoading, // If anything is loaded yet
- getRow,
- isRowLoaded,
- issues,
- loadMoreRows,
- hits,
- } = useFetchInfiniteListData({
+ const queryResult = useInfiniteApiQuery({
queryKey: listQueryKey ?? ['infinite', ''],
- uniqueField: 'id',
enabled: Boolean(listQueryKey),
});
+ const issues = useMemo(
+ () => uniqBy(queryResult.data?.pages.flatMap(([pageData]) => pageData) ?? [], 'id'),
+ [queryResult.data?.pages]
+ );
const checkboxState = useListItemCheckboxContext({
- hits,
+ hits: Number(
+ queryResult.data?.pages[0]?.[2]?.getResponseHeader('X-Hits') ?? issues.length
+ ),
knownIds: issues.map(issue => issue.id),
queryKey: listQueryKey,
});
- const listRef = useRef(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 (
-
-
- {
- checkboxState.toggleSelected(item.id);
- }}
- style={style}
- />
-
-
- );
- };
-
return (
- null}
+ loadingMessage={() =>
- {({width, height}) => (
-
- isLoading ? (
-
+ estimateSize={() => 24}
+ queryResult={queryResult}
+ itemRenderer={({item}) => (
+
+ {
+ checkboxState.toggleSelected(item.id);
}}
- rowCount={issues.length}
- rowHeight={cache.rowHeight}
- rowRenderer={renderRow}
- width={width}
/>
- )}
-
- )}
-
-
- {isFetchingPreviousPage ? (
-
-
- ) : null}
-
-
- {isFetchingNextPage ? (
-
-
- ) : null}
-
+
+ )}
+ emptyMessage={() =>
+
+
+
+ )}
+ loadingCompleteMessage={() => null}
+ />
+
);
}
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;
text-align: center;
color: ${p => p.theme.subText};
@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};
diff --git a/static/app/components/feedback/list/feedbackListItem.tsx b/static/app/components/feedback/list/feedbackListItem.tsx
index 7256e2c9c3cf9a..efcc2216d52e87 100644
--- a/static/app/components/feedback/list/feedbackListItem.tsx
+++ b/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;
- 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 (
-
+
= Pick> & U;
+
+interface Props {
+ itemRenderer: ({
+ item,
+ virtualItem,
+ }: {
+ item: Data;
+ virtualItem: VirtualItem;
+ }) => React.ReactNode;
+ queryResult: Overwrite<
+ Pick<
+ UseInfiniteQueryResult>, Error>,
+ 'data' | 'hasNextPage' | 'isFetchingNextPage' | 'fetchNextPage'
+ >,
+ {fetchNextPage: () => Promise}
+ >;
+ emptyMessage?: () => React.ReactNode;
+ estimateSize?: () => number;
+ loadingCompleteMessage?: () => React.ReactNode;
+ loadingMoreMessage?: () => React.ReactNode;
+ overscan?: number;
+}
+
+export default function InfiniteListItems({
+ estimateSize,
+ itemRenderer,
+ emptyMessage = EmptyMessage,
+ loadingCompleteMessage = LoadingCompleteMessage,
+ loadingMoreMessage = LoadingMoreMessage,
+ overscan,
+ queryResult,
+}: Props) {
+ const {data, hasNextPage, isFetchingNextPage, fetchNextPage} = queryResult;
+ const loadedRows = data ? data.pages.flatMap(d => d[0]) : [];
+ const parentRef = useRef(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 (
+
+
+
+ {items.length ? null : emptyMessage()}
+ {items.map(virtualItem => {
+ const isLoaderRow = virtualItem.index > loadedRows.length - 1;
+ const item = loadedRows.at(virtualItem.index);
+
+ return (
+
+ {isLoaderRow
+ ? hasNextPage
+ ? loadingMoreMessage()
+ : loadingCompleteMessage()
+ : item && itemRenderer({virtualItem, item})}
+
+ );
+ })}
+
+
+
+ );
+}
+
+function EmptyMessage() {
+ return {t('No items to show')}
;
+}
+
+function LoadingMoreMessage() {
+ return (
+
+ );
+}
+
+function LoadingCompleteMessage() {
+ return {t('Nothing more to load')}
;
+}
+
+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;
+`;
diff --git a/static/app/components/infiniteList/infiniteListState.tsx b/static/app/components/infiniteList/infiniteListState.tsx
new file mode 100644
index 00000000000000..aa76a7cbfe30c3
--- /dev/null
+++ b/static/app/components/infiniteList/infiniteListState.tsx
@@ -0,0 +1,60 @@
+import {Fragment} from 'react';
+import type {UseInfiniteQueryResult, UseQueryResult} from '@tanstack/react-query';
+
+import type {ApiResult} from 'sentry/api';
+import {t} from 'sentry/locale';
+
+interface Props {
+ children: React.ReactNode;
+ queryResult:
+ | Pick, Error>, 'status' | 'error' | 'isFetching'>
+ | Pick<
+ UseInfiniteQueryResult,
+ 'status' | 'error' | 'isFetching' | 'isFetchingNextPage'
+ >;
+ backgroundUpdatingMessage?: () => React.ReactNode;
+ errorMessage?: (props: {error: Error}) => React.ReactNode;
+ loadingMessage?: () => React.ReactNode;
+}
+
+export default function InfiniteListState({
+ backgroundUpdatingMessage = BackgroundUpdatingMessage,
+ children,
+ errorMessage = ErrorMessage,
+ loadingMessage = LoadingMessage,
+ queryResult,
+}: Props) {
+ const {status, error, isFetching} = queryResult;
+ if (status === 'pending') {
+ return loadingMessage();
+ }
+ if (status === 'error') {
+ return errorMessage({error: error!});
+ }
+
+ // It's fetching in the background if:
+ // - it's a regular QueryResult, and isFetching is true
+ // - it's an InfiniteQueryResult, and itFetching is true, but we're not fetching the next page
+ const isBackgroundUpdating =
+ isFetching &&
+ ('isFetchingNextPage' in queryResult ? !queryResult.isFetchingNextPage : true);
+
+ return (
+
+ {children}
+ {isBackgroundUpdating ? backgroundUpdatingMessage() : null}
+
+ );
+}
+
+function LoadingMessage() {
+ return {t('Loading...')}
;
+}
+
+function ErrorMessage({error}: {error: Error}) {
+ return {t('Error: %s', error.message)}
;
+}
+
+function BackgroundUpdatingMessage() {
+ return {t('Background Updating...')} ;
+}
diff --git a/static/app/utils/api/useFetchInfiniteListData.tsx b/static/app/utils/api/useFetchInfiniteListData.tsx
deleted file mode 100644
index 5ef4b323376f2f..00000000000000
--- a/static/app/utils/api/useFetchInfiniteListData.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import {useCallback, useMemo} from 'react';
-import type {Index, IndexRange} from 'react-virtualized';
-
-import type {InfiniteApiQueryKey} from 'sentry/utils/queryClient';
-import {useInfiniteApiQuery} from 'sentry/utils/queryClient';
-
-function uniqueItems>(
- items: Data[],
- uniqueField: string
-) {
- const uniqueIds = new Set(items.map(item => item[uniqueField]));
- return items.filter(item => {
- if (uniqueIds.has(item[uniqueField])) {
- uniqueIds.delete(item[uniqueField]);
- return true;
- }
- return false;
- });
-}
-
-interface Props {
- queryKey: NonNullable;
- uniqueField: string;
- enabled?: boolean;
-}
-
-export default function useFetchInfiniteListData>({
- queryKey,
- uniqueField,
- enabled,
-}: Props) {
- const {
- data,
- error,
- fetchNextPage,
- hasNextPage,
- isError,
- isFetching, // If the network is active
- isFetchingNextPage,
- isFetchingPreviousPage,
- isPending, // If anything is loaded yet
- } = useInfiniteApiQuery({
- queryKey,
- enabled,
- });
-
- const issues = useMemo(
- () => uniqueItems(data?.pages.flatMap(([pageData]) => pageData) ?? [], uniqueField),
- [data, uniqueField]
- );
-
- const getRow = useCallback(
- ({index}: Index): Data | undefined => issues?.[index],
- [issues]
- );
-
- const isRowLoaded = useCallback(({index}: Index) => Boolean(issues[index]), [issues]);
-
- const loadMoreRows = useCallback(
- ({startIndex: _1, stopIndex: _2}: IndexRange): Promise =>
- hasNextPage ? fetchNextPage() : Promise.resolve(),
- [hasNextPage, fetchNextPage]
- );
-
- const hits = useMemo(
- () =>
- data?.pages.map(([, , resp]) => Number(resp?.getResponseHeader('X-Hits'))) ?? [],
- [data]
- );
-
- return {
- error,
- hasNextPage,
- isError,
- isFetching, // If the network is active
- isFetchingNextPage,
- isFetchingPreviousPage,
- isLoading: isPending, // If anything is loaded yet
- // Below are fields that are shims for react-virtualized
- getRow,
- isRowLoaded,
- issues,
- loadMoreRows,
- hits: Math.max(...hits),
- };
-}