diff --git a/.changeset/nasty-pears-taste.md b/.changeset/nasty-pears-taste.md
new file mode 100644
index 0000000000..667e85d9d4
--- /dev/null
+++ b/.changeset/nasty-pears-taste.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-catalog-react': patch
+---
+
+Fixed an issue where the `` in `offset` mode would unnecessarily re-fetch data when the filter didn't change, causing a flicker effect.
diff --git a/plugins/catalog-react/src/hooks/useEntityListProvider.test.tsx b/plugins/catalog-react/src/hooks/useEntityListProvider.test.tsx
index 8701c56301..2a922cf417 100644
--- a/plugins/catalog-react/src/hooks/useEntityListProvider.test.tsx
+++ b/plugins/catalog-react/src/hooks/useEntityListProvider.test.tsx
@@ -555,7 +555,7 @@ describe('', () => {
});
});
-describe('', () => {
+describe(``, () => {
const origReplaceState = window.history.replaceState;
const pagination: EntityListPagination = { mode: 'offset' };
const limit = 20;
@@ -688,6 +688,18 @@ describe('', () => {
await waitFor(() => {
expect(mockCatalogApi.queryEntities).toHaveBeenCalledTimes(2);
});
+
+ act(() =>
+ result.current.updateFilters({
+ user: EntityUserFilter.owned(ownershipEntityRefs),
+ }),
+ );
+
+ await expect(() =>
+ waitFor(() => {
+ expect(mockCatalogApi.queryEntities).toHaveBeenCalledTimes(3);
+ }),
+ ).rejects.toThrow();
});
it('fetch when limit change', async () => {
@@ -723,7 +735,7 @@ describe('', () => {
expect(result.current.backendEntities.length).toBe(2);
expect(mockCatalogApi.queryEntities).toHaveBeenCalledTimes(1);
- await act(async () => {
+ act(() => {
result.current.updateFilters({
kind: new EntityKindFilter('api', 'API'),
});
@@ -750,7 +762,7 @@ describe('', () => {
expect(result.current.backendEntities.length).toBe(2);
expect(mockCatalogApi.queryEntities).toHaveBeenCalledTimes(1);
- await act(async () => {
+ act(() => {
result.current.setOffset!(5);
result.current.setOffset!(10);
});
diff --git a/plugins/catalog-react/src/hooks/useEntityListProvider.tsx b/plugins/catalog-react/src/hooks/useEntityListProvider.tsx
index b96357eb62..fc2dfe6a73 100644
--- a/plugins/catalog-react/src/hooks/useEntityListProvider.tsx
+++ b/plugins/catalog-react/src/hooks/useEntityListProvider.tsx
@@ -173,7 +173,7 @@ export const EntityListProvider = (
: 'none';
};
- const paginationMode: PaginationMode = getPaginationMode();
+ const paginationMode = getPaginationMode();
const paginationLimit =
typeof props.pagination === 'object' ? props.pagination.limit ?? 20 : 20;
@@ -227,7 +227,7 @@ export const EntityListProvider = (
appliedFilters: {} as EntityFilters,
entities: [],
backendEntities: [],
- pageInfo: paginationMode === 'cursor' ? {} : undefined,
+ pageInfo: {},
offset,
limit,
};
@@ -279,7 +279,8 @@ export const EntityListProvider = (
);
if (
- paginationMode === 'offset' ||
+ (paginationMode === 'offset' &&
+ (outputState.limit !== limit || outputState.offset !== offset)) ||
!isEqual(previousBackendFilter, backendFilter)
) {
const response = await catalogApi.queryEntities({