diff --git a/src/dev/storybook/aliases.ts b/src/dev/storybook/aliases.ts
index 153725fc48e7b..36c742dc40403 100644
--- a/src/dev/storybook/aliases.ts
+++ b/src/dev/storybook/aliases.ts
@@ -22,6 +22,7 @@ export const storybookAliases = {
   canvas: 'x-pack/plugins/canvas/storybook',
   codeeditor: 'src/plugins/kibana_react/public/code_editor/.storybook',
   dashboard_enhanced: 'x-pack/plugins/dashboard_enhanced/.storybook',
+  data_enhanced: 'x-pack/plugins/data_enhanced/.storybook',
   embeddable: 'src/plugins/embeddable/.storybook',
   infra: 'x-pack/plugins/infra/.storybook',
   security_solution: 'x-pack/plugins/security_solution/.storybook',
diff --git a/src/plugins/data/common/search/session/mocks.ts b/src/plugins/data/common/search/session/mocks.ts
index 2b64bbbd27565..370faaa640c56 100644
--- a/src/plugins/data/common/search/session/mocks.ts
+++ b/src/plugins/data/common/search/session/mocks.ts
@@ -17,6 +17,7 @@
  * under the License.
  */
 
+import { BehaviorSubject } from 'rxjs';
 import { ISessionService } from './types';
 
 export function getSessionServiceMock(): jest.Mocked<ISessionService> {
@@ -25,6 +26,6 @@ export function getSessionServiceMock(): jest.Mocked<ISessionService> {
     start: jest.fn(),
     restore: jest.fn(),
     getSessionId: jest.fn(),
-    getSession$: jest.fn(),
+    getSession$: jest.fn(() => new BehaviorSubject(undefined).asObservable()),
   };
 }
diff --git a/x-pack/plugins/data_enhanced/.storybook/main.js b/x-pack/plugins/data_enhanced/.storybook/main.js
new file mode 100644
index 0000000000000..1818aa44a9399
--- /dev/null
+++ b/x-pack/plugins/data_enhanced/.storybook/main.js
@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+module.exports = require('@kbn/storybook').defaultConfig;
diff --git a/x-pack/plugins/data_enhanced/config.ts b/x-pack/plugins/data_enhanced/config.ts
new file mode 100644
index 0000000000000..9838f0959ef19
--- /dev/null
+++ b/x-pack/plugins/data_enhanced/config.ts
@@ -0,0 +1,17 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { schema, TypeOf } from '@kbn/config-schema';
+
+export const configSchema = schema.object({
+  search: schema.object({
+    sendToBackground: schema.object({
+      enabled: schema.boolean({ defaultValue: false }),
+    }),
+  }),
+});
+
+export type ConfigSchema = TypeOf<typeof configSchema>;
diff --git a/x-pack/plugins/data_enhanced/kibana.json b/x-pack/plugins/data_enhanced/kibana.json
index 5ded0f8f0dec3..bc7c8410d3df1 100644
--- a/x-pack/plugins/data_enhanced/kibana.json
+++ b/x-pack/plugins/data_enhanced/kibana.json
@@ -12,5 +12,5 @@
   "optionalPlugins": ["kibanaUtils", "usageCollection"],
   "server": true,
   "ui": true,
-  "requiredBundles": ["kibanaUtils"]
+  "requiredBundles": ["kibanaUtils", "kibanaReact"]
 }
diff --git a/x-pack/plugins/data_enhanced/public/index.ts b/x-pack/plugins/data_enhanced/public/index.ts
index 22ac0c9883966..7fe34e21fde5c 100644
--- a/x-pack/plugins/data_enhanced/public/index.ts
+++ b/x-pack/plugins/data_enhanced/public/index.ts
@@ -4,9 +4,12 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { PluginInitializerContext } from 'kibana/public';
 import { DataEnhancedPlugin, DataEnhancedSetup, DataEnhancedStart } from './plugin';
+import { ConfigSchema } from '../config';
 
-export const plugin = () => new DataEnhancedPlugin();
+export const plugin = (initializerContext: PluginInitializerContext<ConfigSchema>) =>
+  new DataEnhancedPlugin(initializerContext);
 
 export { DataEnhancedSetup, DataEnhancedStart };
 
diff --git a/x-pack/plugins/data_enhanced/public/plugin.ts b/x-pack/plugins/data_enhanced/public/plugin.ts
index 43ad4a9ed9b8b..948858a5ed4c1 100644
--- a/x-pack/plugins/data_enhanced/public/plugin.ts
+++ b/x-pack/plugins/data_enhanced/public/plugin.ts
@@ -4,12 +4,16 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { CoreSetup, CoreStart, Plugin } from 'src/core/public';
+import React from 'react';
+import { CoreSetup, CoreStart, Plugin, PluginInitializerContext } from 'src/core/public';
 import { DataPublicPluginSetup, DataPublicPluginStart } from '../../../../src/plugins/data/public';
+
 import { setAutocompleteService } from './services';
 import { setupKqlQuerySuggestionProvider, KUERY_LANGUAGE_NAME } from './autocomplete';
-
 import { EnhancedSearchInterceptor } from './search/search_interceptor';
+import { toMountPoint } from '../../../../src/plugins/kibana_react/public';
+import { createConnectedBackgroundSessionIndicator } from './search';
+import { ConfigSchema } from '../config';
 
 export interface DataEnhancedSetupDependencies {
   data: DataPublicPluginSetup;
@@ -25,6 +29,8 @@ export class DataEnhancedPlugin
   implements Plugin<void, void, DataEnhancedSetupDependencies, DataEnhancedStartDependencies> {
   private enhancedSearchInterceptor!: EnhancedSearchInterceptor;
 
+  constructor(private initializerContext: PluginInitializerContext<ConfigSchema>) {}
+
   public setup(
     core: CoreSetup<DataEnhancedStartDependencies>,
     { data }: DataEnhancedSetupDependencies
@@ -52,6 +58,18 @@ export class DataEnhancedPlugin
 
   public start(core: CoreStart, plugins: DataEnhancedStartDependencies) {
     setAutocompleteService(plugins.data.autocomplete);
+
+    if (this.initializerContext.config.get().search.sendToBackground.enabled) {
+      core.chrome.setBreadcrumbsAppendExtension({
+        content: toMountPoint(
+          React.createElement(
+            createConnectedBackgroundSessionIndicator({
+              sessionService: plugins.data.search.session,
+            })
+          )
+        ),
+      });
+    }
   }
 
   public stop() {
diff --git a/x-pack/plugins/data_enhanced/public/search/index.ts b/x-pack/plugins/data_enhanced/public/search/index.ts
new file mode 100644
index 0000000000000..1a33812ca8566
--- /dev/null
+++ b/x-pack/plugins/data_enhanced/public/search/index.ts
@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export * from './ui';
diff --git a/x-pack/plugins/data_enhanced/public/search/ui/background_session_indicator/background_session_indicator.scss b/x-pack/plugins/data_enhanced/public/search/ui/background_session_indicator/background_session_indicator.scss
new file mode 100644
index 0000000000000..2d13d320ae78b
--- /dev/null
+++ b/x-pack/plugins/data_enhanced/public/search/ui/background_session_indicator/background_session_indicator.scss
@@ -0,0 +1,23 @@
+.backgroundSessionIndicator {
+  padding: 0 $euiSizeXS;
+}
+
+@include euiBreakpoint('xs', 's') {
+  .backgroundSessionIndicator__popoverContainer.euiFlexGroup--responsive .euiFlexItem {
+    margin-bottom: $euiSizeXS !important;
+  }
+}
+
+.backgroundSessionIndicator__verticalDivider {
+  @include euiBreakpoint('xs', 's') {
+    margin-left: $euiSizeXS;
+    padding-left: $euiSizeXS;
+  }
+
+  @include euiBreakpoint('m', 'l', 'xl') {
+    border-left: $euiBorderThin;
+    align-self: stretch;
+    margin-left: $euiSizeS;
+    padding-left: $euiSizeS;
+  }
+}
diff --git a/x-pack/plugins/data_enhanced/public/search/ui/background_session_indicator/background_session_indicator.stories.tsx b/x-pack/plugins/data_enhanced/public/search/ui/background_session_indicator/background_session_indicator.stories.tsx
new file mode 100644
index 0000000000000..9cef76c62279c
--- /dev/null
+++ b/x-pack/plugins/data_enhanced/public/search/ui/background_session_indicator/background_session_indicator.stories.tsx
@@ -0,0 +1,30 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { BackgroundSessionIndicator } from './background_session_indicator';
+import { BackgroundSessionViewState } from '../connected_background_session_indicator';
+
+storiesOf('components/BackgroundSessionIndicator', module).add('default', () => (
+  <>
+    <div>
+      <BackgroundSessionIndicator state={BackgroundSessionViewState.Loading} />
+    </div>
+    <div>
+      <BackgroundSessionIndicator state={BackgroundSessionViewState.Completed} />
+    </div>
+    <div>
+      <BackgroundSessionIndicator state={BackgroundSessionViewState.BackgroundLoading} />
+    </div>
+    <div>
+      <BackgroundSessionIndicator state={BackgroundSessionViewState.BackgroundCompleted} />
+    </div>
+    <div>
+      <BackgroundSessionIndicator state={BackgroundSessionViewState.Restored} />
+    </div>
+  </>
+));
diff --git a/x-pack/plugins/data_enhanced/public/search/ui/background_session_indicator/background_session_indicator.test.tsx b/x-pack/plugins/data_enhanced/public/search/ui/background_session_indicator/background_session_indicator.test.tsx
new file mode 100644
index 0000000000000..5b7ab2e4f9b1f
--- /dev/null
+++ b/x-pack/plugins/data_enhanced/public/search/ui/background_session_indicator/background_session_indicator.test.tsx
@@ -0,0 +1,98 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { ReactNode } from 'react';
+import { screen, render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { BackgroundSessionIndicator } from './background_session_indicator';
+import { BackgroundSessionViewState } from '../connected_background_session_indicator';
+import { IntlProvider } from 'react-intl';
+
+function Container({ children }: { children?: ReactNode }) {
+  return <IntlProvider locale="en">{children}</IntlProvider>;
+}
+
+test('Loading state', async () => {
+  const onCancel = jest.fn();
+  render(
+    <Container>
+      <BackgroundSessionIndicator state={BackgroundSessionViewState.Loading} onCancel={onCancel} />
+    </Container>
+  );
+
+  await userEvent.click(screen.getByLabelText('Loading results'));
+  await userEvent.click(screen.getByText('Cancel'));
+
+  expect(onCancel).toBeCalled();
+});
+
+test('Completed state', async () => {
+  const onSave = jest.fn();
+  render(
+    <Container>
+      <BackgroundSessionIndicator
+        state={BackgroundSessionViewState.Completed}
+        onSaveResults={onSave}
+      />
+    </Container>
+  );
+
+  await userEvent.click(screen.getByLabelText('Results loaded'));
+  await userEvent.click(screen.getByText('Save'));
+
+  expect(onSave).toBeCalled();
+});
+
+test('Loading in the background state', async () => {
+  const onCancel = jest.fn();
+  render(
+    <Container>
+      <BackgroundSessionIndicator
+        state={BackgroundSessionViewState.BackgroundLoading}
+        onCancel={onCancel}
+      />
+    </Container>
+  );
+
+  await userEvent.click(screen.getByLabelText('Loading results in the background'));
+  await userEvent.click(screen.getByText('Cancel'));
+
+  expect(onCancel).toBeCalled();
+});
+
+test('BackgroundCompleted state', async () => {
+  const onViewSession = jest.fn();
+  render(
+    <Container>
+      <BackgroundSessionIndicator
+        state={BackgroundSessionViewState.BackgroundCompleted}
+        onViewBackgroundSessions={onViewSession}
+      />
+    </Container>
+  );
+
+  await userEvent.click(screen.getByLabelText('Results loaded in the background'));
+  await userEvent.click(screen.getByText('View background sessions'));
+
+  expect(onViewSession).toBeCalled();
+});
+
+test('Restored state', async () => {
+  const onRefresh = jest.fn();
+  render(
+    <Container>
+      <BackgroundSessionIndicator
+        state={BackgroundSessionViewState.Restored}
+        onRefresh={onRefresh}
+      />
+    </Container>
+  );
+
+  await userEvent.click(screen.getByLabelText('Results no longer current'));
+  await userEvent.click(screen.getByText('Refresh'));
+
+  expect(onRefresh).toBeCalled();
+});
diff --git a/x-pack/plugins/data_enhanced/public/search/ui/background_session_indicator/background_session_indicator.tsx b/x-pack/plugins/data_enhanced/public/search/ui/background_session_indicator/background_session_indicator.tsx
new file mode 100644
index 0000000000000..b55bd6b655371
--- /dev/null
+++ b/x-pack/plugins/data_enhanced/public/search/ui/background_session_indicator/background_session_indicator.tsx
@@ -0,0 +1,286 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import {
+  EuiButtonEmpty,
+  EuiButtonEmptyProps,
+  EuiButtonIcon,
+  EuiButtonIconProps,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiLoadingSpinner,
+  EuiPopover,
+  EuiText,
+  EuiToolTip,
+} from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { i18n } from '@kbn/i18n';
+import { BackgroundSessionViewState } from '../connected_background_session_indicator';
+import './background_session_indicator.scss';
+
+export interface BackgroundSessionIndicatorProps {
+  state: BackgroundSessionViewState;
+  onContinueInBackground?: () => void;
+  onCancel?: () => void;
+  onViewBackgroundSessions?: () => void;
+  onSaveResults?: () => void;
+  onRefresh?: () => void;
+}
+
+type ActionButtonProps = BackgroundSessionIndicatorProps & { buttonProps: EuiButtonEmptyProps };
+
+const CancelButton = ({ onCancel = () => {}, buttonProps = {} }: ActionButtonProps) => (
+  <EuiButtonEmpty onClick={onCancel} {...buttonProps}>
+    <FormattedMessage
+      id="xpack.data.backgroundSessionIndicator.cancelButtonText"
+      defaultMessage="Cancel"
+    />
+  </EuiButtonEmpty>
+);
+
+const ContinueInBackgroundButton = ({
+  onContinueInBackground = () => {},
+  buttonProps = {},
+}: ActionButtonProps) => (
+  <EuiButtonEmpty onClick={onContinueInBackground} {...buttonProps}>
+    <FormattedMessage
+      id="xpack.data.backgroundSessionIndicator.continueInBackgroundButtonText"
+      defaultMessage="Continue in background"
+    />
+  </EuiButtonEmpty>
+);
+
+const ViewBackgroundSessionsButton = ({
+  onViewBackgroundSessions = () => {},
+  buttonProps = {},
+}: ActionButtonProps) => (
+  // TODO: make this a link
+  <EuiButtonEmpty onClick={onViewBackgroundSessions} {...buttonProps}>
+    <FormattedMessage
+      id="xpack.data.backgroundSessionIndicator.viewBackgroundSessionsLinkText"
+      defaultMessage="View background sessions"
+    />
+  </EuiButtonEmpty>
+);
+
+const RefreshButton = ({ onRefresh = () => {}, buttonProps = {} }: ActionButtonProps) => (
+  <EuiButtonEmpty onClick={onRefresh} {...buttonProps}>
+    <FormattedMessage
+      id="xpack.data.backgroundSessionIndicator.refreshButtonText"
+      defaultMessage="Refresh"
+    />
+  </EuiButtonEmpty>
+);
+
+const SaveButton = ({ onSaveResults = () => {}, buttonProps = {} }: ActionButtonProps) => (
+  <EuiButtonEmpty onClick={onSaveResults} {...buttonProps}>
+    <FormattedMessage
+      id="xpack.data.backgroundSessionIndicator.saveButtonText"
+      defaultMessage="Save"
+    />
+  </EuiButtonEmpty>
+);
+
+const backgroundSessionIndicatorViewStateToProps: {
+  [state in BackgroundSessionViewState]: {
+    button: Pick<EuiButtonIconProps, 'color' | 'iconType' | 'aria-label'> & { tooltipText: string };
+    popover: {
+      text: string;
+      primaryAction?: React.ComponentType<ActionButtonProps>;
+      secondaryAction?: React.ComponentType<ActionButtonProps>;
+    };
+  };
+} = {
+  [BackgroundSessionViewState.Loading]: {
+    button: {
+      color: 'subdued',
+      iconType: 'clock',
+      'aria-label': i18n.translate(
+        'xpack.data.backgroundSessionIndicator.loadingResultsIconAriaLabel',
+        { defaultMessage: 'Loading results' }
+      ),
+      tooltipText: i18n.translate(
+        'xpack.data.backgroundSessionIndicator.loadingResultsIconTooltipText',
+        { defaultMessage: 'Loading results' }
+      ),
+    },
+    popover: {
+      text: i18n.translate('xpack.data.backgroundSessionIndicator.loadingResultsText', {
+        defaultMessage: 'Loading',
+      }),
+      primaryAction: CancelButton,
+      secondaryAction: ContinueInBackgroundButton,
+    },
+  },
+  [BackgroundSessionViewState.Completed]: {
+    button: {
+      color: 'subdued',
+      iconType: 'checkInCircleFilled',
+      'aria-label': i18n.translate(
+        'xpack.data.backgroundSessionIndicator.resultsLoadedIconAriaLabel',
+        {
+          defaultMessage: 'Results loaded',
+        }
+      ),
+      tooltipText: i18n.translate(
+        'xpack.data.backgroundSessionIndicator.resultsLoadedIconTooltipText',
+        {
+          defaultMessage: 'Results loaded',
+        }
+      ),
+    },
+    popover: {
+      text: i18n.translate('xpack.data.backgroundSessionIndicator.resultsLoadedText', {
+        defaultMessage: 'Results loaded',
+      }),
+      primaryAction: SaveButton,
+      secondaryAction: ViewBackgroundSessionsButton,
+    },
+  },
+  [BackgroundSessionViewState.BackgroundLoading]: {
+    button: {
+      iconType: EuiLoadingSpinner,
+      'aria-label': i18n.translate(
+        'xpack.data.backgroundSessionIndicator.loadingInTheBackgroundIconAriaLabel',
+        {
+          defaultMessage: 'Loading results in the background',
+        }
+      ),
+      tooltipText: i18n.translate(
+        'xpack.data.backgroundSessionIndicator.loadingInTheBackgroundIconTooltipText',
+        {
+          defaultMessage: 'Loading results in the background',
+        }
+      ),
+    },
+    popover: {
+      text: i18n.translate('xpack.data.backgroundSessionIndicator.loadingInTheBackgroundText', {
+        defaultMessage: 'Loading in the background',
+      }),
+      primaryAction: CancelButton,
+      secondaryAction: ViewBackgroundSessionsButton,
+    },
+  },
+  [BackgroundSessionViewState.BackgroundCompleted]: {
+    button: {
+      color: 'success',
+      iconType: 'checkInCircleFilled',
+      'aria-label': i18n.translate(
+        'xpack.data.backgroundSessionIndicator.resultLoadedInTheBackgroundIconAraText',
+        {
+          defaultMessage: 'Results loaded in the background',
+        }
+      ),
+      tooltipText: i18n.translate(
+        'xpack.data.backgroundSessionIndicator.resultLoadedInTheBackgroundIconTooltipText',
+        {
+          defaultMessage: 'Results loaded in the background',
+        }
+      ),
+    },
+    popover: {
+      text: i18n.translate(
+        'xpack.data.backgroundSessionIndicator.resultLoadedInTheBackgroundText',
+        {
+          defaultMessage: 'Results loaded',
+        }
+      ),
+      primaryAction: ViewBackgroundSessionsButton,
+    },
+  },
+  [BackgroundSessionViewState.Restored]: {
+    button: {
+      color: 'warning',
+      iconType: 'refresh',
+      'aria-label': i18n.translate(
+        'xpack.data.backgroundSessionIndicator.restoredResultsIconAriaLabel',
+        {
+          defaultMessage: 'Results no longer current',
+        }
+      ),
+      tooltipText: i18n.translate(
+        'xpack.data.backgroundSessionIndicator.restoredResultsTooltipText',
+        {
+          defaultMessage: 'Results no longer current',
+        }
+      ),
+    },
+    popover: {
+      text: i18n.translate('xpack.data.backgroundSessionIndicator.restoredText', {
+        defaultMessage: 'Results no longer current',
+      }),
+      primaryAction: RefreshButton,
+      secondaryAction: ViewBackgroundSessionsButton,
+    },
+  },
+};
+
+const VerticalDivider: React.FC = () => (
+  <div className="backgroundSessionIndicator__verticalDivider" />
+);
+
+export const BackgroundSessionIndicator: React.FC<BackgroundSessionIndicatorProps> = (props) => {
+  const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);
+  const onButtonClick = () => setIsPopoverOpen((isOpen) => !isOpen);
+  const closePopover = () => setIsPopoverOpen(false);
+
+  const { button, popover } = backgroundSessionIndicatorViewStateToProps[props.state];
+
+  return (
+    <EuiPopover
+      ownFocus
+      isOpen={isPopoverOpen}
+      closePopover={closePopover}
+      anchorPosition={'rightCenter'}
+      panelPaddingSize={'s'}
+      className="backgroundSessionIndicator"
+      data-test-subj={'backgroundSessionIndicator'}
+      button={
+        <EuiToolTip content={button.tooltipText}>
+          <EuiButtonIcon
+            color={button.color}
+            aria-label={button['aria-label']}
+            iconType={button.iconType}
+            onClick={onButtonClick}
+          />
+        </EuiToolTip>
+      }
+    >
+      <EuiFlexGroup
+        responsive={true}
+        alignItems={'center'}
+        gutterSize={'s'}
+        className="backgroundSessionIndicator__popoverContainer"
+      >
+        <EuiFlexItem grow={true}>
+          <EuiText size="s" color={'subdued'}>
+            <p>{popover.text}</p>
+          </EuiText>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiFlexGroup wrap={true} responsive={false} alignItems={'center'} gutterSize={'s'}>
+            {popover.primaryAction && (
+              <EuiFlexItem grow={false}>
+                <popover.primaryAction {...props} buttonProps={{ size: 'xs', flush: 'both' }} />
+              </EuiFlexItem>
+            )}
+            {popover.primaryAction && popover.secondaryAction && <VerticalDivider />}
+            {popover.secondaryAction && (
+              <EuiFlexItem grow={false}>
+                <popover.secondaryAction {...props} buttonProps={{ size: 'xs', flush: 'both' }} />
+              </EuiFlexItem>
+            )}
+          </EuiFlexGroup>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiPopover>
+  );
+};
+
+// React.lazy() needs default:
+// eslint-disable-next-line import/no-default-export
+export default BackgroundSessionIndicator;
diff --git a/x-pack/plugins/data_enhanced/public/search/ui/background_session_indicator/index.tsx b/x-pack/plugins/data_enhanced/public/search/ui/background_session_indicator/index.tsx
new file mode 100644
index 0000000000000..55c8c453dd5d2
--- /dev/null
+++ b/x-pack/plugins/data_enhanced/public/search/ui/background_session_indicator/index.tsx
@@ -0,0 +1,23 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { EuiDelayRender, EuiLoadingSpinner } from '@elastic/eui';
+import React from 'react';
+import type { BackgroundSessionIndicatorProps } from './background_session_indicator';
+export type { BackgroundSessionIndicatorProps };
+
+const Fallback = () => (
+  <EuiDelayRender>
+    <EuiLoadingSpinner />
+  </EuiDelayRender>
+);
+
+const LazyBackgroundSessionIndicator = React.lazy(() => import('./background_session_indicator'));
+export const BackgroundSessionIndicator = (props: BackgroundSessionIndicatorProps) => (
+  <React.Suspense fallback={<Fallback />}>
+    <LazyBackgroundSessionIndicator {...props} />
+  </React.Suspense>
+);
diff --git a/x-pack/plugins/data_enhanced/public/search/ui/connected_background_session_indicator/background_session_view_state.ts b/x-pack/plugins/data_enhanced/public/search/ui/connected_background_session_indicator/background_session_view_state.ts
new file mode 100644
index 0000000000000..b75c2a536f624
--- /dev/null
+++ b/x-pack/plugins/data_enhanced/public/search/ui/connected_background_session_indicator/background_session_view_state.ts
@@ -0,0 +1,33 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export enum BackgroundSessionViewState {
+  /**
+   * Pending search request has not been sent to the background yet
+   */
+  Loading = 'loading',
+
+  /**
+   * No action was taken and the page completed loading without background session creation.
+   */
+  Completed = 'completed',
+
+  /**
+   * Search request was sent to the background.
+   * The page is loading in background.
+   */
+  BackgroundLoading = 'backgroundLoading',
+
+  /**
+   * Page load completed with background session created.
+   */
+  BackgroundCompleted = 'backgroundCompleted',
+
+  /**
+   * Revisiting the page after background completion
+   */
+  Restored = 'restored',
+}
diff --git a/x-pack/plugins/data_enhanced/public/search/ui/connected_background_session_indicator/connected_background_session_indicator.test.tsx b/x-pack/plugins/data_enhanced/public/search/ui/connected_background_session_indicator/connected_background_session_indicator.test.tsx
new file mode 100644
index 0000000000000..b21081e10bbe1
--- /dev/null
+++ b/x-pack/plugins/data_enhanced/public/search/ui/connected_background_session_indicator/connected_background_session_indicator.test.tsx
@@ -0,0 +1,37 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { render, waitFor } from '@testing-library/react';
+import { dataPluginMock } from '../../../../../../../src/plugins/data/public/mocks';
+import { createConnectedBackgroundSessionIndicator } from './connected_background_session_indicator';
+import { BehaviorSubject } from 'rxjs';
+import { ISessionService } from '../../../../../../../src/plugins/data/public';
+
+const sessionService = dataPluginMock.createStartContract().search.session as jest.Mocked<
+  ISessionService
+>;
+
+test("shouldn't show indicator in case no active search session", async () => {
+  const BackgroundSessionIndicator = createConnectedBackgroundSessionIndicator({ sessionService });
+  const { getByTestId, container } = render(<BackgroundSessionIndicator />);
+
+  // make sure `backgroundSessionIndicator` isn't appearing after some time (lazy-loading)
+  await expect(
+    waitFor(() => getByTestId('backgroundSessionIndicator'), { timeout: 100 })
+  ).rejects.toThrow();
+  expect(container).toMatchInlineSnapshot(`<div />`);
+});
+
+test('should show indicator in case there is an active search session', async () => {
+  const session$ = new BehaviorSubject('session_id');
+  sessionService.getSession$.mockImplementation(() => session$);
+  sessionService.getSessionId.mockImplementation(() => session$.getValue());
+  const BackgroundSessionIndicator = createConnectedBackgroundSessionIndicator({ sessionService });
+  const { getByTestId } = render(<BackgroundSessionIndicator />);
+
+  await waitFor(() => getByTestId('backgroundSessionIndicator'));
+});
diff --git a/x-pack/plugins/data_enhanced/public/search/ui/connected_background_session_indicator/connected_background_session_indicator.tsx b/x-pack/plugins/data_enhanced/public/search/ui/connected_background_session_indicator/connected_background_session_indicator.tsx
new file mode 100644
index 0000000000000..d097a1aecb66a
--- /dev/null
+++ b/x-pack/plugins/data_enhanced/public/search/ui/connected_background_session_indicator/connected_background_session_indicator.tsx
@@ -0,0 +1,32 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import useObservable from 'react-use/lib/useObservable';
+import { distinctUntilChanged, map } from 'rxjs/operators';
+import { BackgroundSessionIndicator } from '../background_session_indicator';
+import { ISessionService } from '../../../../../../../src/plugins/data/public/';
+import { BackgroundSessionViewState } from './background_session_view_state';
+
+export interface BackgroundSessionIndicatorDeps {
+  sessionService: ISessionService;
+}
+
+export const createConnectedBackgroundSessionIndicator = ({
+  sessionService,
+}: BackgroundSessionIndicatorDeps): React.FC => {
+  const sessionId$ = sessionService.getSession$();
+  const hasActiveSession$ = sessionId$.pipe(
+    map((sessionId) => !!sessionId),
+    distinctUntilChanged()
+  );
+
+  return () => {
+    const isSession = useObservable(hasActiveSession$, !!sessionService.getSessionId());
+    if (!isSession) return null;
+    return <BackgroundSessionIndicator state={BackgroundSessionViewState.Loading} />;
+  };
+};
diff --git a/x-pack/plugins/data_enhanced/public/search/ui/connected_background_session_indicator/index.ts b/x-pack/plugins/data_enhanced/public/search/ui/connected_background_session_indicator/index.ts
new file mode 100644
index 0000000000000..adbb6edbbfcf3
--- /dev/null
+++ b/x-pack/plugins/data_enhanced/public/search/ui/connected_background_session_indicator/index.ts
@@ -0,0 +1,11 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export {
+  BackgroundSessionIndicatorDeps,
+  createConnectedBackgroundSessionIndicator,
+} from './connected_background_session_indicator';
+export { BackgroundSessionViewState } from './background_session_view_state';
diff --git a/x-pack/plugins/data_enhanced/public/search/ui/index.ts b/x-pack/plugins/data_enhanced/public/search/ui/index.ts
new file mode 100644
index 0000000000000..04201325eb5db
--- /dev/null
+++ b/x-pack/plugins/data_enhanced/public/search/ui/index.ts
@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export * from './connected_background_session_indicator';
diff --git a/x-pack/plugins/data_enhanced/server/index.ts b/x-pack/plugins/data_enhanced/server/index.ts
index a0edd2e26ebef..c3907b3b67439 100644
--- a/x-pack/plugins/data_enhanced/server/index.ts
+++ b/x-pack/plugins/data_enhanced/server/index.ts
@@ -4,10 +4,18 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { PluginInitializerContext } from 'kibana/server';
+import { PluginConfigDescriptor, PluginInitializerContext } from 'kibana/server';
 import { EnhancedDataServerPlugin } from './plugin';
+import { configSchema, ConfigSchema } from '../config';
 
-export function plugin(initializerContext: PluginInitializerContext) {
+export const config: PluginConfigDescriptor<ConfigSchema> = {
+  exposeToBrowser: {
+    search: true,
+  },
+  schema: configSchema,
+};
+
+export function plugin(initializerContext: PluginInitializerContext<ConfigSchema>) {
   return new EnhancedDataServerPlugin(initializerContext);
 }