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() {
/>
+
-
+
);