Index pattern loading hook

src/plugins/discover/public/application/apps/context/context_app_route.tsx

@@ -5,13 +5,14 @@
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 import { i18n } from '@kbn/i18n';
-import { IndexPattern } from '../../../../../data/common';
 import { DiscoverServices } from '../../../build_services';
 import { ContextApp } from '../../components/context_app/context_app';
 import { getRootBreadcrumbs } from '../../helpers/breadcrumbs';
+import { LoadingIndicator } from '../../components/common/loading_indicator';
+import { useIndexPattern } from '../../helpers/use_index_pattern';
 
 export interface ContextAppProps {
   /**
@@ -30,7 +31,6 @@ export function ContextAppRoute(props: ContextAppProps) {
   const { chrome } = services;
 
   const { indexPatternId, id } = useParams<ContextUrlParams>();
-  const [indexPattern, setIndexPattern] = useState<IndexPattern | undefined>(undefined);
 
   useEffect(() => {
     chrome.setBreadcrumbs([
@@ -43,17 +43,10 @@ export function ContextAppRoute(props: ContextAppProps) {
     ]);
   }, [chrome]);
 
-  useEffect(() => {
-    async function getIndexPattern() {
-      const ip = await services.indexPatterns.get(indexPatternId);
-      setIndexPattern(ip);
-    }
-
-    getIndexPattern();
-  }, [indexPatternId, services.indexPatterns]);
+  const indexPattern = useIndexPattern(services.indexPatterns, indexPatternId);
 
   if (!indexPattern) {
-    return null;
+    return <LoadingIndicator />;
   }
 
   return <ContextApp indexPatternId={indexPatternId} anchorId={id} indexPattern={indexPattern} />;

src/plugins/discover/public/application/apps/doc/single_doc_route.tsx

@@ -5,12 +5,13 @@
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import { useLocation, useParams } from 'react-router-dom';
-import { IndexPattern } from '../../../../../data/common';
 import { DiscoverServices } from '../../../build_services';
 import { getRootBreadcrumbs } from '../../helpers/breadcrumbs';
 import { Doc } from '../../components/doc/doc';
+import { LoadingIndicator } from '../../components/common/loading_indicator';
+import { useIndexPattern } from '../../helpers/use_index_pattern';
 
 export interface SingleDocRouteProps {
   /**
@@ -33,7 +34,6 @@ export function SingleDocRoute(props: SingleDocRouteProps) {
   const { chrome, timefilter, indexPatterns } = services;
 
   const { indexPatternId, index } = useParams<DocUrlParams>();
-  const [indexPattern, setIndexPattern] = useState<IndexPattern | undefined>(undefined);
 
   const query = useQuery();
   const docId = query.get('id') || '';
@@ -52,15 +52,10 @@ export function SingleDocRoute(props: SingleDocRouteProps) {
     timefilter.disableTimeRangeSelector();
   });
 
-  async function getIndexPattern() {
-    const ip = await services.indexPatterns.get(indexPatternId);
-    setIndexPattern(ip);
-  }
-
-  getIndexPattern();
+  const indexPattern = useIndexPattern(services.indexPatterns, indexPatternId);
 
   if (!indexPattern) {
-    return null;
+    return <LoadingIndicator />;
   }
 
   return (

src/plugins/discover/public/application/apps/main/discover_main_route.tsx

@@ -10,7 +10,6 @@ import { History } from 'history';
 import { useParams } from 'react-router-dom';
 import type { SavedObject as SavedObjectDeprecated } from 'src/plugins/saved_objects/public';
 import { IndexPatternAttributes, SavedObject } from 'src/plugins/data/common';
-import { EuiFlexGroup, EuiLoadingSpinner, EuiFlexItem } from '@elastic/eui';
 import { DiscoverServices } from '../../../build_services';
 import { SavedSearch } from '../../../saved_searches';
 import { getState } from './services/discover_state';
@@ -19,6 +18,7 @@ import { DiscoverMainApp } from './discover_main_app';
 import { getRootBreadcrumbs, getSavedSearchBreadcrumbs } from '../../helpers/breadcrumbs';
 import { redirectWhenMissing } from '../../../../../kibana_utils/public';
 import { getUrlTracker } from '../../../kibana_services';
+import { LoadingIndicator } from '../../components/common/loading_indicator';
 
 const DiscoverMainAppMemoized = memo(DiscoverMainApp);
 
@@ -125,18 +125,14 @@ export function DiscoverMainRoute({ services, history }: DiscoverMainProps) {
 
   useEffect(() => {
     chrome.setBreadcrumbs(
-      savedSearch && savedSearch.title ? getSavedSearchBreadcrumbs(savedSearch.title) : getRootBreadcrumbs()
+      savedSearch && savedSearch.title
+        ? getSavedSearchBreadcrumbs(savedSearch.title)
+        : getRootBreadcrumbs()
     );
   }, [chrome, savedSearch]);
 
   if (!indexPattern || !savedSearch) {
-    return (
-      <EuiFlexGroup justifyContent="spaceAround" alignItems="center">
-        <EuiFlexItem grow={false}>
-          <EuiLoadingSpinner size="l" />
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    );
+    return <LoadingIndicator />;
   }
 
   return (

src/plugins/discover/public/application/components/common/loading_indicator.test.tsx

@@ -0,0 +1,17 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+import { LoadingIndicator } from './loading_indicator';
+import React from 'react';
+import { mount } from 'enzyme';
+
+describe('Loading indicator', () => {
+  it('renders correctly', () => {
+    const component = mount(<LoadingIndicator />);
+    expect(component).toMatchSnapshot();
+  });
+});

src/plugins/discover/public/application/components/common/loading_indicator.tsx

@@ -0,0 +1,19 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+import { EuiFlexGroup, EuiFlexItem, EuiLoadingSpinner } from '@elastic/eui';
+import React from 'react';
+
+export const LoadingIndicator = () => {
+  return (
+    <EuiFlexGroup justifyContent="spaceAround" alignItems="center">
+      <EuiFlexItem grow={false}>
+        <EuiLoadingSpinner size="l" />
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};

src/plugins/discover/public/application/helpers/use_index_pattern.test.tsx

@@ -0,0 +1,19 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+import { useIndexPattern } from './use_index_pattern';
+import { indexPatternMock } from '../../__mocks__/index_pattern';
+import { indexPatternsMock } from '../../__mocks__/index_patterns';
+import { renderHook, act } from '@testing-library/react-hooks';
+
+describe('Use Index Pattern', () => {
+  test('returning a valid index pattern', async () => {
+    const { result } = renderHook(() => useIndexPattern(indexPatternsMock, 'the-index-pattern-id'));
+    await act(() => Promise.resolve());
+    expect(result.current).toBe(indexPatternMock);
+  });
+});

src/plugins/discover/public/application/helpers/use_index_pattern.tsx

@@ -0,0 +1,22 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+import { useEffect, useState } from 'react';
+import { IndexPattern, IndexPatternsContract } from '../../../../data/common';
+
+export const useIndexPattern = (indexPatterns: IndexPatternsContract, indexPatternId: string) => {
+  const [indexPattern, setIndexPattern] = useState<IndexPattern | undefined>(undefined);
+
+  useEffect(() => {
+    async function loadIndexPattern() {
+      const ip = await indexPatterns.get(indexPatternId);
+      setIndexPattern(ip);
+    }
+    loadIndexPattern();
+  });
+  return indexPattern;
+};