From 8bea24ec554be6cefde478e6590391c8d0389e99 Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Fri, 18 Jun 2021 10:33:58 -0700
Subject: [PATCH] [UX feedback] Do not render page headers while loading on
 Overview & Sources pages

---
 .../organization_sources.test.tsx             |  7 +++++
 .../content_sources/organization_sources.tsx  | 30 +++++++++++--------
 .../views/overview/overview.test.tsx          |  7 +++++
 .../views/overview/overview.tsx               | 12 ++++----
 4 files changed, 36 insertions(+), 20 deletions(-)

diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/organization_sources.test.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/organization_sources.test.tsx
index a4747e844f506c..2317c84af2432b 100644
--- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/organization_sources.test.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/organization_sources.test.tsx
@@ -39,4 +39,11 @@ describe('OrganizationSources', () => {
 
     expect(wrapper.find(SourcesTable)).toHaveLength(1);
   });
+
+  it('does not render a page header when data is loading (to prevent a jump after redirect)', () => {
+    setMockValues({ ...mockValues, dataLoading: true });
+    const wrapper = shallow(<OrganizationSources />);
+
+    expect(wrapper.prop('pageHeader')).toBeUndefined();
+  });
 });
diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/organization_sources.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/organization_sources.tsx
index c3d5eee1399bba..a4273ae2ae6a2d 100644
--- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/organization_sources.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/organization_sources.tsx
@@ -39,19 +39,23 @@ export const OrganizationSources: React.FC = () => {
     <WorkplaceSearchPageTemplate
       pageChrome={[NAV.SOURCES]}
       pageViewTelemetry="organization_sources"
-      pageHeader={{
-        pageTitle: ORG_SOURCES_HEADER_TITLE,
-        description: ORG_SOURCES_HEADER_DESCRIPTION,
-        rightSideItems: [
-          <EuiButtonTo
-            to={getSourcesPath(ADD_SOURCE_PATH, true)}
-            data-test-subj="AddSourceButton"
-            fill
-          >
-            {ORG_SOURCES_LINK}
-          </EuiButtonTo>,
-        ],
-      }}
+      pageHeader={
+        dataLoading
+          ? undefined
+          : {
+              pageTitle: ORG_SOURCES_HEADER_TITLE,
+              description: ORG_SOURCES_HEADER_DESCRIPTION,
+              rightSideItems: [
+                <EuiButtonTo
+                  to={getSourcesPath(ADD_SOURCE_PATH, true)}
+                  data-test-subj="AddSourceButton"
+                  fill
+                >
+                  {ORG_SOURCES_LINK}
+                </EuiButtonTo>,
+              ],
+            }
+      }
       isLoading={dataLoading}
       isEmptyState={!contentSources.length}
       emptyState={<Redirect to={getSourcesPath(ADD_SOURCE_PATH, true)} />}
diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/overview.test.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/overview.test.tsx
index cf23470e8155eb..7bd40d6f04a56f 100644
--- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/overview.test.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/overview.test.tsx
@@ -25,6 +25,13 @@ describe('Overview', () => {
     expect(mockActions.initializeOverview).toHaveBeenCalled();
   });
 
+  it('does not render a page header when data is loading (to prevent a jump between non/onboarding headers)', () => {
+    setMockValues({ dataLoading: true });
+    const wrapper = shallow(<Overview />);
+
+    expect(wrapper.prop('pageHeader')).toBeUndefined();
+  });
+
   it('renders onboarding state', () => {
     setMockValues({ dataLoading: false });
     const wrapper = shallow(<Overview />);
diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/overview.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/overview.tsx
index 0049c5b732d3d0..c51fdb64b8f261 100644
--- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/overview.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/overview.tsx
@@ -53,17 +53,15 @@ export const Overview: React.FC = () => {
 
   const hideOnboarding = hasUsers && hasOrgSources && isOldAccount && orgName !== defaultOrgName;
 
-  const headerTitle = dataLoading || hideOnboarding ? HEADER_TITLE : ONBOARDING_HEADER_TITLE;
-  const headerDescription =
-    dataLoading || hideOnboarding ? HEADER_DESCRIPTION : ONBOARDING_HEADER_DESCRIPTION;
+  const headerTitle = hideOnboarding ? HEADER_TITLE : ONBOARDING_HEADER_TITLE;
+  const headerDescription = hideOnboarding ? HEADER_DESCRIPTION : ONBOARDING_HEADER_DESCRIPTION;
 
   return (
     <WorkplaceSearchPageTemplate
       pageChrome={[]}
-      pageHeader={{
-        pageTitle: headerTitle,
-        description: headerDescription,
-      }}
+      pageHeader={
+        dataLoading ? undefined : { pageTitle: headerTitle, description: headerDescription }
+      }
       pageViewTelemetry="overview"
       isLoading={dataLoading}
     >