[PR Feedback] Show loading message

elastic · Feb 26, 2021 · 335eb1a · 335eb1a
1 parent 351fd33
commit 335eb1a
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 11 deletions.
diff --git a/...arch/public/applications/app_search/components/relevance_tuning/relevance_tuning.test.tsx b/...arch/public/applications/app_search/components/relevance_tuning/relevance_tuning.test.tsx
@@ -13,6 +13,7 @@ import { shallow } from 'enzyme';
 
 import { EuiEmptyPrompt } from '@elastic/eui';
 
+import { Loading } from '../../../shared/loading';
 import { UnsavedChangesPrompt } from '../../../shared/unsaved_changes_prompt';
 
 import { RelevanceTuning } from './relevance_tuning';
@@ -27,6 +28,7 @@ describe('RelevanceTuning', () => {
     },
     schemaFieldsWithConflicts: [],
     unsavedChanges: false,
+    dataLoading: false,
   };
 
   const actions = {
@@ -46,6 +48,8 @@ describe('RelevanceTuning', () => {
   it('renders', () => {
     const wrapper = subject();
     expect(wrapper.find(RelevanceTuningForm).exists()).toBe(true);
+    expect(wrapper.find(Loading).exists()).toBe(false);
+    expect(wrapper.find('EmptyCallout').exists()).toBe(false);
   });
 
   it('initializes relevance tuning data', () => {
@@ -60,6 +64,18 @@ describe('RelevanceTuning', () => {
     });
     const wrapper = subject();
     expect(wrapper.find('EmptyCallout').dive().find(EuiEmptyPrompt).exists()).toBe(true);
+    expect(wrapper.find(Loading).exists()).toBe(false);
+    expect(wrapper.find(RelevanceTuningForm).exists()).toBe(false);
+  });
+
+  it('will show a loading message if data is loading', () => {
+    setMockValues({
+      ...values,
+      dataLoading: true,
+    });
+    const wrapper = subject();
+    expect(wrapper.find(Loading).exists()).toBe(true);
+    expect(wrapper.find('EmptyCallout').exists()).toBe(false);
     expect(wrapper.find(RelevanceTuningForm).exists()).toBe(false);
   });
 

diff --git a/...se_search/public/applications/app_search/components/relevance_tuning/relevance_tuning.tsx b/...se_search/public/applications/app_search/components/relevance_tuning/relevance_tuning.tsx
@@ -12,6 +12,7 @@ import { useActions, useValues } from 'kea';
 import { EuiButton, EuiEmptyPrompt, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
+import { Loading } from '../../../shared/loading';
 import { UnsavedChangesPrompt } from '../../../shared/unsaved_changes_prompt';
 import { DOCS_PREFIX } from '../../routes';
 
@@ -63,26 +64,36 @@ const EmptyCallout: React.FC = () => {
 };
 
 export const RelevanceTuning: React.FC<Props> = ({ engineBreadcrumb }) => {
-  const { engineHasSchemaFields, unsavedChanges } = useValues(RelevanceTuningLogic);
+  const { dataLoading, engineHasSchemaFields, unsavedChanges } = useValues(RelevanceTuningLogic);
   const { initializeRelevanceTuning } = useActions(RelevanceTuningLogic);
 
   useEffect(() => {
     initializeRelevanceTuning();
   }, []);
 
+  const body = () => {
+    if (dataLoading) {
+      return <Loading />;
+    }
+
+    if (!engineHasSchemaFields) {
+      return <EmptyCallout />;
+    }
+
+    return (
+      <EuiFlexGroup>
+        <EuiFlexItem>
+          <RelevanceTuningForm />
+        </EuiFlexItem>
+        <EuiFlexItem />
+      </EuiFlexGroup>
+    );
+  };
+
   return (
     <RelevanceTuningLayout engineBreadcrumb={engineBreadcrumb}>
       <UnsavedChangesPrompt hasUnsavedChanges={unsavedChanges} />
-      {engineHasSchemaFields ? (
-        <EuiFlexGroup>
-          <EuiFlexItem>
-            <RelevanceTuningForm />
-          </EuiFlexItem>
-          <EuiFlexItem />
-        </EuiFlexGroup>
-      ) : (
-        <EmptyCallout />
-      )}
+      {body()}
     </RelevanceTuningLayout>
   );
 };