diff --git a/packages/app-builder/src/components/Cases/CasesList.tsx b/packages/app-builder/src/components/Cases/CasesList.tsx index 2a4e046567..a78edb4d31 100644 --- a/packages/app-builder/src/components/Cases/CasesList.tsx +++ b/packages/app-builder/src/components/Cases/CasesList.tsx @@ -13,7 +13,7 @@ import clsx from 'clsx'; import { differenceInDays } from 'date-fns/differenceInDays'; import { useEffect, useMemo, useState } from 'react'; import { useTranslation } from 'react-i18next'; -import { Table, Tooltip, useVirtualTable } from 'ui-design-system'; +import { Table, Tooltip, useTable } from 'ui-design-system'; import { CaseAssignedTo } from './CaseAssignedTo'; import { CaseContributors } from './CaseContributors'; @@ -139,7 +139,7 @@ export function CasesList({ [language, t, orgTags], ); - const { table, getBodyProps, rows, getContainerProps, scrollToTop } = useVirtualTable({ + const { table, getBodyProps, rows, getContainerProps } = useTable({ data: cases, columns, columnResizeMode: 'onChange', @@ -151,10 +151,6 @@ export function CasesList({ rowLink: ({ id }) => , }); - useEffect(() => { - scrollToTop(); - }, [cases]); - return ( diff --git a/packages/app-builder/src/routes/_builder+/cases+/inboxes.$inboxId.tsx b/packages/app-builder/src/routes/_builder+/cases+/inboxes.$inboxId.tsx index 5b383e333b..3eaf6ae9b1 100644 --- a/packages/app-builder/src/routes/_builder+/cases+/inboxes.$inboxId.tsx +++ b/packages/app-builder/src/routes/_builder+/cases+/inboxes.$inboxId.tsx @@ -9,6 +9,7 @@ import { } from '@app-builder/components/Cases/Filters'; import { InputWithButton } from '@app-builder/components/InputWithButton'; import { useCursorPaginatedFetcher } from '@app-builder/hooks/useCursorPaginatedFetcher'; +import useIntersection from '@app-builder/hooks/useIntersection'; import { isForbiddenHttpError, isNotFoundHttpError } from '@app-builder/models'; import { type Case, type CaseStatus, caseStatuses } from '@app-builder/models/cases'; import { type PaginatedResponse, type PaginationParams } from '@app-builder/models/pagination'; @@ -25,7 +26,7 @@ import { type LoaderFunctionArgs, redirect } from '@remix-run/node'; import { useLoaderData, useNavigate } from '@remix-run/react'; import { type Namespace } from 'i18next'; import qs from 'qs'; -import { useCallback } from 'react'; +import { useCallback, useEffect, useRef } from 'react'; import { useTranslation } from 'react-i18next'; import { omit } from 'remeda'; import { Button, cn } from 'ui-design-system'; @@ -212,11 +213,23 @@ export default function Cases() { [navigate, inboxId, next, previous, reset], ); + const paginationSentinelRef = useRef(null); + const containerRef = useRef(null); + const paginationIntersection = useIntersection(paginationSentinelRef, { + root: containerRef.current, + rootMargin: '-24px', + threshold: 0, + }); + + useEffect(() => { + containerRef.current?.scrollTo({ top: 0 }); + }, [cases]); + return ( - - -
+ + +
@@ -262,7 +275,6 @@ export default function Cases() { -
+
{t('cases:list.results_per_page')} {[25, 50, 100].map((limit) => { @@ -313,8 +333,9 @@ export default function Cases() { />
+
- + );