[UX feedback] Do not render page headers while loading on Overview & …

…Sources pages
elastic · Jun 18, 2021 · 8bea24e · 8bea24e
1 parent 6c305e5
commit 8bea24e
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 20 deletions.
diff --git a/.../public/applications/workplace_search/views/content_sources/organization_sources.test.tsx b/.../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/...earch/public/applications/workplace_search/views/content_sources/organization_sources.tsx b/...earch/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/...s/enterprise_search/public/applications/workplace_search/views/overview/overview.test.tsx b/...s/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/...lugins/enterprise_search/public/applications/workplace_search/views/overview/overview.tsx b/...lugins/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}
     >