Slim down core bundle

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';

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 {

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';
 

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 '../..';

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';

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