diff --git a/src/core/public/chrome/ui/header/collapsible_nav.tsx b/src/core/public/chrome/ui/header/collapsible_nav.tsx
index b00e82b660e9f..151f98120ffc2 100644
--- a/src/core/public/chrome/ui/header/collapsible_nav.tsx
+++ b/src/core/public/chrome/ui/header/collapsible_nav.tsx
@@ -31,7 +31,7 @@ import {
 import { i18n } from '@kbn/i18n';
 import { groupBy, sortBy } from 'lodash';
 import React, { Fragment, useRef } from 'react';
-import { useObservable } from 'react-use';
+import useObservable from 'react-use/lib/useObservable';
 import * as Rx from 'rxjs';
 import { ChromeNavLink, ChromeRecentlyAccessedHistoryItem } from '../..';
 import { AppCategory } from '../../../../types';
diff --git a/src/core/public/chrome/ui/header/header.tsx b/src/core/public/chrome/ui/header/header.tsx
index e01a62a54c34d..8ab7cf872fe87 100644
--- a/src/core/public/chrome/ui/header/header.tsx
+++ b/src/core/public/chrome/ui/header/header.tsx
@@ -28,7 +28,7 @@ import {
 import { i18n } from '@kbn/i18n';
 import classnames from 'classnames';
 import React, { createRef, useState } from 'react';
-import { useObservable } from 'react-use';
+import useObservable from 'react-use/lib/useObservable';
 import { Observable } from 'rxjs';
 import { LoadingIndicator } from '../';
 import {
diff --git a/src/core/public/chrome/ui/header/header_breadcrumbs.tsx b/src/core/public/chrome/ui/header/header_breadcrumbs.tsx
index 174c46981db53..52412f8990c7a 100644
--- a/src/core/public/chrome/ui/header/header_breadcrumbs.tsx
+++ b/src/core/public/chrome/ui/header/header_breadcrumbs.tsx
@@ -20,7 +20,7 @@
 import { EuiHeaderBreadcrumbs } from '@elastic/eui';
 import classNames from 'classnames';
 import React from 'react';
-import { useObservable } from 'react-use';
+import useObservable from 'react-use/lib/useObservable';
 import { Observable } from 'rxjs';
 import { ChromeBreadcrumb } from '../../chrome_service';
 
diff --git a/src/core/public/chrome/ui/header/header_logo.tsx b/src/core/public/chrome/ui/header/header_logo.tsx
index dee93ecb1a804..83e0c52ab3f3a 100644
--- a/src/core/public/chrome/ui/header/header_logo.tsx
+++ b/src/core/public/chrome/ui/header/header_logo.tsx
@@ -20,7 +20,7 @@
 import { EuiHeaderLogo } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
-import { useObservable } from 'react-use';
+import useObservable from 'react-use/lib/useObservable';
 import { Observable } from 'rxjs';
 import Url from 'url';
 import { ChromeNavLink } from '../..';
diff --git a/src/core/public/chrome/ui/header/header_nav_controls.tsx b/src/core/public/chrome/ui/header/header_nav_controls.tsx
index 8d9d8097fd8e3..69b0e3bd8afe3 100644
--- a/src/core/public/chrome/ui/header/header_nav_controls.tsx
+++ b/src/core/public/chrome/ui/header/header_nav_controls.tsx
@@ -19,7 +19,7 @@
 
 import { EuiHeaderSectionItem } from '@elastic/eui';
 import React from 'react';
-import { useObservable } from 'react-use';
+import useObservable from 'react-use/lib/useObservable';
 import { Observable } from 'rxjs';
 import { ChromeNavControl } from '../../nav_controls';
 import { HeaderExtension } from './header_extension';
diff --git a/src/core/public/overlays/banners/user_banner_service.tsx b/src/core/public/overlays/banners/user_banner_service.tsx
index 643d95a1e3bb4..2b93c3e4b6c21 100644
--- a/src/core/public/overlays/banners/user_banner_service.tsx
+++ b/src/core/public/overlays/banners/user_banner_service.tsx
@@ -19,12 +19,11 @@
 
 import React, { Fragment } from 'react';
 import ReactDOM from 'react-dom';
-import ReactMarkdown from 'react-markdown';
 import { filter } from 'rxjs/operators';
 import { Subscription } from 'rxjs';
 
 import { FormattedMessage } from '@kbn/i18n/react';
-import { EuiCallOut, EuiButton } from '@elastic/eui';
+import { EuiCallOut, EuiButton, EuiLoadingSpinner } from '@elastic/eui';
 
 import { I18nStart } from '../../i18n';
 import { IUiSettingsClient } from '../../ui_settings';
@@ -36,6 +35,8 @@ interface StartDeps {
   uiSettings: IUiSettingsClient;
 }
 
+const ReactMarkdownLazy = React.lazy(() => import('react-markdown'));
+
 /**
  * Sets up the custom banner that can be specified in advanced settings.
  * @internal
@@ -75,7 +76,15 @@ export class UserBannerService {
                 }
                 iconType="help"
               >
-                <ReactMarkdown renderers={{ root: Fragment }}>{content.trim()}</ReactMarkdown>
+                <React.Suspense
+                  fallback={
+                    <div>
+                      <EuiLoadingSpinner />
+                    </div>
+                  }
+                >
+                  <ReactMarkdownLazy renderers={{ root: Fragment }} source={content.trim()} />
+                </React.Suspense>
 
                 <EuiButton type="primary" size="s" onClick={() => banners.remove(id!)}>
                   <FormattedMessage