[Enterprise Search]Fix page template loader conditions to trigger on page load (#138889)

* Fix page template loader conditions to trigger on page load

This commit adds a new flag to check if we are on the page load to
adjust the load conditions. In combination with isInitialRequest it is
used to set the loading states of the page including the search bar.

* Review suggestions

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_indices/indices_logic.test.ts

@@ -30,6 +30,7 @@ const DEFAULT_VALUES = {
   data: undefined,
   hasNoIndices: false,
   indices: [],
+  isFirstRequest: true,
   isLoading: true,
   meta: DEFAULT_META,
   status: Status.IDLE,
@@ -92,6 +93,7 @@ describe('IndicesLogic', () => {
           },
           hasNoIndices: false,
           indices: elasticsearchViewIndices,
+          isFirstRequest: false,
           isLoading: false,
           meta: newMeta,
           status: Status.SUCCESS,
@@ -122,6 +124,7 @@ describe('IndicesLogic', () => {
           },
           hasNoIndices: true,
           indices: [],
+          isFirstRequest: false,
           isLoading: false,
           meta,
           status: Status.SUCCESS,
@@ -150,6 +153,7 @@ describe('IndicesLogic', () => {
           },
           hasNoIndices: false,
           indices: [],
+          isFirstRequest: false,
           isLoading: false,
           meta,
           status: Status.SUCCESS,
@@ -229,6 +233,7 @@ describe('IndicesLogic', () => {
           },
           hasNoIndices: false,
           indices: elasticsearchViewIndices,
+          isFirstRequest: false,
           isLoading: false,
           meta: DEFAULT_META,
           status: Status.SUCCESS,
@@ -280,6 +285,7 @@ describe('IndicesLogic', () => {
               ingestionStatus: IngestionStatus.ERROR,
             },
           ],
+          isFirstRequest: false,
           isLoading: false,
           meta: DEFAULT_META,
           status: Status.SUCCESS,
@@ -320,6 +326,7 @@ describe('IndicesLogic', () => {
               ingestionStatus: IngestionStatus.CONNECTED,
             },
           ],
+          isFirstRequest: false,
           isLoading: false,
           meta: DEFAULT_META,
           status: Status.SUCCESS,
@@ -357,6 +364,7 @@ describe('IndicesLogic', () => {
               ingestionStatus: IngestionStatus.ERROR,
             },
           ],
+          isFirstRequest: false,
           isLoading: false,
           meta: DEFAULT_META,
           status: Status.SUCCESS,
@@ -406,6 +414,7 @@ describe('IndicesLogic', () => {
               ingestionStatus: IngestionStatus.SYNC_ERROR,
             },
           ],
+          isFirstRequest: false,
           isLoading: false,
           meta: DEFAULT_META,
           status: Status.SUCCESS,

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_indices/indices_logic.ts

@@ -43,11 +43,13 @@ export interface IndicesActions {
   }): { meta: Meta; returnHiddenIndices: boolean; searchQuery?: string };
   makeRequest: typeof FetchIndicesAPILogic.actions.makeRequest;
   onPaginate(newPageIndex: number): { newPageIndex: number };
+  setIsFirstRequest(): boolean;
 }
 export interface IndicesValues {
   data: typeof FetchIndicesAPILogic.values.data;
   hasNoIndices: boolean;
   indices: ElasticsearchViewIndex[];
+  isFirstRequest: boolean;
   isLoading: boolean;
   meta: Meta;
   status: typeof FetchIndicesAPILogic.values.status;
@@ -61,6 +63,7 @@ export const IndicesLogic = kea<MakeLogicType<IndicesValues, IndicesActions>>({
       searchQuery,
     }),
     onPaginate: (newPageIndex) => ({ newPageIndex }),
+    setIsFirstRequest: () => true,
   },
   connect: {
     actions: [FetchIndicesAPILogic, ['makeRequest', 'apiSuccess', 'apiError']],
@@ -76,6 +79,14 @@ export const IndicesLogic = kea<MakeLogicType<IndicesValues, IndicesActions>>({
   }),
   path: ['enterprise_search', 'content', 'indices_logic'],
   reducers: () => ({
+    isFirstRequest: [
+      true,
+      {
+        apiError: () => false,
+        apiSuccess: () => false,
+        setIsFirstRequest: () => true,
+      },
+    ],
     meta: [
       DEFAULT_META,
       {
@@ -96,8 +107,8 @@ export const IndicesLogic = kea<MakeLogicType<IndicesValues, IndicesActions>>({
       (data) => (data?.indices ? data.indices.map(indexToViewIndex) : []),
     ],
     isLoading: [
-      () => [selectors.status],
-      (status) => [Status.LOADING, Status.IDLE].includes(status),
+      () => [selectors.status, selectors.isFirstRequest],
+      (status, isFirstRequest) => [Status.LOADING, Status.IDLE].includes(status) && isFirstRequest,
     ],
   }),
 });

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_indices/search_indices.test.tsx

@@ -33,6 +33,7 @@ const mockValues = {
 const mockActions = {
   fetchIndices: jest.fn(),
   onPaginate: jest.fn(),
+  setIsFirstRequest: jest.fn(),
 };
 
 describe('SearchIndices', () => {
@@ -55,6 +56,7 @@ describe('SearchIndices', () => {
 
       expect(wrapper.find(GettingStartedSteps)).toHaveLength(1);
       expect(wrapper.find(ElasticsearchResources)).toHaveLength(1);
+      expect(mockActions.setIsFirstRequest).toHaveBeenCalled();
     });
   });
 

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_indices/search_indices.tsx

@@ -49,7 +49,7 @@ export const baseBreadcrumbs = [
 ];
 
 export const SearchIndices: React.FC = () => {
-  const { fetchIndices, onPaginate } = useActions(IndicesLogic);
+  const { fetchIndices, onPaginate, setIsFirstRequest } = useActions(IndicesLogic);
   const { meta, indices, hasNoIndices, isLoading } = useValues(IndicesLogic);
   const [showHiddenIndices, setShowHiddenIndices] = useState(false);
   const [searchQuery, setSearchValue] = useState('');
@@ -58,18 +58,29 @@ export const SearchIndices: React.FC = () => {
     'enterprise-search-indices-callout-dismissed',
     false
   );
+
   useEffect(() => {
-    fetchIndices({ meta, returnHiddenIndices: showHiddenIndices, searchQuery });
+    // We don't want to trigger loading for each search query change, so we need this
+    // flag to set if the call to backend is first request.
+    setIsFirstRequest();
+  }, []);
+
+  useEffect(() => {
+    fetchIndices({
+      meta,
+      returnHiddenIndices: showHiddenIndices,
+      searchQuery,
+    });
   }, [searchQuery, meta.page.current, showHiddenIndices]);
 
   const pageTitle = isLoading
     ? ''
-    : indices.length !== 0
-    ? i18n.translate('xpack.enterpriseSearch.content.searchIndices.searchIndices.pageTitle', {
-        defaultMessage: 'Elasticsearch indices',
-      })
-    : i18n.translate('xpack.enterpriseSearch.content.searchIndices.searchIndices.emptyPageTitle', {
+    : hasNoIndices
+    ? i18n.translate('xpack.enterpriseSearch.content.searchIndices.searchIndices.emptyPageTitle', {
         defaultMessage: 'Welcome to Enterprise Search',
+      })
+    : i18n.translate('xpack.enterpriseSearch.content.searchIndices.searchIndices.pageTitle', {
+        defaultMessage: 'Elasticsearch indices',
       });
 
   return (