FE: Remove redundant connectors request

Author: Vixtir

frontend/src/components/Connect/List/List.tsx

@@ -1,15 +1,10 @@
 import React from 'react';
-import useAppParams from 'lib/hooks/useAppParams';
-import { ClusterNameRoute } from 'lib/paths';
 import Table, { TagCell } from 'components/common/NewTable';
 import { FullConnectorInfo } from 'generated-sources';
-import { useConnectors } from 'lib/hooks/api/kafkaConnect';
 import { ColumnDef } from '@tanstack/react-table';
-import { useSearchParams } from 'react-router-dom';
 import { useQueryPersister } from 'components/common/NewTable/ColumnFilter';
 import { useLocalStoragePersister } from 'components/common/NewTable/ColumnResizer/lib';
 import BreakableTextCell from 'components/common/NewTable/BreakableTextCell';
-import useFts from 'components/common/Fts/useFts';
 
 import ActionsCell from './ActionsCell';
 import TopicsCell from './TopicsCell';
@@ -78,16 +73,9 @@ const kafkaConnectColumns: ColumnDef<FullConnectorInfo, string>[] = [
   },
 ];
 
-const List: React.FC = () => {
-  const { clusterName } = useAppParams<ClusterNameRoute>();
-  const [searchParams] = useSearchParams();
-  const { isFtsEnabled } = useFts('connects');
-  const { data: connectors } = useConnectors(
-    clusterName,
-    searchParams.get('q') || '',
-    isFtsEnabled
-  );
+type ConnectorsListProps = { connectors: FullConnectorInfo[] | undefined };
 
+const List: React.FC<ConnectorsListProps> = ({ connectors }) => {
   const filterPersister = useQueryPersister(kafkaConnectColumns);
   const columnSizingPersister = useLocalStoragePersister('KafkaConnect');
 

frontend/src/components/Connect/List/ListPage.tsx

@@ -6,6 +6,7 @@ import PageLoader from 'components/common/PageLoader/PageLoader';
 import { useConnectors } from 'lib/hooks/api/kafkaConnect';
 import Fts from 'components/common/Fts/Fts';
 import useFts from 'components/common/Fts/useFts';
+import { useSearchParams } from 'react-router-dom';
 
 import * as S from './ListPage.styled';
 import List from './List';
@@ -14,7 +15,13 @@ import ConnectorsStatistics from './Statistics/Statistics';
 const ListPage: React.FC = () => {
   useFts('connects');
   const { clusterName } = useAppParams<ClusterNameRoute>();
-  const { data, isLoading } = useConnectors(clusterName);
+  const { isFtsEnabled } = useFts('connects');
+  const [searchParams] = useSearchParams();
+  const { data, isLoading } = useConnectors(
+    clusterName,
+    searchParams.get('q') || '',
+    isFtsEnabled
+  );
 
   return (
     <>
@@ -26,7 +33,7 @@ const ListPage: React.FC = () => {
         />
       </S.Search>
       <Suspense fallback={<PageLoader />}>
-        <List />
+        <List connectors={data ?? []} />
       </Suspense>
     </>
   );

frontend/src/lib/hooks/api/kafkaConnect.ts

@@ -63,6 +63,7 @@ export function useConnectors(
     connectorsKey(clusterName, search, fts),
     () => api.getAllConnectors({ clusterName, search, fts }),
     {
+      keepPreviousData: true,
       select: (data) =>
         [...data].sort((a, b) => {
           if (a.name < b.name) {