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({