diff --git a/src/plugins/discover/public/application/components/data_grid/data_grid_table.tsx b/src/plugins/discover/public/application/components/data_grid/data_grid_table.tsx
index 46b8bb32708e..3f99c009e56a 100644
--- a/src/plugins/discover/public/application/components/data_grid/data_grid_table.tsx
+++ b/src/plugins/discover/public/application/components/data_grid/data_grid_table.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { useState, useMemo, useCallback } from 'react';
-import { EuiDataGrid, EuiPanel } from '@elastic/eui';
+import { EuiDataGrid, EuiDataGridSorting, EuiPanel } from '@elastic/eui';
 import { IndexPattern } from '../../../opensearch_dashboards_services';
 import { fetchTableDataCell } from './data_grid_table_cell_value';
 import { buildDataGridColumns, computeVisibleColumns } from './data_grid_table_columns';
@@ -23,10 +23,10 @@ export interface DataGridTableProps {
   onAddColumn: (column: string) => void;
   onFilter: DocViewFilterFn;
   onRemoveColumn: (column: string) => void;
-  onSort: (sort: Array<[string, string]>) => void;
+  onSort: (sort: Array<[string, 'asc' | 'desc']>) => void;
   rows: OpenSearchSearchHit[];
   onSetColumns: (columns: string[]) => void;
-  sort: Array<[string, string]>;
+  sort: Array<[string, 'asc' | 'desc']>;
   displayTimeColumn: boolean;
   services: DiscoverServices;
   isToolbarVisible?: boolean;
@@ -43,7 +43,6 @@ export const DataGridTable = ({
   sort,
   rows,
   displayTimeColumn,
-  services,
   isToolbarVisible = true,
 }: DataGridTableProps) => {
   const [expandedHit, setExpandedHit] = useState<OpenSearchSearchHit | undefined>();
@@ -51,10 +50,18 @@ export const DataGridTable = ({
   const pagination = usePagination(rowCount);
 
   const sortingColumns = useMemo(() => sort.map(([id, direction]) => ({ id, direction })), [sort]);
+  const rowHeightsOptions = useMemo(
+    () => ({
+      defaultHeight: {
+        lineCount: columns.includes('_source') ? 3 : 1,
+      },
+    }),
+    [columns]
+  );
 
   const onColumnSort = useCallback(
-    (cols) => {
-      onSort(cols.map(({ id, direction }: any) => [id, direction]));
+    (cols: EuiDataGridSorting['columns']) => {
+      onSort(cols.map(({ id, direction }) => [id, direction]));
     },
     [onSort]
   );
@@ -79,10 +86,10 @@ export const DataGridTable = ({
     [columns, indexPattern, displayTimeColumn, onSetColumns]
   );
 
-  const sorting = useMemo(() => ({ columns: sortingColumns, onSort: onColumnSort }), [
-    sortingColumns,
-    onColumnSort,
-  ]);
+  const sorting: EuiDataGridSorting = useMemo(
+    () => ({ columns: sortingColumns, onSort: onColumnSort }),
+    [sortingColumns, onColumnSort]
+  );
 
   const leadingControlColumns = useMemo(() => {
     return [
@@ -95,6 +102,35 @@ export const DataGridTable = ({
     ];
   }, []);
 
+  const table = useMemo(
+    () => (
+      <EuiDataGrid
+        aria-labelledby="aria-labelledby"
+        columns={dataGridTableColumns}
+        columnVisibility={dataGridTableColumnsVisibility}
+        leadingControlColumns={leadingControlColumns}
+        data-test-subj="docTable"
+        pagination={pagination}
+        renderCellValue={renderCellValue}
+        rowCount={rowCount}
+        sorting={sorting}
+        toolbarVisibility={isToolbarVisible ? toolbarVisibility : false}
+        rowHeightsOptions={rowHeightsOptions}
+      />
+    ),
+    [
+      dataGridTableColumns,
+      dataGridTableColumnsVisibility,
+      leadingControlColumns,
+      pagination,
+      renderCellValue,
+      rowCount,
+      sorting,
+      isToolbarVisible,
+      rowHeightsOptions,
+    ]
+  );
+
   return (
     <DiscoverGridContextProvider
       value={{
@@ -108,18 +144,7 @@ export const DataGridTable = ({
       <>
         <EuiPanel hasBorder={false} hasShadow={false} paddingSize="s" color="transparent">
           <EuiPanel paddingSize="s" style={{ height: '100%' }}>
-            <EuiDataGrid
-              aria-labelledby="aria-labelledby"
-              columns={dataGridTableColumns}
-              columnVisibility={dataGridTableColumnsVisibility}
-              leadingControlColumns={leadingControlColumns}
-              data-test-subj="docTable"
-              pagination={pagination}
-              renderCellValue={renderCellValue}
-              rowCount={rowCount}
-              sorting={sorting}
-              toolbarVisibility={isToolbarVisible ? toolbarVisibility : false}
-            />
+            {table}
           </EuiPanel>
         </EuiPanel>
         {expandedHit && (
@@ -131,7 +156,6 @@ export const DataGridTable = ({
             onAddColumn={onAddColumn}
             onFilter={onFilter}
             onClose={() => setExpandedHit(undefined)}
-            services={services}
           />
         )}
       </>
diff --git a/src/plugins/discover/public/application/components/loading_spinner/loading_spinner.scss b/src/plugins/discover/public/application/components/loading_spinner/loading_spinner.scss
new file mode 100644
index 000000000000..051ab642c1cf
--- /dev/null
+++ b/src/plugins/discover/public/application/components/loading_spinner/loading_spinner.scss
@@ -0,0 +1,4 @@
+.discoverNoResults {
+  display: flex;
+  align-items: center;
+}
diff --git a/src/plugins/discover/public/application/components/loading_spinner/loading_spinner.tsx b/src/plugins/discover/public/application/components/loading_spinner/loading_spinner.tsx
index 697c7a136d60..dc12ba4581fc 100644
--- a/src/plugins/discover/public/application/components/loading_spinner/loading_spinner.tsx
+++ b/src/plugins/discover/public/application/components/loading_spinner/loading_spinner.tsx
@@ -28,20 +28,24 @@
  * under the License.
  */
 
+import './loading_spinner.scss';
 import React from 'react';
-import { EuiLoadingSpinner, EuiTitle, EuiSpacer } from '@elastic/eui';
+import { EuiTitle, EuiPanel, EuiEmptyPrompt, EuiLoadingSpinner } from '@elastic/eui';
 import { FormattedMessage } from '@osd/i18n/react';
 
 export function LoadingSpinner() {
   return (
-    <>
-      <EuiTitle size="s" data-test-subj="loadingSpinnerText">
-        <h2>
-          <FormattedMessage id="discover.searchingTitle" defaultMessage="Searching" />
-        </h2>
-      </EuiTitle>
-      <EuiSpacer size="m" />
-      <EuiLoadingSpinner size="l" data-test-subj="loadingSpinner" />
-    </>
+    <EuiPanel hasBorder={false} hasShadow={false} color="transparent" className="discoverNoResults">
+      <EuiEmptyPrompt
+        icon={<EuiLoadingSpinner data-test-subj="loadingSpinner" size="xl" />}
+        title={
+          <EuiTitle size="s" data-test-subj="loadingSpinnerText">
+            <h2>
+              <FormattedMessage id="discover.searchingTitle" defaultMessage="Searching" />
+            </h2>
+          </EuiTitle>
+        }
+      />
+    </EuiPanel>
   );
 }
diff --git a/src/plugins/discover/public/application/components/no_results/no_results.tsx b/src/plugins/discover/public/application/components/no_results/no_results.tsx
index 79b3191e5eda..ad7bab0e81e9 100644
--- a/src/plugins/discover/public/application/components/no_results/no_results.tsx
+++ b/src/plugins/discover/public/application/components/no_results/no_results.tsx
@@ -28,23 +28,26 @@
  * under the License.
  */
 
-import React, { Component, Fragment } from 'react';
+import React, { Fragment } from 'react';
 import { FormattedMessage, I18nProvider } from '@osd/i18n/react';
-import PropTypes from 'prop-types';
 
 import {
   EuiCallOut,
   EuiCode,
   EuiDescriptionList,
-  EuiFlexGroup,
-  EuiFlexItem,
   EuiLink,
+  EuiPanel,
   EuiSpacer,
   EuiText,
 } from '@elastic/eui';
 import { getServices } from '../../../opensearch_dashboards_services';
 
-export const DiscoverNoResults = (timeFieldName: string, queryLanguage: any) => {
+interface Props {
+  timeFieldName?: string;
+  queryLanguage?: string;
+}
+
+export const DiscoverNoResults = ({ timeFieldName, queryLanguage }: Props) => {
   let timeFieldMessage;
 
   if (timeFieldName) {
@@ -189,27 +192,21 @@ export const DiscoverNoResults = (timeFieldName: string, queryLanguage: any) =>
 
   return (
     <I18nProvider>
-      <Fragment>
-        <EuiSpacer size="xl" />
-
-        <EuiFlexGroup justifyContent="center">
-          <EuiFlexItem grow={false} className="dscNoResults">
-            <EuiCallOut
-              title={
-                <FormattedMessage
-                  id="discover.noResults.searchExamples.noResultsMatchSearchCriteriaTitle"
-                  defaultMessage="No results match your search criteria"
-                />
-              }
-              color="warning"
-              iconType="help"
-              data-test-subj="discoverNoResults"
+      <EuiPanel hasBorder={false} hasShadow={false} color="transparent">
+        <EuiCallOut
+          title={
+            <FormattedMessage
+              id="discover.noResults.searchExamples.noResultsMatchSearchCriteriaTitle"
+              defaultMessage="No results match your search criteria"
             />
-            {timeFieldMessage}
-            {luceneQueryMessage}
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </Fragment>
+          }
+          color="warning"
+          iconType="help"
+          data-test-subj="discoverNoResults"
+        />
+        {timeFieldMessage}
+        {luceneQueryMessage}
+      </EuiPanel>
     </I18nProvider>
   );
 };
diff --git a/src/plugins/discover/public/application/components/sidebar/discover_field.tsx b/src/plugins/discover/public/application/components/sidebar/discover_field.tsx
index 98789598713c..73dc40a262e0 100644
--- a/src/plugins/discover/public/application/components/sidebar/discover_field.tsx
+++ b/src/plugins/discover/public/application/components/sidebar/discover_field.tsx
@@ -153,7 +153,6 @@ export const DiscoverField = ({
       >
         <EuiButtonIcon
           iconType="plusInCircleFilled"
-          className="dscSidebarItem__action"
           onClick={(ev: React.MouseEvent<HTMLButtonElement>) => {
             if (ev.type === 'click') {
               ev.currentTarget.focus();
@@ -178,7 +177,6 @@ export const DiscoverField = ({
         <EuiButtonIcon
           color="danger"
           iconType="cross"
-          className="dscSidebarItem__action"
           onClick={(ev: React.MouseEvent<HTMLButtonElement>) => {
             if (ev.type === 'click') {
               ev.currentTarget.focus();
diff --git a/src/plugins/discover/public/application/components/sidebar/discover_sidebar.scss b/src/plugins/discover/public/application/components/sidebar/discover_sidebar.scss
index f547dbe9deeb..63e8720f2c59 100644
--- a/src/plugins/discover/public/application/components/sidebar/discover_sidebar.scss
+++ b/src/plugins/discover/public/application/components/sidebar/discover_sidebar.scss
@@ -1,3 +1,3 @@
-.dscFieldListHeader {
+.dscSideBarFieldListHeader {
   padding-left: $euiSizeS;
 }
diff --git a/src/plugins/discover/public/application/components/sidebar/discover_sidebar.tsx b/src/plugins/discover/public/application/components/sidebar/discover_sidebar.tsx
index b4ed88e02ed9..f5e091e6ab82 100644
--- a/src/plugins/discover/public/application/components/sidebar/discover_sidebar.tsx
+++ b/src/plugins/discover/public/application/components/sidebar/discover_sidebar.tsx
@@ -204,7 +204,7 @@ export function DiscoverSidebar({
           <EuiSplitPanel.Inner className="eui-yScroll" paddingSize="none">
             {fields.length > 0 && (
               <>
-                <EuiTitle size="xxxs" id="selected_fields" className="dscFieldListHeader">
+                <EuiTitle size="xxxs" id="selected_fields" className="dscSideBarFieldListHeader">
                   <h3>
                     <FormattedMessage
                       id="discover.fieldChooser.filter.selectedFieldsTitle"
@@ -248,7 +248,7 @@ export function DiscoverSidebar({
                     );
                   })}
                 </EuiDroppable>
-                <EuiTitle size="xxxs" id="available_fields" className="dscFieldListHeader">
+                <EuiTitle size="xxxs" id="available_fields" className="dscSideBarFieldListHeader">
                   <h3>
                     <FormattedMessage
                       id="discover.fieldChooser.filter.availableFieldsTitle"
@@ -267,7 +267,7 @@ export function DiscoverSidebar({
                     data-test-subj={`fieldList-popular`}
                     color="primary"
                   >
-                    <EuiTitle size="xxxs" className="dscFieldListHeader">
+                    <EuiTitle size="xxxs" className="dscSideBarFieldListHeader">
                       <h4 style={{ fontWeight: 'normal' }} id="available_fields_popular">
                         <FormattedMessage
                           id="discover.fieldChooser.filter.popularTitle"
diff --git a/src/plugins/discover/public/application/components/top_nav/get_top_nav_links.tsx b/src/plugins/discover/public/application/components/top_nav/get_top_nav_links.tsx
index aac7b675de0d..e893f9ee73c9 100644
--- a/src/plugins/discover/public/application/components/top_nav/get_top_nav_links.tsx
+++ b/src/plugins/discover/public/application/components/top_nav/get_top_nav_links.tsx
@@ -65,10 +65,6 @@ export const getTopNavLinks = (
       defaultMessage: 'Save Search',
     }),
     testId: 'discoverSaveButton',
-    disableButton: () => {
-      const state: DiscoverState = store!.getState().discover; // store is defined before the view is loaded
-      return !state.isDirty;
-    },
     run: async () => {
       const onSave = async ({
         newTitle,
@@ -229,10 +225,10 @@ export const getTopNavLinks = (
     },
   };
 
-  const legacyDiscover = {
+  const legacyDiscover: TopNavMenuData = {
     id: 'discover-new',
-    label: i18n.translate('discover.localMenu.legacyDiscoverTitle', {
-      defaultMessage: 'Legacy Discover',
+    label: i18n.translate('discover.localMenu.newDiscoverTitle', {
+      defaultMessage: 'New Discover',
     }),
     description: i18n.translate('discover.localMenu.newDiscoverDescription', {
       defaultMessage: 'New Discover Experience',
@@ -242,6 +238,8 @@ export const getTopNavLinks = (
       await uiSettings.set(NEW_DISCOVER_APP, false);
       window.location.reload();
     },
+    type: 'toggle' as const,
+    emphasize: true,
   };
 
   return [
diff --git a/src/plugins/discover/public/application/components/top_nav/open_search_panel.test.tsx b/src/plugins/discover/public/application/components/top_nav/open_search_panel.test.tsx
index 31df77e15de4..9dab50d341f8 100644
--- a/src/plugins/discover/public/application/components/top_nav/open_search_panel.test.tsx
+++ b/src/plugins/discover/public/application/components/top_nav/open_search_panel.test.tsx
@@ -39,7 +39,7 @@ jest.mock('../../../../../opensearch_dashboards_react/public', () => ({
   useOpenSearchDashboards: jest.fn().mockReturnValue({
     services: {
       core: { uiSettings: {}, savedObjects: {} },
-      addBasePath: (path) => path,
+      addBasePath: (path: string) => path,
     },
   }),
   withOpenSearchDashboards: jest.fn(),
diff --git a/src/plugins/discover/public/application/view_components/canvas/discover_chart_container.tsx b/src/plugins/discover/public/application/view_components/canvas/discover_chart_container.tsx
index 672725db63cd..3e421516abcd 100644
--- a/src/plugins/discover/public/application/view_components/canvas/discover_chart_container.tsx
+++ b/src/plugins/discover/public/application/view_components/canvas/discover_chart_container.tsx
@@ -4,52 +4,19 @@
  */
 
 import './discover_chart_container.scss';
-import React, { useState, useEffect } from 'react';
-import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import React from 'react';
 import { DiscoverViewServices } from '../../../build_services';
 import { useOpenSearchDashboards } from '../../../../../opensearch_dashboards_react/public';
 import { useDiscoverContext } from '../context';
-import { useDispatch } from '../../utils/state_management';
 import { SearchData } from '../utils/use_search';
 import { DiscoverChart } from '../../components/chart/chart';
 
-export const DiscoverChartContainer = () => {
+export const DiscoverChartContainer = ({ hits, bucketInterval, chartData }: SearchData) => {
   const { services } = useOpenSearchDashboards<DiscoverViewServices>();
   const { uiSettings, data } = services;
-  const { data$, indexPattern } = useDiscoverContext();
-  const [fetchState, setFetchState] = useState<SearchData>({
-    status: data$.getValue().status,
-    hits: 0,
-    bucketInterval: {},
-    chartData: {},
-  });
+  const { indexPattern } = useDiscoverContext();
 
-  const dispatch = useDispatch();
-
-  const { hits, bucketInterval, chartData } = fetchState || {};
-
-  useEffect(() => {
-    const subscription = data$.subscribe((next) => {
-      if (
-        next.status !== fetchState.status ||
-        (next.hits && next.hits !== fetchState.hits) ||
-        (next.bucketInterval && next.bucketInterval !== fetchState.bucketInterval) ||
-        (next.chartData && next.chartData !== fetchState.chartData)
-      ) {
-        setFetchState({ ...fetchState, ...next });
-      }
-    });
-    return () => {
-      subscription.unsubscribe();
-    };
-  }, [data$, fetchState]);
-
-  if (indexPattern === undefined) {
-    // TODO: handle better
-    return null;
-  }
-
-  const timeField = indexPattern.timeFieldName ? indexPattern.timeFieldName : undefined;
+  const timeField = indexPattern?.timeFieldName;
 
   if (!hits || !bucketInterval || !chartData) {
     // TODO: handle better
diff --git a/src/plugins/discover/public/application/view_components/canvas/index.tsx b/src/plugins/discover/public/application/view_components/canvas/index.tsx
index 5f963a281a8f..8caa65af54d6 100644
--- a/src/plugins/discover/public/application/view_components/canvas/index.tsx
+++ b/src/plugins/discover/public/application/view_components/canvas/index.tsx
@@ -3,15 +3,48 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { EuiFlexGroup, EuiFlexItem, EuiPanel } from '@elastic/eui';
 import { TopNav } from './top_nav';
 import { ViewProps } from '../../../../../data_explorer/public';
 import { DiscoverTable } from './discover_table';
 import { DiscoverChartContainer } from './discover_chart_container';
+import { useDiscoverContext } from '../context';
+import { ResultStatus, SearchData } from '../utils/use_search';
+import { DiscoverNoResults } from '../../components/no_results/no_results';
+import { DiscoverUninitialized } from '../../components/uninitialized/uninitialized';
+import { LoadingSpinner } from '../../components/loading_spinner/loading_spinner';
 
 // eslint-disable-next-line import/no-default-export
 export default function DiscoverCanvas({ setHeaderActionMenu, history }: ViewProps) {
+  const { data$, refetch$, indexPattern } = useDiscoverContext();
+
+  const [fetchState, setFetchState] = useState<SearchData>({
+    status: data$.getValue().status,
+    hits: 0,
+    bucketInterval: {},
+  });
+
+  const { status } = fetchState;
+
+  useEffect(() => {
+    const subscription = data$.subscribe((next) => {
+      if (
+        next.status !== fetchState.status ||
+        (next.hits && next.hits !== fetchState.hits) ||
+        (next.bucketInterval && next.bucketInterval !== fetchState.bucketInterval) ||
+        (next.chartData && next.chartData !== fetchState.chartData)
+      ) {
+        setFetchState({ ...fetchState, ...next });
+      }
+    });
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, [data$, fetchState]);
+
+  const timeField = indexPattern?.timeFieldName ? indexPattern.timeFieldName : undefined;
+
   return (
     <EuiFlexGroup direction="column" gutterSize="none">
       <EuiFlexItem grow={false}>
@@ -21,16 +54,29 @@ export default function DiscoverCanvas({ setHeaderActionMenu, history }: ViewPro
           }}
         />
       </EuiFlexItem>
-      <EuiFlexItem grow={false}>
-        <EuiPanel hasBorder={false} hasShadow={false} color="transparent" paddingSize="s">
-          <EuiPanel>
-            <DiscoverChartContainer />
-          </EuiPanel>
-        </EuiPanel>
-      </EuiFlexItem>
-      <EuiFlexItem>
-        <DiscoverTable history={history} />
-      </EuiFlexItem>
+      {status === ResultStatus.NO_RESULTS && (
+        <EuiFlexItem>
+          <DiscoverNoResults timeFieldName={timeField} queryLanguage={''} />
+        </EuiFlexItem>
+      )}
+      {status === ResultStatus.UNINITIALIZED && (
+        <DiscoverUninitialized onRefresh={() => refetch$.next()} />
+      )}
+      {status === ResultStatus.LOADING && <LoadingSpinner />}
+      {status === ResultStatus.READY && (
+        <>
+          <EuiFlexItem grow={false}>
+            <EuiPanel hasBorder={false} hasShadow={false} color="transparent" paddingSize="s">
+              <EuiPanel>
+                <DiscoverChartContainer {...fetchState} />
+              </EuiPanel>
+            </EuiPanel>
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <DiscoverTable history={history} />
+          </EuiFlexItem>
+        </>
+      )}
     </EuiFlexGroup>
   );
 }
diff --git a/src/plugins/discover/public/application/view_components/utils/use_search.ts b/src/plugins/discover/public/application/view_components/utils/use_search.ts
index bec4eb686e7d..af845fb1ad2f 100644
--- a/src/plugins/discover/public/application/view_components/utils/use_search.ts
+++ b/src/plugins/discover/public/application/view_components/utils/use_search.ts
@@ -15,7 +15,7 @@ import { validateTimeRange } from '../../helpers/validate_time_range';
 import { updateSearchSource } from './update_search_source';
 import { useIndexPattern } from './use_index_pattern';
 import { OpenSearchSearchHit } from '../../doc_views/doc_views_types';
-import { TimechartHeaderBucketInterval } from '../../components/timechart_header';
+import { TimechartHeaderBucketInterval } from '../../components/chart/timechart_header';
 import { tabifyAggResponse } from '../../../opensearch_dashboards_services';
 import {
   getDimensions,
@@ -29,6 +29,7 @@ import {
   getRequestInspectorStats,
   getResponseInspectorStats,
 } from '../../../opensearch_dashboards_services';
+import { SEARCH_ON_PAGE_LOAD_SETTING } from '../../../../common';
 
 export enum ResultStatus {
   UNINITIALIZED = 'uninitialized',
@@ -44,7 +45,7 @@ export interface SearchData {
   hits?: number;
   rows?: OpenSearchSearchHit[];
   bucketInterval?: TimechartHeaderBucketInterval | {};
-  chartData?: Chart | {};
+  chartData?: Chart;
 }
 
 export type SearchRefetch = 'refetch' | undefined;
@@ -68,11 +69,12 @@ export const useSearch = (services: DiscoverServices) => {
   const [savedSearch, setSavedSearch] = useState<SavedSearch | undefined>(undefined);
   const savedSearchId = useSelector((state) => state.discover.savedSearch);
   const indexPattern = useIndexPattern(services);
-  const { data, filterManager, getSavedSearchById, core } = services;
+  const { data, filterManager, getSavedSearchById, core, toastNotifications } = services;
   const timefilter = data.query.timefilter.timefilter;
   const fetchStateRef = useRef<{
     abortController: AbortController | undefined;
     fieldCounts: Record<string, number>;
+    rows?: OpenSearchSearchHit[];
   }>({
     abortController: undefined,
     fieldCounts: {},
@@ -81,21 +83,34 @@ export const useSearch = (services: DiscoverServices) => {
     requests: new RequestAdapter(),
   };
 
+  const shouldSearchOnPageLoad = useCallback(() => {
+    // A saved search is created on every page load, so we check the ID to see if we're loading a
+    // previously saved search or if it is just transient
+    return (
+      services.uiSettings.get(SEARCH_ON_PAGE_LOAD_SETTING) ||
+      savedSearch?.id !== undefined ||
+      timefilter.getRefreshInterval().pause === false
+    );
+  }, [savedSearch, services.uiSettings, timefilter]);
+
   const data$ = useMemo(
-    () => new BehaviorSubject<SearchData>({ status: ResultStatus.UNINITIALIZED }),
-    []
+    () =>
+      new BehaviorSubject<SearchData>({
+        status: shouldSearchOnPageLoad() ? ResultStatus.LOADING : ResultStatus.UNINITIALIZED,
+      }),
+    [shouldSearchOnPageLoad]
   );
   const refetch$ = useMemo(() => new Subject<SearchRefetch>(), []);
 
   const fetch = useCallback(async () => {
     if (!indexPattern) {
       data$.next({
-        status: ResultStatus.UNINITIALIZED,
+        status: shouldSearchOnPageLoad() ? ResultStatus.LOADING : ResultStatus.UNINITIALIZED,
       });
       return;
     }
 
-    if (!validateTimeRange(timefilter.getTime(), services.toastNotifications)) {
+    if (!validateTimeRange(timefilter.getTime(), toastNotifications)) {
       return data$.next({
         status: ResultStatus.NO_RESULTS,
         rows: [],
@@ -118,7 +133,10 @@ export const useSearch = (services: DiscoverServices) => {
     });
 
     try {
-      data$.next({ status: ResultStatus.LOADING });
+      // Only show loading indicator if we are fetching when the rows are empty
+      if (fetchStateRef.current.rows?.length === 0) {
+        data$.next({ status: ResultStatus.LOADING });
+      }
 
       // Initialize inspect adapter for search source
       inspectorAdapters.requests.reset();
@@ -145,7 +163,7 @@ export const useSearch = (services: DiscoverServices) => {
       const hits = fetchResp.hits.total as number;
       const rows = fetchResp.hits.hits;
       let bucketInterval = {};
-      let chartData = {};
+      let chartData;
       for (const row of rows) {
         const fields = Object.keys(indexPattern.flattenHit(row));
         for (const fieldName of fields) {
@@ -162,13 +180,15 @@ export const useSearch = (services: DiscoverServices) => {
           if (bucketAggConfig && search.aggs.isDateHistogramBucketAggConfig(bucketAggConfig)) {
             bucketInterval = bucketAggConfig.buckets?.getInterval();
           }
+          // @ts-ignore tabifiedData is compatible but due to the way it is typed typescript complains
           chartData = buildPointSeriesData(tabifiedData, dimensions);
         }
       }
 
       fetchStateRef.current.fieldCounts = fetchStateRef.current.fieldCounts!;
+      fetchStateRef.current.rows = rows;
       data$.next({
-        status: ResultStatus.READY,
+        status: rows.length > 0 ? ResultStatus.READY : ResultStatus.NO_RESULTS,
         fieldCounts: fetchStateRef.current.fieldCounts,
         hits,
         rows,
@@ -189,10 +209,12 @@ export const useSearch = (services: DiscoverServices) => {
   }, [
     indexPattern,
     timefilter,
-    services,
+    toastNotifications,
     data,
+    services,
     savedSearch?.searchSource,
     data$,
+    shouldSearchOnPageLoad,
     inspectorAdapters.requests,
   ]);
 
diff --git a/src/plugins/discover_legacy/public/application/angular/discover.js b/src/plugins/discover_legacy/public/application/angular/discover.js
index 5c5eaecb35e3..f8a96928784c 100644
--- a/src/plugins/discover_legacy/public/application/angular/discover.js
+++ b/src/plugins/discover_legacy/public/application/angular/discover.js
@@ -494,6 +494,7 @@ function discoverController($element, $route, $scope, $timeout, $window, Promise
         await getServices().uiSettings.set(NEW_DISCOVER_APP, true);
         window.location.reload();
       },
+      type: 'toggle',
     };
 
     return [
diff --git a/src/plugins/navigation/public/top_nav_menu/top_nav_menu_data.tsx b/src/plugins/navigation/public/top_nav_menu/top_nav_menu_data.tsx
index 3865e9852882..f541456c93b4 100644
--- a/src/plugins/navigation/public/top_nav_menu/top_nav_menu_data.tsx
+++ b/src/plugins/navigation/public/top_nav_menu/top_nav_menu_data.tsx
@@ -45,6 +45,8 @@ export interface TopNavMenuData {
   emphasize?: boolean;
   iconType?: EuiIconType;
   iconSide?: EuiButtonProps['iconSide'];
+  // @deprecated - experimental, do not use yet. Will be removed in a future minor version
+  type?: 'toggle' | 'button';
 }
 
 export interface RegisteredTopNavMenuData extends TopNavMenuData {
diff --git a/src/plugins/navigation/public/top_nav_menu/top_nav_menu_item.tsx b/src/plugins/navigation/public/top_nav_menu/top_nav_menu_item.tsx
index 7f987d937b96..bbc6ff1a7165 100644
--- a/src/plugins/navigation/public/top_nav_menu/top_nav_menu_item.tsx
+++ b/src/plugins/navigation/public/top_nav_menu/top_nav_menu_item.tsx
@@ -30,7 +30,7 @@
 
 import { upperFirst, isFunction } from 'lodash';
 import React, { MouseEvent } from 'react';
-import { EuiToolTip, EuiButton, EuiHeaderLink } from '@elastic/eui';
+import { EuiToolTip, EuiButton, EuiHeaderLink, EuiSwitch } from '@elastic/eui';
 import { TopNavMenuData } from './top_nav_menu_data';
 
 export function TopNavMenuItem(props: TopNavMenuData) {
@@ -58,21 +58,36 @@ export function TopNavMenuItem(props: TopNavMenuData) {
     className: props.className,
   };
 
-  const btn = props.emphasize ? (
-    <EuiButton size="s" {...commonButtonProps}>
-      {upperFirst(props.label || props.id!)}
-    </EuiButton>
-  ) : (
-    <EuiHeaderLink size="xs" color="primary" {...commonButtonProps}>
-      {upperFirst(props.label || props.id!)}
-    </EuiHeaderLink>
-  );
+  let component;
+  if (props.type === 'toggle') {
+    component = (
+      <EuiSwitch
+        label={upperFirst(props.label || props.id!)}
+        checked={props.emphasize || false}
+        onChange={(e) => {
+          handleClick((e as unknown) as MouseEvent<HTMLButtonElement>);
+        }}
+        data-test-subj={props.testId}
+        className={props.className}
+      />
+    );
+  } else {
+    component = props.emphasize ? (
+      <EuiButton size="s" {...commonButtonProps}>
+        {upperFirst(props.label || props.id!)}
+      </EuiButton>
+    ) : (
+      <EuiHeaderLink size="xs" color="primary" {...commonButtonProps}>
+        {upperFirst(props.label || props.id!)}
+      </EuiHeaderLink>
+    );
+  }
 
   const tooltip = getTooltip();
   if (tooltip) {
-    return <EuiToolTip content={tooltip}>{btn}</EuiToolTip>;
+    return <EuiToolTip content={tooltip}>{component}</EuiToolTip>;
   }
-  return btn;
+  return component;
 }
 
 TopNavMenuItem.defaultProps = {