From 59c8784ed51902e485620b7689cd41751dbfee87 Mon Sep 17 00:00:00 2001
From: Guido Modarelli <38738725+guidomodarelli@users.noreply.github.com>
Date: Wed, 18 Sep 2024 17:47:49 -0300
Subject: [PATCH] Remove many loading spinners in some views (#6956)

* feat: Add loading searchbar progress component

* Change loading spinners to search progress in some views

* style: Remove unused imports and elements from LoadingSearchbarProgress

* Bump Wazuh 4.9.2 rev 00 (#6971)

* Bump version to 4.9.2

* Fix changelog

* Update Wazuh version to 4.9.1 in all files

* Fix Prettier issues

* Refactor error handling imports in wz-flyout-discover

* Fix Prettier issues

* Update loading spinner to loading searchbar progress component

* Refactor loading spinners to use searchbar progress bars

* Refactor loading spinner and panel components

* Update condition to check for server in third argument

* Remove loading spinner component and styles

* Refactor compliance table functions and components

* Remove unnecessary SCSS file import in LoadingSearchbarProgress

* Refactor function parameters and object keys in compliance table

---------

Co-authored-by: Federico Rodriguez <federico.rodriguez@wazuh.com>
---
 CHANGELOG.md                                  |   3 +-
 docker/osd-dev/dev.sh                         |   2 +-
 .../loading-searchbar-progress.tsx            |  12 +
 .../common/wazuh-data-grid/wz-data-grid.tsx   |   4 +-
 .../common/wazuh-discover/wz-discover.tsx     | 190 ++++++++--------
 .../wazuh-discover/wz-flyout-discover.tsx     | 140 ++++++------
 .../common/welcome/dashboard/events-count.tsx |   4 +-
 .../cluster/dashboard/dashboard.tsx           |   4 +-
 .../dashboards/dashboard.tsx                  |  84 +++----
 .../compliance-table/compliance-table.tsx     | 138 ++++++------
 .../overview/docker/dashboards/dashboard.tsx  |  80 +++----
 .../overview/fim/dashboard/dashboard.tsx      |  84 +++----
 .../overview/gdpr/dashboards/dashboard.tsx    |  80 +++----
 .../overview/github/dashboards/dashboard.tsx  |  82 +++----
 .../overview/github/panel/github-panel.tsx    |  66 +++---
 .../google-cloud/dashboards/dashboard.tsx     |  80 +++----
 .../overview/hipaa/dashboards/dashboard.tsx   |  80 +++----
 .../malware-detection/dashboard/dashboard.tsx |  84 +++----
 .../overview/mitre/dashboard/dashboard.tsx    |  80 +++----
 .../overview/mitre/framework/mitre.tsx        | 106 ++++-----
 .../overview/nist/dashboards/dashboard.tsx    |  80 +++----
 .../overview/office/dashboard/dashboard.tsx   | 116 +++++-----
 .../overview/office/panel/office-panel.tsx    |  16 +-
 .../overview/pci/dashboards/dashboard.tsx     |  80 +++----
 .../dashboards/dashboardTabsPanels.tsx        |   4 +-
 .../threat-hunting/dashboard/dashboard.tsx    | 208 +++++++++---------
 .../overview/tsc/dashboards/dashboard.tsx     |  80 +++----
 .../virustotal/dashboard/dashboard.tsx        | 124 +++++------
 .../common/components/loading_spinner.scss    |   4 -
 .../common/components/loading_spinner.tsx     |  21 --
 .../dashboards/inventory/inventory.tsx        |   4 +-
 .../dashboards/overview/dashboard.tsx         |   4 +-
 .../management/cluster/cluster-overview.tsx   |   4 +-
 33 files changed, 1075 insertions(+), 1073 deletions(-)
 create mode 100644 plugins/main/public/components/common/loading-searchbar-progress/loading-searchbar-progress.tsx
 delete mode 100644 plugins/main/public/components/overview/vulnerabilities/common/components/loading_spinner.scss
 delete mode 100644 plugins/main/public/components/overview/vulnerabilities/common/components/loading_spinner.tsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0d6fbf59d7..39356fab6e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -29,6 +29,7 @@ All notable changes to the Wazuh app project will be documented in this file.
 - Upgraded Event-tab column selector showing first the picked columns [#6984](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6984)
 - Changed vulnerabilities.reference to links in Vulnerability Detection > Inventory columns [#6960](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6960)
 - Upgraded the `follow-redirects` dependency to `1.15.6` [#6982](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6982)
+- Changed many loading spinners in some views to loading search progress [#6956](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6956)
 
 ## Wazuh v4.9.0 - OpenSearch Dashboards 2.13.0 - Revision 07
 
@@ -644,7 +645,7 @@ All notable changes to the Wazuh app project will be documented in this file.
   [#3367](https://github.com/wazuh/wazuh-dashboard-plugins/pull/3367)
   [#3373](https://github.com/wazuh/wazuh-dashboard-plugins/pull/3373)
   [#3374](https://github.com/wazuh/wazuh-dashboard-plugins/pull/3374)
-  [#3390](https://github.com/wazuh/wazuh-dashboard-plugins/pull/3390)  
+  [#3390](https://github.com/wazuh/wazuh-dashboard-plugins/pull/3390)
   [#3410](https://github.com/wazuh/wazuh-dashboard-plugins/pull/3410)
   [#3408](https://github.com/wazuh/wazuh-dashboard-plugins/pull/3408)
   [#3429](https://github.com/wazuh/wazuh-dashboard-plugins/pull/3429)
diff --git a/docker/osd-dev/dev.sh b/docker/osd-dev/dev.sh
index 8215d59896..75a4b91540 100755
--- a/docker/osd-dev/dev.sh
+++ b/docker/osd-dev/dev.sh
@@ -133,7 +133,7 @@ up)
    docker compose --profile $profile -f dev.yml up -Vd
 
    # Display a command to deploy an agent when using the real server
-   if [[ "$5" =~ "server" ]]; then
+   if [[ "$3" =~ "server" ]]; then
      echo
      echo "**************WARNING**************"
      echo "The agent version must be a published one. This uses only released versions."
diff --git a/plugins/main/public/components/common/loading-searchbar-progress/loading-searchbar-progress.tsx b/plugins/main/public/components/common/loading-searchbar-progress/loading-searchbar-progress.tsx
new file mode 100644
index 0000000000..263b739b4d
--- /dev/null
+++ b/plugins/main/public/components/common/loading-searchbar-progress/loading-searchbar-progress.tsx
@@ -0,0 +1,12 @@
+import { EuiProgress } from '@elastic/eui';
+import React from 'react';
+
+interface LoadingSearchbarProgress {
+  message?: React.ReactNode;
+}
+
+export function LoadingSearchbarProgress({
+  message,
+}: LoadingSearchbarProgress) {
+  return <EuiProgress size='xs' color='primary' />;
+}
diff --git a/plugins/main/public/components/common/wazuh-data-grid/wz-data-grid.tsx b/plugins/main/public/components/common/wazuh-data-grid/wz-data-grid.tsx
index c5d0e83cf8..0da3e2e1c5 100644
--- a/plugins/main/public/components/common/wazuh-data-grid/wz-data-grid.tsx
+++ b/plugins/main/public/components/common/wazuh-data-grid/wz-data-grid.tsx
@@ -29,7 +29,7 @@ import {
   ErrorFactory,
   HttpError,
 } from '../../../react-services/error-management';
-import { LoadingSpinner } from '../loading-spinner/loading-spinner';
+import { LoadingSearchbarProgress } from '../loading-searchbar-progress/loading-searchbar-progress';
 import { DiscoverNoResults } from '../no-results/no-results';
 import { DocumentViewTableAndJson } from '../wazuh-discover/components/document-view-table-and-json';
 import DiscoverDataGridAdditionalControls from '../wazuh-discover/components/data-grid-additional-controls';
@@ -152,7 +152,7 @@ const WazuhDataGrid = (props: tWazuhDataGridProps) => {
 
   return (
     <>
-      {isLoading ? <LoadingSpinner /> : null}
+      {isLoading ? <LoadingSearchbarProgress /> : null}
       {!isLoading && !results?.hits?.total === 0 ? (
         <DiscoverNoResults timeFieldName={timeField} queryLanguage={''} />
       ) : null}
diff --git a/plugins/main/public/components/common/wazuh-discover/wz-discover.tsx b/plugins/main/public/components/common/wazuh-discover/wz-discover.tsx
index e8ac8842bd..f679f0a142 100644
--- a/plugins/main/public/components/common/wazuh-discover/wz-discover.tsx
+++ b/plugins/main/public/components/common/wazuh-discover/wz-discover.tsx
@@ -16,7 +16,7 @@ import { IntlProvider } from 'react-intl';
 import { IndexPattern } from '../../../../../../src/plugins/data/common';
 import { SearchResponse } from '../../../../../../src/core/server';
 import { DiscoverNoResults } from '../no-results/no-results';
-import { LoadingSpinner } from '../loading-spinner/loading-spinner';
+import { LoadingSearchbarProgress } from '../loading-searchbar-progress/loading-searchbar-progress';
 import {
   useDataGrid,
   tDataGridColumn,
@@ -190,17 +190,17 @@ const WazuhDiscoverComponent = (props: WazuhDiscoverProps) => {
 
   return (
     <IntlProvider locale='en'>
-      <EuiPageTemplate
-        className='discoverContainer'
-        restrictWidth='100%'
-        fullHeight={true}
-        grow
-        paddingSize='none'
-        pageContentProps={{ color: 'transparent' }}
-      >
-        {isDataSourceLoading ? (
-          <LoadingSpinner />
-        ) : (
+      {isDataSourceLoading ? (
+        <LoadingSearchbarProgress />
+      ) : (
+        <EuiPageTemplate
+          className='discoverContainer'
+          restrictWidth='100%'
+          fullHeight={true}
+          grow
+          paddingSize='none'
+          pageContentProps={{ color: 'transparent' }}
+        >
           <WzSearchBar
             appName='wazuh-discover-search-bar'
             {...searchBarProps}
@@ -209,91 +209,91 @@ const WazuhDiscoverComponent = (props: WazuhDiscoverProps) => {
             showQueryBar={true}
             showSaveQuery={true}
           />
-        )}
-        {!isDataSourceLoading && results?.hits?.total === 0 ? (
-          <DiscoverNoResults timeFieldName={timeField} queryLanguage={''} />
-        ) : null}
-        <div
-          className={
-            !isDataSourceLoading && dataSource && results?.hits?.total > 0
-              ? ''
-              : 'wz-no-display'
-          }
-        >
-          <EuiPanel
-            paddingSize='s'
-            hasShadow={false}
-            hasBorder={false}
-            color='transparent'
+          {!isDataSourceLoading && results?.hits?.total === 0 ? (
+            <DiscoverNoResults timeFieldName={timeField} queryLanguage={''} />
+          ) : null}
+          <div
+            className={
+              !isDataSourceLoading && dataSource && results?.hits?.total > 0
+                ? ''
+                : 'wz-no-display'
+            }
           >
-            <EuiFlexGroup gutterSize='s' direction='column'>
-              <EuiFlexItem grow={false} className='discoverChartContainer'>
-                <EuiPanel
-                  hasBorder={false}
-                  hasShadow={false}
-                  color='transparent'
-                  paddingSize='none'
-                >
-                  <EuiPanel>
-                    <DashboardByRenderer
-                      input={histogramChartInput(
-                        AlertsRepository.getStoreIndexPatternId(),
-                        fetchFilters,
-                        query,
-                        absoluteDateRange.from,
-                        absoluteDateRange.to,
-                      )}
-                    />
+            <EuiPanel
+              paddingSize='s'
+              hasShadow={false}
+              hasBorder={false}
+              color='transparent'
+            >
+              <EuiFlexGroup gutterSize='s' direction='column'>
+                <EuiFlexItem grow={false} className='discoverChartContainer'>
+                  <EuiPanel
+                    hasBorder={false}
+                    hasShadow={false}
+                    color='transparent'
+                    paddingSize='none'
+                  >
+                    <EuiPanel>
+                      <DashboardByRenderer
+                        input={histogramChartInput(
+                          AlertsRepository.getStoreIndexPatternId(),
+                          fetchFilters,
+                          query,
+                          absoluteDateRange.from,
+                          absoluteDateRange.to,
+                        )}
+                      />
+                    </EuiPanel>
                   </EuiPanel>
-                </EuiPanel>
-              </EuiFlexItem>
-              <EuiFlexItem>
-                <EuiDataGrid
-                  {...dataGridProps}
-                  className={sideNavDocked ? 'dataGridDockedNav' : ''}
-                  toolbarVisibility={{
-                    additionalControls: (
-                      <>
-                        <DiscoverDataGridAdditionalControls
-                          totalHits={results?.hits?.total || 0}
-                          isExporting={isExporting}
-                          onClickExportResults={onClickExportResults}
-                          maxEntriesPerQuery={MAX_ENTRIES_PER_QUERY}
-                          dateRange={absoluteDateRange}
-                        />
-                      </>
-                    ),
-                  }}
-                />
-              </EuiFlexItem>
-            </EuiFlexGroup>
-          </EuiPanel>
-          {inspectedHit && (
-            <EuiFlyout onClose={() => setInspectedHit(undefined)} size='m'>
-              <EuiFlyoutHeader>
-                <DocDetailsHeader
-                  doc={inspectedHit}
-                  indexPattern={dataSource?.indexPattern}
-                />
-              </EuiFlyoutHeader>
-              <EuiFlyoutBody>
-                <EuiFlexGroup direction='column'>
-                  <EuiFlexItem>
-                    <DocumentViewTableAndJson
-                      document={inspectedHit}
-                      indexPattern={indexPattern}
-                      renderFields={getAllCustomRenders(
-                        defaultTableColumns,
-                        wzDiscoverRenderColumns,
-                      )}
-                    />
-                  </EuiFlexItem>
-                </EuiFlexGroup>
-              </EuiFlyoutBody>
-            </EuiFlyout>
-          )}
-        </div>
-      </EuiPageTemplate>
+                </EuiFlexItem>
+                <EuiFlexItem>
+                  <EuiDataGrid
+                    {...dataGridProps}
+                    className={sideNavDocked ? 'dataGridDockedNav' : ''}
+                    toolbarVisibility={{
+                      additionalControls: (
+                        <>
+                          <DiscoverDataGridAdditionalControls
+                            totalHits={results?.hits?.total || 0}
+                            isExporting={isExporting}
+                            onClickExportResults={onClickExportResults}
+                            maxEntriesPerQuery={MAX_ENTRIES_PER_QUERY}
+                            dateRange={absoluteDateRange}
+                          />
+                        </>
+                      ),
+                    }}
+                  />
+                </EuiFlexItem>
+              </EuiFlexGroup>
+            </EuiPanel>
+            {inspectedHit && (
+              <EuiFlyout onClose={() => setInspectedHit(undefined)} size='m'>
+                <EuiFlyoutHeader>
+                  <DocDetailsHeader
+                    doc={inspectedHit}
+                    indexPattern={dataSource?.indexPattern}
+                  />
+                </EuiFlyoutHeader>
+                <EuiFlyoutBody>
+                  <EuiFlexGroup direction='column'>
+                    <EuiFlexItem>
+                      <DocumentViewTableAndJson
+                        document={inspectedHit}
+                        indexPattern={indexPattern}
+                        renderFields={getAllCustomRenders(
+                          defaultTableColumns,
+                          wzDiscoverRenderColumns,
+                        )}
+                      />
+                    </EuiFlexItem>
+                  </EuiFlexGroup>
+                </EuiFlyoutBody>
+              </EuiFlyout>
+            )}
+          </div>
+        </EuiPageTemplate>
+      )}
     </IntlProvider>
   );
 };
diff --git a/plugins/main/public/components/common/wazuh-discover/wz-flyout-discover.tsx b/plugins/main/public/components/common/wazuh-discover/wz-flyout-discover.tsx
index 1182491229..93cb855a4f 100644
--- a/plugins/main/public/components/common/wazuh-discover/wz-flyout-discover.tsx
+++ b/plugins/main/public/components/common/wazuh-discover/wz-flyout-discover.tsx
@@ -15,7 +15,7 @@ import { IntlProvider } from 'react-intl';
 import { IndexPattern } from '../../../../../../src/plugins/data/public';
 import { SearchResponse } from '../../../../../../src/core/server';
 import { DiscoverNoResults } from '../no-results/no-results';
-import { LoadingSpinner } from '../loading-spinner/loading-spinner';
+import { LoadingSearchbarProgress } from '../loading-searchbar-progress/loading-searchbar-progress';
 import { tDataGridColumn } from '../data-grid';
 import {
   ErrorHandler,
@@ -268,82 +268,82 @@ const WazuhFlyoutDiscoverComponent = (props: WazuhDiscoverProps) => {
 
   return (
     <IntlProvider locale='en'>
-      <EuiFlexGroup className='flyout-row'>
-        <EuiFlexItem>
-          {isDataSourceLoading ? (
-            <LoadingSpinner />
-          ) : (
+      {isDataSourceLoading ? (
+        <LoadingSearchbarProgress />
+      ) : (
+        <EuiFlexGroup className='flyout-row'>
+          <EuiFlexItem>
             <WzSearchBar
               appName='wazuh-discover-search-bar'
               {...searchBarProps}
               useDefaultBehaviors={false}
               hideFixedFilters
             />
-          )}
-          {!isDataSourceLoading && results?.hits?.total === 0 && (
-            <DiscoverNoResults timeFieldName={timeField} queryLanguage={''} />
-          )}
-          {!isDataSourceLoading && dataSource && results?.hits?.total > 0 && (
-            <>
-              <EuiPanel
-                color='subdued'
-                borderRadius='none'
-                hasShadow={false}
-                paddingSize='s'
-              >
-                <HitsCounter
-                  hits={results?.hits?.total}
-                  showResetButton={false}
-                  tooltip={
-                    results?.hits?.total &&
-                    results?.hits?.total > MAX_ENTRIES_PER_QUERY
-                      ? {
-                          ariaLabel: 'Warning',
-                          content: `The query results exceeded the limit of ${formatNumWithCommas(
-                            MAX_ENTRIES_PER_QUERY,
-                          )} hits. Please refine your search.`,
-                          iconType: 'alert',
-                          position: 'top',
-                        }
-                      : undefined
-                  }
+            {!isDataSourceLoading && results?.hits?.total === 0 && (
+              <DiscoverNoResults timeFieldName={timeField} queryLanguage={''} />
+            )}
+            {!isDataSourceLoading && dataSource && results?.hits?.total > 0 && (
+              <>
+                <EuiPanel
+                  color='subdued'
+                  borderRadius='none'
+                  hasShadow={false}
+                  paddingSize='s'
+                >
+                  <HitsCounter
+                    hits={results?.hits?.total}
+                    showResetButton={false}
+                    tooltip={
+                      results?.hits?.total &&
+                      results?.hits?.total > MAX_ENTRIES_PER_QUERY
+                        ? {
+                            ariaLabel: 'Warning',
+                            content: `The query results exceeded the limit of ${formatNumWithCommas(
+                              MAX_ENTRIES_PER_QUERY,
+                            )} hits. Please refine your search.`,
+                            iconType: 'alert',
+                            position: 'top',
+                          }
+                        : undefined
+                    }
+                  />
+                  {absoluteDateRange ? (
+                    <EuiFlexGroup
+                      gutterSize='s'
+                      responsive={false}
+                      justifyContent='center'
+                      alignItems='center'
+                    >
+                      <EuiFlexItem grow={false}>
+                        <EuiText size='s'>
+                          {formatUIDate(absoluteDateRange?.from)} -{' '}
+                          {formatUIDate(absoluteDateRange?.to)}
+                        </EuiText>
+                      </EuiFlexItem>
+                    </EuiFlexGroup>
+                  ) : null}
+                </EuiPanel>
+                <EuiBasicTable
+                  items={parsedItems}
+                  itemId={INDEX_FIELD_NAME}
+                  itemIdToExpandedRowMap={itemIdToExpandedRowMap}
+                  isExpandable={isExpanded}
+                  columns={getColumns()}
+                  pagination={{
+                    ...pagination,
+                    totalItemCount:
+                      (results?.hits?.total ?? 0) > MAX_ENTRIES_PER_QUERY
+                        ? MAX_ENTRIES_PER_QUERY
+                        : results?.hits?.total ?? 0,
+                  }}
+                  sorting={sorting}
+                  onChange={onTableChange}
                 />
-                {absoluteDateRange ? (
-                  <EuiFlexGroup
-                    gutterSize='s'
-                    responsive={false}
-                    justifyContent='center'
-                    alignItems='center'
-                  >
-                    <EuiFlexItem grow={false}>
-                      <EuiText size='s'>
-                        {formatUIDate(absoluteDateRange?.from)} -{' '}
-                        {formatUIDate(absoluteDateRange?.to)}
-                      </EuiText>
-                    </EuiFlexItem>
-                  </EuiFlexGroup>
-                ) : null}
-              </EuiPanel>
-              <EuiBasicTable
-                items={parsedItems}
-                itemId={INDEX_FIELD_NAME}
-                itemIdToExpandedRowMap={itemIdToExpandedRowMap}
-                isExpandable={isExpanded}
-                columns={getColumns()}
-                pagination={{
-                  ...pagination,
-                  totalItemCount:
-                    (results?.hits?.total ?? 0) > MAX_ENTRIES_PER_QUERY
-                      ? MAX_ENTRIES_PER_QUERY
-                      : results?.hits?.total ?? 0,
-                }}
-                sorting={sorting}
-                onChange={onTableChange}
-              />
-            </>
-          )}
-        </EuiFlexItem>
-      </EuiFlexGroup>
+              </>
+            )}
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      )}
     </IntlProvider>
   );
 };
diff --git a/plugins/main/public/components/common/welcome/dashboard/events-count.tsx b/plugins/main/public/components/common/welcome/dashboard/events-count.tsx
index e41f399a5f..a0b2c009c7 100644
--- a/plugins/main/public/components/common/welcome/dashboard/events-count.tsx
+++ b/plugins/main/public/components/common/welcome/dashboard/events-count.tsx
@@ -14,7 +14,7 @@ import {
   EuiText,
 } from '@elastic/eui';
 import { useTimeFilter } from '../../hooks';
-import { LoadingSpinner } from '../../loading-spinner/loading-spinner';
+import { LoadingSearchbarProgress } from '../../loading-searchbar-progress/loading-searchbar-progress';
 
 const plugins = getPlugins();
 const DashboardByRenderer = plugins.dashboard.DashboardContainerByValueRenderer;
@@ -67,7 +67,7 @@ export const EventsCount = () => {
             }}
           />
         ) : (
-          <LoadingSpinner />
+          <LoadingSearchbarProgress />
         )}
       </EuiFlexItem>
     </EuiPanel>
diff --git a/plugins/main/public/components/management/cluster/dashboard/dashboard.tsx b/plugins/main/public/components/management/cluster/dashboard/dashboard.tsx
index d469c57779..c4a8e64b9a 100644
--- a/plugins/main/public/components/management/cluster/dashboard/dashboard.tsx
+++ b/plugins/main/public/components/management/cluster/dashboard/dashboard.tsx
@@ -8,7 +8,7 @@ import {
   ErrorHandler,
   HttpError,
 } from '../../../../react-services/error-management';
-import { LoadingSpinner } from '../../../common/loading-spinner/loading-spinner';
+import { LoadingSearchbarProgress } from '../../../common/loading-searchbar-progress/loading-searchbar-progress';
 import { withErrorBoundary } from '../../../common/hocs/error-boundary/with-error-boundary';
 import { EuiSpacer, EuiFlexItem } from '@elastic/eui';
 
@@ -154,7 +154,7 @@ const DashboardCT: React.FC<DashboardCTProps> = ({ statusRunning }) => {
     <I18nProvider>
       <EuiFlexItem style={{ padding: '0 16px' }}>
         {isDataSourceLoading && !dataSource ? (
-          <LoadingSpinner />
+          <LoadingSearchbarProgress />
         ) : !state.showNodes ? (
           <WzSearchBar
             appName='ct-searchbar'
diff --git a/plugins/main/public/components/overview/amazon-web-services/dashboards/dashboard.tsx b/plugins/main/public/components/overview/amazon-web-services/dashboards/dashboard.tsx
index 7b6ad97022..6692bdd095 100644
--- a/plugins/main/public/components/overview/amazon-web-services/dashboards/dashboard.tsx
+++ b/plugins/main/public/components/overview/amazon-web-services/dashboards/dashboard.tsx
@@ -23,7 +23,7 @@ import {
   AWSDataSource,
 } from '../../../common/data-source';
 import { DiscoverNoResults } from '../../../common/no-results/no-results';
-import { LoadingSpinner } from '../../../common/loading-spinner/loading-spinner';
+import { LoadingSearchbarProgress } from '../../../common/loading-searchbar-progress/loading-searchbar-progress';
 import { useReportingCommunicateSearchContext } from '../../../common/hooks/use-reporting-communicate-search-context';
 import { WzSearchBar } from '../../../common/search-bar';
 
@@ -89,53 +89,53 @@ const DashboardAWSComponents: React.FC = ({}) => {
   return (
     <>
       <I18nProvider>
-        <>
-          {isDataSourceLoading && !dataSource ? (
-            <LoadingSpinner />
-          ) : (
+        {isDataSourceLoading && !dataSource ? (
+          <LoadingSearchbarProgress />
+        ) : (
+          <>
             <WzSearchBar
               appName='aws-searchbar'
               {...searchBarProps}
               fixedFilters={fixedFilters}
             />
-          )}
-          {dataSource && results?.hits?.total === 0 ? (
-            <DiscoverNoResults />
-          ) : null}
-          <div
-            className={
-              !isDataSourceLoading && dataSource && results?.hits?.total > 0
-                ? ''
-                : 'wz-no-display'
-            }
-          >
-            <SampleDataWarning />
-            <div className='aws-dashboard-responsive'>
-              <DashboardByRenderer
-                input={{
-                  viewMode: ViewMode.VIEW,
-                  panels: getDashboardPanels(
-                    AlertsRepository.getStoreIndexPatternId(),
-                    Boolean(dataSource?.getPinnedAgentFilter()?.length),
-                  ),
-                  isFullScreenMode: false,
-                  filters: fetchFilters || [],
-                  useMargins: true,
-                  id: 'aws-dashboard-tab',
-                  timeRange: absoluteDateRange,
-                  title: 'AWS dashboard',
-                  description: 'Dashboard of the AWS',
-                  query: query,
-                  refreshConfig: {
-                    pause: false,
-                    value: 15,
-                  },
-                  hidePanelTitles: false,
-                }}
-              />
+            {dataSource && results?.hits?.total === 0 ? (
+              <DiscoverNoResults />
+            ) : null}
+            <div
+              className={
+                !isDataSourceLoading && dataSource && results?.hits?.total > 0
+                  ? ''
+                  : 'wz-no-display'
+              }
+            >
+              <SampleDataWarning />
+              <div className='aws-dashboard-responsive'>
+                <DashboardByRenderer
+                  input={{
+                    viewMode: ViewMode.VIEW,
+                    panels: getDashboardPanels(
+                      AlertsRepository.getStoreIndexPatternId(),
+                      Boolean(dataSource?.getPinnedAgentFilter()?.length),
+                    ),
+                    isFullScreenMode: false,
+                    filters: fetchFilters || [],
+                    useMargins: true,
+                    id: 'aws-dashboard-tab',
+                    timeRange: absoluteDateRange,
+                    title: 'AWS dashboard',
+                    description: 'Dashboard of the AWS',
+                    query: query,
+                    refreshConfig: {
+                      pause: false,
+                      value: 15,
+                    },
+                    hidePanelTitles: false,
+                  }}
+                />
+              </div>
             </div>
-          </div>
-        </>
+          </>
+        )}
       </I18nProvider>
     </>
   );
diff --git a/plugins/main/public/components/overview/compliance-table/compliance-table.tsx b/plugins/main/public/components/overview/compliance-table/compliance-table.tsx
index cba7ddfcf5..d186be87a9 100644
--- a/plugins/main/public/components/overview/compliance-table/compliance-table.tsx
+++ b/plugins/main/public/components/overview/compliance-table/compliance-table.tsx
@@ -35,7 +35,7 @@ import {
 } from '../../common/data-source';
 import { IndexPattern } from '../../../../../../src/plugins/data/common';
 import useSearchBar from '../../common/search-bar/use-search-bar';
-import { LoadingSpinner } from '../../common/loading-spinner/loading-spinner';
+import { LoadingSearchbarProgress } from '../../common/loading-searchbar-progress/loading-searchbar-progress';
 import { I18nProvider } from '@osd/i18n/react';
 import { useAsyncAction } from '../../common/hooks';
 import { WzSearchBar } from '../../common/search-bar';
@@ -262,7 +262,9 @@ export const ComplianceTable = withAgentSupportModule(props => {
 
   useEffect(() => {
     const { descriptions, complianceObject, selectedRequirements } =
-      buildComplianceObject({ section: props.section });
+      buildComplianceObject({
+        section: props.section,
+      });
     setComplianceData({ descriptions, complianceObject, selectedRequirements });
   }, []);
 
@@ -284,16 +286,16 @@ export const ComplianceTable = withAgentSupportModule(props => {
 
   return (
     <I18nProvider>
-      <>
-        <EuiPanel
-          paddingSize='none'
-          hasShadow={false}
-          hasBorder={false}
-          color='transparent'
-        >
-          {isDataSourceLoading && !dataSource ? (
-            <LoadingSpinner />
-          ) : (
+      {isDataSourceLoading && !dataSource ? (
+        <LoadingSearchbarProgress />
+      ) : (
+        <>
+          <EuiPanel
+            paddingSize='none'
+            hasShadow={false}
+            hasBorder={false}
+            color='transparent'
+          >
             <WzSearchBar
               appName='compliance-controls'
               {...searchBarProps}
@@ -303,63 +305,63 @@ export const ComplianceTable = withAgentSupportModule(props => {
               showQueryBar={true}
               showSaveQuery={true}
             />
-          )}
-        </EuiPanel>
-        <EuiPanel
-          paddingSize='s'
-          hasShadow={false}
-          hasBorder={false}
-          color='transparent'
-        >
-          <EuiPanel paddingSize='none'>
-            <EuiFlexGroup paddingSize='none'>
-              <EuiFlexItem style={{ width: 'calc(100% - 24px)' }}>
-                {!!Object.keys(complianceData.complianceObject).length && (
-                  <EuiFlexGroup>
-                    <EuiFlexItem
-                      grow={false}
-                      style={{
-                        width: '15%',
-                        minWidth: 145,
-                        maxHeight: 'calc(100vh - 320px)',
-                        overflowX: 'hidden',
-                      }}
-                    >
-                      <ComplianceRequirements
-                        section={props.section}
-                        onChangeSelectedRequirements={selectedRequirements =>
-                          setComplianceData(state => ({
-                            ...state,
-                            selectedRequirements,
-                          }))
-                        }
-                        requirementsCount={action.data || []}
-                        loadingAlerts={action.running}
-                        {...complianceData}
-                      />
-                    </EuiFlexItem>
-                    <EuiFlexItem style={{ width: '15%' }}>
-                      <ComplianceSubrequirements
-                        section={props.section}
-                        onSelectedTabChanged={id =>
-                          props.onSelectedTabChanged(id)
-                        }
-                        requirementsCount={action.data || []}
-                        loadingAlerts={action.running}
-                        fetchFilters={fetchFilters}
-                        getRegulatoryComplianceRequirementFilter={
-                          getRegulatoryComplianceRequirementFilter
-                        }
-                        {...complianceData}
-                      />
-                    </EuiFlexItem>
-                  </EuiFlexGroup>
-                )}
-              </EuiFlexItem>
-            </EuiFlexGroup>
           </EuiPanel>
-        </EuiPanel>
-      </>
+          <EuiPanel
+            paddingSize='s'
+            hasShadow={false}
+            hasBorder={false}
+            color='transparent'
+          >
+            <EuiPanel paddingSize='none'>
+              <EuiFlexGroup paddingSize='none'>
+                <EuiFlexItem style={{ width: 'calc(100% - 24px)' }}>
+                  {!!Object.keys(complianceData.complianceObject).length && (
+                    <EuiFlexGroup>
+                      <EuiFlexItem
+                        grow={false}
+                        style={{
+                          width: '15%',
+                          minWidth: 145,
+                          maxHeight: 'calc(100vh - 320px)',
+                          overflowX: 'hidden',
+                        }}
+                      >
+                        <ComplianceRequirements
+                          section={props.section}
+                          onChangeSelectedRequirements={selectedRequirements =>
+                            setComplianceData(state => ({
+                              ...state,
+                              selectedRequirements,
+                            }))
+                          }
+                          requirementsCount={action.data || []}
+                          loadingAlerts={action.running}
+                          {...complianceData}
+                        />
+                      </EuiFlexItem>
+                      <EuiFlexItem style={{ width: '15%' }}>
+                        <ComplianceSubrequirements
+                          section={props.section}
+                          onSelectedTabChanged={id =>
+                            props.onSelectedTabChanged(id)
+                          }
+                          requirementsCount={action.data || []}
+                          loadingAlerts={action.running}
+                          fetchFilters={fetchFilters}
+                          getRegulatoryComplianceRequirementFilter={
+                            getRegulatoryComplianceRequirementFilter
+                          }
+                          {...complianceData}
+                        />
+                      </EuiFlexItem>
+                    </EuiFlexGroup>
+                  )}
+                </EuiFlexItem>
+              </EuiFlexGroup>
+            </EuiPanel>
+          </EuiPanel>
+        </>
+      )}
     </I18nProvider>
   );
 });
diff --git a/plugins/main/public/components/overview/docker/dashboards/dashboard.tsx b/plugins/main/public/components/overview/docker/dashboards/dashboard.tsx
index c4170c6a91..e95a8a46d6 100644
--- a/plugins/main/public/components/overview/docker/dashboards/dashboard.tsx
+++ b/plugins/main/public/components/overview/docker/dashboards/dashboard.tsx
@@ -23,7 +23,7 @@ import {
   DockerDataSource,
 } from '../../../common/data-source';
 import { DiscoverNoResults } from '../../../common/no-results/no-results';
-import { LoadingSpinner } from '../../../common/loading-spinner/loading-spinner';
+import { LoadingSearchbarProgress } from '../../../common/loading-searchbar-progress/loading-searchbar-progress';
 import { useReportingCommunicateSearchContext } from '../../../common/hooks/use-reporting-communicate-search-context';
 import { WzSearchBar } from '../../../common/search-bar';
 
@@ -90,10 +90,10 @@ const DashboardDockerComponent: React.FC = ({}) => {
   return (
     <>
       <I18nProvider>
-        <>
-          {isDataSourceLoading && !dataSource ? (
-            <LoadingSpinner />
-          ) : (
+        {isDataSourceLoading && !dataSource ? (
+          <LoadingSearchbarProgress />
+        ) : (
+          <>
             <WzSearchBar
               appName='docker-searchbar'
               {...searchBarProps}
@@ -102,42 +102,42 @@ const DashboardDockerComponent: React.FC = ({}) => {
               showQueryInput={true}
               showQueryBar={true}
             />
-          )}
-          {dataSource && results?.hits?.total === 0 ? (
-            <DiscoverNoResults />
-          ) : null}
-          <div
-            className={
-              dataSource && results?.hits?.total > 0 ? '' : 'wz-no-display'
-            }
-          >
-            <SampleDataWarning />
-            <div className='docker-dashboard-responsive'>
-              <DashboardByRenderer
-                input={{
-                  viewMode: ViewMode.VIEW,
-                  panels: getDashboardPanels(
-                    AlertsRepository.getStoreIndexPatternId(),
-                    Boolean(dataSource?.getPinnedAgentFilter()?.length),
-                  ),
-                  isFullScreenMode: false,
-                  filters: fetchFilters ?? [],
-                  useMargins: true,
-                  id: 'docker-dashboard-tab',
-                  timeRange: absoluteDateRange,
-                  title: 'Docker dashboard',
-                  description: 'Dashboard of Docker',
-                  query: query,
-                  refreshConfig: {
-                    pause: false,
-                    value: 15,
-                  },
-                  hidePanelTitles: false,
-                }}
-              />
+            {dataSource && results?.hits?.total === 0 ? (
+              <DiscoverNoResults />
+            ) : null}
+            <div
+              className={
+                dataSource && results?.hits?.total > 0 ? '' : 'wz-no-display'
+              }
+            >
+              <SampleDataWarning />
+              <div className='docker-dashboard-responsive'>
+                <DashboardByRenderer
+                  input={{
+                    viewMode: ViewMode.VIEW,
+                    panels: getDashboardPanels(
+                      AlertsRepository.getStoreIndexPatternId(),
+                      Boolean(dataSource?.getPinnedAgentFilter()?.length),
+                    ),
+                    isFullScreenMode: false,
+                    filters: fetchFilters ?? [],
+                    useMargins: true,
+                    id: 'docker-dashboard-tab',
+                    timeRange: absoluteDateRange,
+                    title: 'Docker dashboard',
+                    description: 'Dashboard of Docker',
+                    query: query,
+                    refreshConfig: {
+                      pause: false,
+                      value: 15,
+                    },
+                    hidePanelTitles: false,
+                  }}
+                />
+              </div>
             </div>
-          </div>
-        </>
+          </>
+        )}
       </I18nProvider>
     </>
   );
diff --git a/plugins/main/public/components/overview/fim/dashboard/dashboard.tsx b/plugins/main/public/components/overview/fim/dashboard/dashboard.tsx
index 3372e61637..371bfb503a 100644
--- a/plugins/main/public/components/overview/fim/dashboard/dashboard.tsx
+++ b/plugins/main/public/components/overview/fim/dashboard/dashboard.tsx
@@ -23,7 +23,7 @@ import {
   FIMDataSource,
 } from '../../../common/data-source';
 import { DiscoverNoResults } from '../../../common/no-results/no-results';
-import { LoadingSpinner } from '../../../common/loading-spinner/loading-spinner';
+import { LoadingSearchbarProgress } from '../../../common/loading-searchbar-progress/loading-searchbar-progress';
 import { useReportingCommunicateSearchContext } from '../../../common/hooks/use-reporting-communicate-search-context';
 import { WzSearchBar } from '../../../common/search-bar';
 
@@ -90,10 +90,10 @@ const DashboardFIMComponent: React.FC = ({}) => {
   return (
     <>
       <I18nProvider>
-        <>
-          {isDataSourceLoading && !dataSource ? (
-            <LoadingSpinner />
-          ) : (
+        {isDataSourceLoading && !dataSource ? (
+          <LoadingSearchbarProgress />
+        ) : (
+          <>
             <WzSearchBar
               appName='fim-searchbar'
               {...searchBarProps}
@@ -102,44 +102,44 @@ const DashboardFIMComponent: React.FC = ({}) => {
               showQueryInput={true}
               showQueryBar={true}
             />
-          )}
-          {dataSource && results?.hits?.total === 0 ? (
-            <DiscoverNoResults />
-          ) : null}
-          <div
-            className={
-              !isDataSourceLoading && dataSource && results?.hits?.total > 0
-                ? ''
-                : 'wz-no-display'
-            }
-          >
-            <SampleDataWarning />
-            <div className='fim-dashboard-responsive'>
-              <DashboardByRenderer
-                input={{
-                  viewMode: ViewMode.VIEW,
-                  panels: getDashboardPanels(
-                    AlertsRepository.getStoreIndexPatternId(),
-                    Boolean(dataSource?.getPinnedAgentFilter()?.length),
-                  ),
-                  isFullScreenMode: false,
-                  filters: fetchFilters ?? [],
-                  useMargins: true,
-                  id: 'fim-dashboard-tab',
-                  timeRange: absoluteDateRange,
-                  title: 'File Integrity Monitoring dashboard',
-                  description: 'Dashboard of the File Integrity Monitoring',
-                  query: query,
-                  refreshConfig: {
-                    pause: false,
-                    value: 15,
-                  },
-                  hidePanelTitles: false,
-                }}
-              />
+            {dataSource && results?.hits?.total === 0 ? (
+              <DiscoverNoResults />
+            ) : null}
+            <div
+              className={
+                !isDataSourceLoading && dataSource && results?.hits?.total > 0
+                  ? ''
+                  : 'wz-no-display'
+              }
+            >
+              <SampleDataWarning />
+              <div className='fim-dashboard-responsive'>
+                <DashboardByRenderer
+                  input={{
+                    viewMode: ViewMode.VIEW,
+                    panels: getDashboardPanels(
+                      AlertsRepository.getStoreIndexPatternId(),
+                      Boolean(dataSource?.getPinnedAgentFilter()?.length),
+                    ),
+                    isFullScreenMode: false,
+                    filters: fetchFilters ?? [],
+                    useMargins: true,
+                    id: 'fim-dashboard-tab',
+                    timeRange: absoluteDateRange,
+                    title: 'File Integrity Monitoring dashboard',
+                    description: 'Dashboard of the File Integrity Monitoring',
+                    query: query,
+                    refreshConfig: {
+                      pause: false,
+                      value: 15,
+                    },
+                    hidePanelTitles: false,
+                  }}
+                />
+              </div>
             </div>
-          </div>
-        </>
+          </>
+        )}
       </I18nProvider>
     </>
   );
diff --git a/plugins/main/public/components/overview/gdpr/dashboards/dashboard.tsx b/plugins/main/public/components/overview/gdpr/dashboards/dashboard.tsx
index 6444bf359e..382ecb0af6 100644
--- a/plugins/main/public/components/overview/gdpr/dashboards/dashboard.tsx
+++ b/plugins/main/public/components/overview/gdpr/dashboards/dashboard.tsx
@@ -8,7 +8,7 @@ import useSearchBar from '../../../common/search-bar/use-search-bar';
 import './styles.scss';
 import { withErrorBoundary } from '../../../common/hocs';
 import { DiscoverNoResults } from '../../../common/no-results/no-results';
-import { LoadingSpinner } from '../../../common/loading-spinner/loading-spinner';
+import { LoadingSearchbarProgress } from '../../../common/loading-searchbar-progress/loading-searchbar-progress';
 import { IndexPattern } from '../../../../../../../src/plugins/data/common';
 import {
   ErrorFactory,
@@ -91,10 +91,10 @@ const DashboardGDPRComponent: React.FC = () => {
   return (
     <>
       <I18nProvider>
-        <>
-          {isDataSourceLoading && !dataSource ? (
-            <LoadingSpinner />
-          ) : (
+        {isDataSourceLoading && !dataSource ? (
+          <LoadingSearchbarProgress />
+        ) : (
+          <>
             <WzSearchBar
               appName='gdpr-searchbar'
               {...searchBarProps}
@@ -103,42 +103,42 @@ const DashboardGDPRComponent: React.FC = () => {
               showQueryInput={true}
               showQueryBar={true}
             />
-          )}
-          {dataSource && results?.hits?.total === 0 ? (
-            <DiscoverNoResults />
-          ) : null}
-          <div
-            className={
-              dataSource && results?.hits?.total > 0 ? '' : 'wz-no-display'
-            }
-          >
-            <SampleDataWarning />
-            <div className='gdpr-dashboard-responsive'>
-              <DashboardByRenderer
-                input={{
-                  viewMode: ViewMode.VIEW,
-                  panels: getDashboardPanels(
-                    AlertsRepository.getStoreIndexPatternId(),
-                    Boolean(dataSource?.getPinnedAgentFilter()?.length),
-                  ),
-                  isFullScreenMode: false,
-                  filters: fetchFilters ?? [],
-                  useMargins: true,
-                  id: 'gdpr-dashboard-tab',
-                  timeRange: absoluteDateRange,
-                  title: 'GDPR dashboard',
-                  description: 'Dashboard of the GDPR',
-                  query: searchBarProps.query,
-                  refreshConfig: {
-                    pause: false,
-                    value: 15,
-                  },
-                  hidePanelTitles: false,
-                }}
-              />
+            {dataSource && results?.hits?.total === 0 ? (
+              <DiscoverNoResults />
+            ) : null}
+            <div
+              className={
+                dataSource && results?.hits?.total > 0 ? '' : 'wz-no-display'
+              }
+            >
+              <SampleDataWarning />
+              <div className='gdpr-dashboard-responsive'>
+                <DashboardByRenderer
+                  input={{
+                    viewMode: ViewMode.VIEW,
+                    panels: getDashboardPanels(
+                      AlertsRepository.getStoreIndexPatternId(),
+                      Boolean(dataSource?.getPinnedAgentFilter()?.length),
+                    ),
+                    isFullScreenMode: false,
+                    filters: fetchFilters ?? [],
+                    useMargins: true,
+                    id: 'gdpr-dashboard-tab',
+                    timeRange: absoluteDateRange,
+                    title: 'GDPR dashboard',
+                    description: 'Dashboard of the GDPR',
+                    query: searchBarProps.query,
+                    refreshConfig: {
+                      pause: false,
+                      value: 15,
+                    },
+                    hidePanelTitles: false,
+                  }}
+                />
+              </div>
             </div>
-          </div>
-        </>
+          </>
+        )}
       </I18nProvider>
     </>
   );
diff --git a/plugins/main/public/components/overview/github/dashboards/dashboard.tsx b/plugins/main/public/components/overview/github/dashboards/dashboard.tsx
index c76a9d0b6a..393def651b 100644
--- a/plugins/main/public/components/overview/github/dashboards/dashboard.tsx
+++ b/plugins/main/public/components/overview/github/dashboards/dashboard.tsx
@@ -8,7 +8,7 @@ import useSearchBar from '../../../common/search-bar/use-search-bar';
 import './styles.scss';
 import { withErrorBoundary } from '../../../common/hocs';
 import { DiscoverNoResults } from '../../../common/no-results/no-results';
-import { LoadingSpinner } from '../../../common/loading-spinner/loading-spinner';
+import { LoadingSearchbarProgress } from '../../../common/loading-searchbar-progress/loading-searchbar-progress';
 import { IndexPattern } from '../../../../../../../src/plugins/data/common';
 import {
   ErrorFactory,
@@ -91,10 +91,10 @@ const DashboardGitHubComponent: React.FC = () => {
   return (
     <>
       <I18nProvider>
-        <>
-          {isDataSourceLoading && !dataSource ? (
-            <LoadingSpinner />
-          ) : (
+        {isDataSourceLoading && !dataSource ? (
+          <LoadingSearchbarProgress />
+        ) : (
+          <>
             <WzSearchBar
               appName='github-searchbar'
               {...searchBarProps}
@@ -103,42 +103,42 @@ const DashboardGitHubComponent: React.FC = () => {
               showQueryInput={true}
               showQueryBar={true}
             />
-          )}
-          {dataSource && results?.hits?.total === 0 ? (
-            <DiscoverNoResults />
-          ) : null}
-          {dataSource && results?.hits?.total > 0 ? (
-            <div
-              className={`github-dashboard-responsive ${
-                dataSource && results?.hits?.total > 0 ? '' : 'wz-no-display'
-              }`}
-            >
-              <SampleDataWarning />
-              <DashboardByRenderer
-                input={{
-                  viewMode: ViewMode.VIEW,
-                  panels: getDashboardPanels(
-                    AlertsRepository.getStoreIndexPatternId(),
-                    Boolean(dataSource?.getPinnedAgentFilter()?.length),
-                  ),
-                  isFullScreenMode: false,
-                  filters: fetchFilters ?? [],
-                  useMargins: true,
-                  id: 'github-dashboard-tab',
-                  timeRange: absoluteDateRange,
-                  title: 'GitHub dashboard',
-                  description: 'Dashboard of the GitHub',
-                  query: searchBarProps.query,
-                  refreshConfig: {
-                    pause: false,
-                    value: 15,
-                  },
-                  hidePanelTitles: false,
-                }}
-              />
-            </div>
-          ) : null}
-        </>
+            {dataSource && results?.hits?.total === 0 ? (
+              <DiscoverNoResults />
+            ) : null}
+            {dataSource && results?.hits?.total > 0 ? (
+              <div
+                className={`github-dashboard-responsive ${
+                  dataSource && results?.hits?.total > 0 ? '' : 'wz-no-display'
+                }`}
+              >
+                <SampleDataWarning />
+                <DashboardByRenderer
+                  input={{
+                    viewMode: ViewMode.VIEW,
+                    panels: getDashboardPanels(
+                      AlertsRepository.getStoreIndexPatternId(),
+                      Boolean(dataSource?.getPinnedAgentFilter()?.length),
+                    ),
+                    isFullScreenMode: false,
+                    filters: fetchFilters ?? [],
+                    useMargins: true,
+                    id: 'github-dashboard-tab',
+                    timeRange: absoluteDateRange,
+                    title: 'GitHub dashboard',
+                    description: 'Dashboard of the GitHub',
+                    query: searchBarProps.query,
+                    refreshConfig: {
+                      pause: false,
+                      value: 15,
+                    },
+                    hidePanelTitles: false,
+                  }}
+                />
+              </div>
+            ) : null}
+          </>
+        )}
       </I18nProvider>
     </>
   );
diff --git a/plugins/main/public/components/overview/github/panel/github-panel.tsx b/plugins/main/public/components/overview/github/panel/github-panel.tsx
index e228d36f76..200d9310f0 100644
--- a/plugins/main/public/components/overview/github/panel/github-panel.tsx
+++ b/plugins/main/public/components/overview/github/panel/github-panel.tsx
@@ -16,7 +16,7 @@ import { MainPanel } from '../../../common/modules/panel';
 import { withErrorBoundary } from '../../../common/hocs';
 import { CustomSearchBar } from '../../../common/custom-search-bar';
 import useSearchBar from '../../../common/search-bar/use-search-bar';
-import { LoadingSpinner } from '../../../common/loading-spinner/loading-spinner';
+import { LoadingSearchbarProgress } from '../../../common/loading-searchbar-progress/loading-searchbar-progress';
 import { ModuleConfiguration } from './views';
 import { ModuleConfig, filtersValues } from './config';
 import {
@@ -47,14 +47,13 @@ export const GitHubPanel = withErrorBoundary(() => {
     isLoading: isDataSourceLoading,
     fetchData,
     setFilters,
-    filterManager
+    filterManager,
   } = useDataSource<tParsedIndexPattern, PatternDataSource>({
     DataSource: GitHubDataSource,
     repository: new AlertsDataSourceRepository(),
-    fetchFilters: [...selectedPanelFilter]
+    fetchFilters: [...selectedPanelFilter],
   });
 
-
   const { searchBarProps } = useSearchBar({
     indexPattern: dataSource?.indexPattern as IndexPattern,
     filters,
@@ -68,43 +67,48 @@ export const GitHubPanel = withErrorBoundary(() => {
     const { field, value } = selectedFilter;
     const controlledByFilter = 'github-panel-row-filter';
     if (value) {
-      const filter = filterManager?.createFilter(FILTER_OPERATOR.IS_ONE_OF, field, [value], controlledByFilter);
+      const filter = filterManager?.createFilter(
+        FILTER_OPERATOR.IS_ONE_OF,
+        field,
+        [value],
+        controlledByFilter,
+      );
       setSelectedPanelFilter([filter]);
     } else {
       setSelectedPanelFilter([]);
     }
     setCurrentSelectedFilter(selectedFilter);
-  }
+  };
 
   return (
     <>
       {isDataSourceLoading ? (
-        <LoadingSpinner />
+        <LoadingSearchbarProgress />
       ) : (
-          <>
-            <CustomSearchBar
-              filterInputs={filtersValues}
-              filterDrillDownValue={drillDownValue}
-              fixedFilters={[...fixedFilters, ...selectedPanelFilter]}
-              searchBarProps={{ ...searchBarProps }}
-              setFilters={setFilters}
-              indexPattern={dataSource?.indexPattern}
-            />
-            <MainPanel
-              moduleConfig={ModuleConfig}
-              filterDrillDownValue={filterDrillDownValue}
-              sidePanelChildren={<ModuleConfiguration />}
-              onChangeView={handleChangeView}
-              dataSourceProps={{
-                fetchData: fetchData,
-                fetchFilters: [...fetchFilters, ...selectedPanelFilter],
-                searchBarProps,
-                indexPattern: dataSource?.indexPattern,
-              }}
-              isLoading={isDataSourceLoading}
-            />
-          </>
-        )}
+        <>
+          <CustomSearchBar
+            filterInputs={filtersValues}
+            filterDrillDownValue={drillDownValue}
+            fixedFilters={[...fixedFilters, ...selectedPanelFilter]}
+            searchBarProps={{ ...searchBarProps }}
+            setFilters={setFilters}
+            indexPattern={dataSource?.indexPattern}
+          />
+          <MainPanel
+            moduleConfig={ModuleConfig}
+            filterDrillDownValue={filterDrillDownValue}
+            sidePanelChildren={<ModuleConfiguration />}
+            onChangeView={handleChangeView}
+            dataSourceProps={{
+              fetchData: fetchData,
+              fetchFilters: [...fetchFilters, ...selectedPanelFilter],
+              searchBarProps,
+              indexPattern: dataSource?.indexPattern,
+            }}
+            isLoading={isDataSourceLoading}
+          />
+        </>
+      )}
     </>
   );
 });
diff --git a/plugins/main/public/components/overview/google-cloud/dashboards/dashboard.tsx b/plugins/main/public/components/overview/google-cloud/dashboards/dashboard.tsx
index 3d9c37b558..1566f0d965 100644
--- a/plugins/main/public/components/overview/google-cloud/dashboards/dashboard.tsx
+++ b/plugins/main/public/components/overview/google-cloud/dashboards/dashboard.tsx
@@ -22,7 +22,7 @@ import {
 } from '../../../common/data-source';
 import { GoogleCloudDataSource } from '../../../common/data-source/pattern/alerts/google-cloud/google-cloud-data-source';
 import { DiscoverNoResults } from '../../../common/no-results/no-results';
-import { LoadingSpinner } from '../../../common/loading-spinner/loading-spinner';
+import { LoadingSearchbarProgress } from '../../../common/loading-searchbar-progress/loading-searchbar-progress';
 import { useReportingCommunicateSearchContext } from '../../../common/hooks/use-reporting-communicate-search-context';
 import { WzSearchBar } from '../../../common/search-bar';
 
@@ -89,10 +89,10 @@ const DashboardGoogleCloudComponent: React.FC = () => {
   return (
     <>
       <I18nProvider>
-        <>
-          {isDataSourceLoading && !dataSource ? (
-            <LoadingSpinner />
-          ) : (
+        {isDataSourceLoading && !dataSource ? (
+          <LoadingSearchbarProgress />
+        ) : (
+          <>
             <WzSearchBar
               appName='google-cloud-searchbar'
               {...searchBarProps}
@@ -102,42 +102,42 @@ const DashboardGoogleCloudComponent: React.FC = () => {
               showQueryBar={true}
               showSaveQuery={true}
             />
-          )}
-          {dataSource && results?.hits?.total === 0 ? (
-            <DiscoverNoResults />
-          ) : null}
-          <div
-            className={
-              dataSource && results?.hits?.total > 0 ? '' : 'wz-no-display'
-            }
-          >
-            <SampleDataWarning />
-            <div className='google-cloud-dashboard-responsive'>
-              <DashboardByRenderer
-                input={{
-                  viewMode: ViewMode.VIEW,
-                  panels: getDashboardPanels(
-                    AlertsRepository.getStoreIndexPatternId(),
-                    Boolean(dataSource?.getPinnedAgentFilter()?.length),
-                  ),
-                  isFullScreenMode: false,
-                  filters: fetchFilters ?? [],
-                  useMargins: true,
-                  id: 'google-cloud-detector-dashboard-tab',
-                  timeRange: absoluteDateRange,
-                  title: 'Google Cloud detector dashboard',
-                  description: 'Dashboard of the Google Cloud',
-                  query: searchBarProps.query,
-                  refreshConfig: {
-                    pause: false,
-                    value: 15,
-                  },
-                  hidePanelTitles: false,
-                }}
-              />
+            {dataSource && results?.hits?.total === 0 ? (
+              <DiscoverNoResults />
+            ) : null}
+            <div
+              className={
+                dataSource && results?.hits?.total > 0 ? '' : 'wz-no-display'
+              }
+            >
+              <SampleDataWarning />
+              <div className='google-cloud-dashboard-responsive'>
+                <DashboardByRenderer
+                  input={{
+                    viewMode: ViewMode.VIEW,
+                    panels: getDashboardPanels(
+                      AlertsRepository.getStoreIndexPatternId(),
+                      Boolean(dataSource?.getPinnedAgentFilter()?.length),
+                    ),
+                    isFullScreenMode: false,
+                    filters: fetchFilters ?? [],
+                    useMargins: true,
+                    id: 'google-cloud-detector-dashboard-tab',
+                    timeRange: absoluteDateRange,
+                    title: 'Google Cloud detector dashboard',
+                    description: 'Dashboard of the Google Cloud',
+                    query: searchBarProps.query,
+                    refreshConfig: {
+                      pause: false,
+                      value: 15,
+                    },
+                    hidePanelTitles: false,
+                  }}
+                />
+              </div>
             </div>
-          </div>
-        </>
+          </>
+        )}
       </I18nProvider>
     </>
   );
diff --git a/plugins/main/public/components/overview/hipaa/dashboards/dashboard.tsx b/plugins/main/public/components/overview/hipaa/dashboards/dashboard.tsx
index e7c7cc70b2..812b515537 100644
--- a/plugins/main/public/components/overview/hipaa/dashboards/dashboard.tsx
+++ b/plugins/main/public/components/overview/hipaa/dashboards/dashboard.tsx
@@ -8,7 +8,7 @@ import useSearchBar from '../../../common/search-bar/use-search-bar';
 import './styles.scss';
 import { withErrorBoundary } from '../../../common/hocs';
 import { DiscoverNoResults } from '../../../common/no-results/no-results';
-import { LoadingSpinner } from '../../../common/loading-spinner/loading-spinner';
+import { LoadingSearchbarProgress } from '../../../common/loading-searchbar-progress/loading-searchbar-progress';
 import { IndexPattern } from '../../../../../../../src/plugins/data/common';
 import {
   ErrorFactory,
@@ -91,10 +91,10 @@ const DashboardHIPAAComponent: React.FC = () => {
   return (
     <>
       <I18nProvider>
-        <>
-          {isDataSourceLoading && !dataSource ? (
-            <LoadingSpinner />
-          ) : (
+        {isDataSourceLoading && !dataSource ? (
+          <LoadingSearchbarProgress />
+        ) : (
+          <>
             <WzSearchBar
               appName='hipaa-searchbar'
               {...searchBarProps}
@@ -103,42 +103,42 @@ const DashboardHIPAAComponent: React.FC = () => {
               showQueryInput={true}
               showQueryBar={true}
             />
-          )}
-          {dataSource && results?.hits?.total === 0 ? (
-            <DiscoverNoResults />
-          ) : null}
-          <div
-            className={
-              dataSource && results?.hits?.total > 0 ? '' : 'wz-no-display'
-            }
-          >
-            <SampleDataWarning />
-            <div className='hipaa-dashboard-responsive'>
-              <DashboardByRenderer
-                input={{
-                  viewMode: ViewMode.VIEW,
-                  panels: getDashboardPanels(
-                    AlertsRepository.getStoreIndexPatternId(),
-                    Boolean(dataSource?.getPinnedAgentFilter()?.length),
-                  ),
-                  isFullScreenMode: false,
-                  filters: fetchFilters ?? [],
-                  useMargins: true,
-                  id: 'hipaa-dashboard-tab',
-                  timeRange: absoluteDateRange,
-                  title: 'HIPAA dashboard',
-                  description: 'Dashboard of the HIPAA',
-                  query: searchBarProps.query,
-                  refreshConfig: {
-                    pause: false,
-                    value: 15,
-                  },
-                  hidePanelTitles: false,
-                }}
-              />
+            {dataSource && results?.hits?.total === 0 ? (
+              <DiscoverNoResults />
+            ) : null}
+            <div
+              className={
+                dataSource && results?.hits?.total > 0 ? '' : 'wz-no-display'
+              }
+            >
+              <SampleDataWarning />
+              <div className='hipaa-dashboard-responsive'>
+                <DashboardByRenderer
+                  input={{
+                    viewMode: ViewMode.VIEW,
+                    panels: getDashboardPanels(
+                      AlertsRepository.getStoreIndexPatternId(),
+                      Boolean(dataSource?.getPinnedAgentFilter()?.length),
+                    ),
+                    isFullScreenMode: false,
+                    filters: fetchFilters ?? [],
+                    useMargins: true,
+                    id: 'hipaa-dashboard-tab',
+                    timeRange: absoluteDateRange,
+                    title: 'HIPAA dashboard',
+                    description: 'Dashboard of the HIPAA',
+                    query: searchBarProps.query,
+                    refreshConfig: {
+                      pause: false,
+                      value: 15,
+                    },
+                    hidePanelTitles: false,
+                  }}
+                />
+              </div>
             </div>
-          </div>
-        </>
+          </>
+        )}
       </I18nProvider>
     </>
   );
diff --git a/plugins/main/public/components/overview/malware-detection/dashboard/dashboard.tsx b/plugins/main/public/components/overview/malware-detection/dashboard/dashboard.tsx
index a1d19c5710..8d5b4b12df 100644
--- a/plugins/main/public/components/overview/malware-detection/dashboard/dashboard.tsx
+++ b/plugins/main/public/components/overview/malware-detection/dashboard/dashboard.tsx
@@ -23,7 +23,7 @@ import {
   MalwareDetectionDataSource,
 } from '../../../common/data-source';
 import { DiscoverNoResults } from '../../../common/no-results/no-results';
-import { LoadingSpinner } from '../../../common/loading-spinner/loading-spinner';
+import { LoadingSearchbarProgress } from '../../../common/loading-searchbar-progress/loading-searchbar-progress';
 import { useReportingCommunicateSearchContext } from '../../../common/hooks/use-reporting-communicate-search-context';
 import { WzSearchBar } from '../../../common/search-bar';
 
@@ -90,10 +90,10 @@ const DashboardMalwareDetectionComponent: React.FC = ({}) => {
   return (
     <>
       <I18nProvider>
-        <>
-          {isDataSourceLoading && !dataSource ? (
-            <LoadingSpinner />
-          ) : (
+        {isDataSourceLoading && !dataSource ? (
+          <LoadingSearchbarProgress />
+        ) : (
+          <>
             <WzSearchBar
               appName='malware-detection-searchbar'
               {...searchBarProps}
@@ -102,44 +102,44 @@ const DashboardMalwareDetectionComponent: React.FC = ({}) => {
               showQueryInput={true}
               showQueryBar={true}
             />
-          )}
-          {dataSource && results?.hits?.total === 0 ? (
-            <DiscoverNoResults />
-          ) : null}
-          <div
-            className={
-              !isDataSourceLoading && dataSource && results?.hits?.total > 0
-                ? ''
-                : 'wz-no-display'
-            }
-          >
-            <SampleDataWarning />
-            <div className='malware-detection-dashboard-responsive'>
-              <DashboardByRenderer
-                input={{
-                  viewMode: ViewMode.VIEW,
-                  panels: getDashboardPanels(
-                    AlertsRepository.getStoreIndexPatternId(),
-                    Boolean(dataSource?.getPinnedAgentFilter()?.length),
-                  ),
-                  isFullScreenMode: false,
-                  filters: fetchFilters ?? [],
-                  useMargins: true,
-                  id: 'malware-detection-dashboard-tab',
-                  timeRange: absoluteDateRange,
-                  title: 'Malware Detection dashboard',
-                  description: 'Dashboard of the Malware Detection',
-                  query: query,
-                  refreshConfig: {
-                    pause: false,
-                    value: 15,
-                  },
-                  hidePanelTitles: false,
-                }}
-              />
+            {dataSource && results?.hits?.total === 0 ? (
+              <DiscoverNoResults />
+            ) : null}
+            <div
+              className={
+                !isDataSourceLoading && dataSource && results?.hits?.total > 0
+                  ? ''
+                  : 'wz-no-display'
+              }
+            >
+              <SampleDataWarning />
+              <div className='malware-detection-dashboard-responsive'>
+                <DashboardByRenderer
+                  input={{
+                    viewMode: ViewMode.VIEW,
+                    panels: getDashboardPanels(
+                      AlertsRepository.getStoreIndexPatternId(),
+                      Boolean(dataSource?.getPinnedAgentFilter()?.length),
+                    ),
+                    isFullScreenMode: false,
+                    filters: fetchFilters ?? [],
+                    useMargins: true,
+                    id: 'malware-detection-dashboard-tab',
+                    timeRange: absoluteDateRange,
+                    title: 'Malware Detection dashboard',
+                    description: 'Dashboard of the Malware Detection',
+                    query: query,
+                    refreshConfig: {
+                      pause: false,
+                      value: 15,
+                    },
+                    hidePanelTitles: false,
+                  }}
+                />
+              </div>
             </div>
-          </div>
-        </>
+          </>
+        )}
       </I18nProvider>
     </>
   );
diff --git a/plugins/main/public/components/overview/mitre/dashboard/dashboard.tsx b/plugins/main/public/components/overview/mitre/dashboard/dashboard.tsx
index 486563af8f..deaf0f5056 100644
--- a/plugins/main/public/components/overview/mitre/dashboard/dashboard.tsx
+++ b/plugins/main/public/components/overview/mitre/dashboard/dashboard.tsx
@@ -12,7 +12,7 @@ import {
   HttpError,
 } from '../../../../react-services/error-management';
 import { DiscoverNoResults } from '../../../common/no-results/no-results';
-import { LoadingSpinner } from '../../../common/loading-spinner/loading-spinner';
+import { LoadingSearchbarProgress } from '../../../common/loading-searchbar-progress/loading-searchbar-progress';
 import { SearchResponse } from '../../../../../../../src/core/server';
 import './mitre_dashboard_filters.scss';
 import {
@@ -88,10 +88,10 @@ export const DashboardMITRE: React.FC = () => {
   return (
     <>
       <I18nProvider>
-        <>
-          {isDataSourceLoading && !dataSource ? (
-            <LoadingSpinner />
-          ) : (
+        {isDataSourceLoading && !dataSource ? (
+          <LoadingSearchbarProgress />
+        ) : (
+          <>
             <WzSearchBar
               appName='mitre-detector-searchbar'
               {...searchBarProps}
@@ -100,42 +100,42 @@ export const DashboardMITRE: React.FC = () => {
               showQueryBar={true}
               showSaveQuery={true}
             />
-          )}
-          {dataSource && results?.hits?.total === 0 ? (
-            <DiscoverNoResults />
-          ) : null}
-          <div
-            className={`mitre-dashboard-responsive ${
-              dataSource && results?.hits?.total > 0 ? '' : 'wz-no-display'
-            }`}
-          >
-            <SampleDataWarning />
-            <div className='mitre-dashboard-filters-wrapper'>
-              <DashboardByRenderer
-                input={{
-                  viewMode: ViewMode.VIEW,
-                  panels: getDashboardPanels(
-                    AlertsRepository.getStoreIndexPatternId(),
-                    Boolean(dataSource?.getPinnedAgentFilter().length),
-                  ),
-                  isFullScreenMode: false,
-                  filters: fetchFilters ?? [],
-                  useMargins: true,
-                  id: 'mitre-dashboard-tab-filters',
-                  timeRange: absoluteDateRange,
-                  title: 'MITRE dashboard filters',
-                  description: 'Dashboard of the MITRE filters',
-                  query: query,
-                  refreshConfig: {
-                    pause: false,
-                    value: 15,
-                  },
-                  hidePanelTitles: false,
-                }}
-              />
+            {dataSource && results?.hits?.total === 0 ? (
+              <DiscoverNoResults />
+            ) : null}
+            <div
+              className={`mitre-dashboard-responsive ${
+                dataSource && results?.hits?.total > 0 ? '' : 'wz-no-display'
+              }`}
+            >
+              <SampleDataWarning />
+              <div className='mitre-dashboard-filters-wrapper'>
+                <DashboardByRenderer
+                  input={{
+                    viewMode: ViewMode.VIEW,
+                    panels: getDashboardPanels(
+                      AlertsRepository.getStoreIndexPatternId(),
+                      Boolean(dataSource?.getPinnedAgentFilter().length),
+                    ),
+                    isFullScreenMode: false,
+                    filters: fetchFilters ?? [],
+                    useMargins: true,
+                    id: 'mitre-dashboard-tab-filters',
+                    timeRange: absoluteDateRange,
+                    title: 'MITRE dashboard filters',
+                    description: 'Dashboard of the MITRE filters',
+                    query: query,
+                    refreshConfig: {
+                      pause: false,
+                      value: 15,
+                    },
+                    hidePanelTitles: false,
+                  }}
+                />
+              </div>
             </div>
-          </div>
-        </>
+          </>
+        )}
       </I18nProvider>
     </>
   );
diff --git a/plugins/main/public/components/overview/mitre/framework/mitre.tsx b/plugins/main/public/components/overview/mitre/framework/mitre.tsx
index 4d6e0be20b..9a37658387 100644
--- a/plugins/main/public/components/overview/mitre/framework/mitre.tsx
+++ b/plugins/main/public/components/overview/mitre/framework/mitre.tsx
@@ -23,7 +23,7 @@ import { UI_LOGGER_LEVELS } from '../../../../../common/constants';
 import { UI_ERROR_SEVERITIES } from '../../../../react-services/error-orchestrator/types';
 import { getErrorOrchestrator } from '../../../../react-services/common-services';
 
-import { LoadingSpinner } from '../../../common/loading-spinner/loading-spinner';
+import { LoadingSearchbarProgress } from '../../../common/loading-searchbar-progress/loading-searchbar-progress';
 import useSearchBar from '../../../common/search-bar/use-search-bar';
 import {
   useDataSource,
@@ -147,16 +147,16 @@ const MitreComponent = props => {
 
   return (
     <I18nProvider>
-      <>
-        <EuiPanel
-          paddingSize='none'
-          hasShadow={false}
-          hasBorder={false}
-          color='transparent'
-        >
-          {isDataSourceLoading && !dataSource ? (
-            <LoadingSpinner />
-          ) : (
+      {isDataSourceLoading && !dataSource ? (
+        <LoadingSearchbarProgress />
+      ) : (
+        <>
+          <EuiPanel
+            paddingSize='none'
+            hasShadow={false}
+            hasBorder={false}
+            color='transparent'
+          >
             <WzSearchBar
               appName='mitre-attack-searchbar'
               {...searchBarProps}
@@ -165,49 +165,49 @@ const MitreComponent = props => {
               showQueryBar={true}
               showSaveQuery={true}
             />
-          )}
-        </EuiPanel>
-        <EuiPanel
-          paddingSize='s'
-          hasShadow={false}
-          hasBorder={false}
-          color='transparent'
-        >
-          <EuiPanel paddingSize='none'>
-            <EuiFlexGroup>
-              <EuiFlexItem
-                grow={false}
-                style={{
-                  width: '15%',
-                  minWidth: 145,
-                  height: 'calc(100vh - 325px)',
-                  overflowX: 'hidden',
-                }}
-              >
-                <Tactics
-                  onChangeSelectedTactics={onChangeSelectedTactics}
-                  filterParams={filterParams}
-                  tacticsObject={mitreState.tacticsObject}
-                  selectedTactics={mitreState.selectedTactics}
-                  fetchData={fetchData}
-                  isLoading={isLoading}
-                />
-              </EuiFlexItem>
-              <EuiFlexItem>
-                <Techniques
-                  indexPatternId={indexPattern?.id}
-                  filterParams={filterParams}
-                  onSelectedTabChanged={id => onSelectedTabChanged(id)}
-                  tacticsObject={mitreState.tacticsObject}
-                  selectedTactics={mitreState.selectedTactics}
-                  fetchData={fetchData}
-                  isLoading={isLoading}
-                />
-              </EuiFlexItem>
-            </EuiFlexGroup>
           </EuiPanel>
-        </EuiPanel>
-      </>
+          <EuiPanel
+            paddingSize='s'
+            hasShadow={false}
+            hasBorder={false}
+            color='transparent'
+          >
+            <EuiPanel paddingSize='none'>
+              <EuiFlexGroup>
+                <EuiFlexItem
+                  grow={false}
+                  style={{
+                    width: '15%',
+                    minWidth: 145,
+                    height: 'calc(100vh - 325px)',
+                    overflowX: 'hidden',
+                  }}
+                >
+                  <Tactics
+                    onChangeSelectedTactics={onChangeSelectedTactics}
+                    filterParams={filterParams}
+                    tacticsObject={mitreState.tacticsObject}
+                    selectedTactics={mitreState.selectedTactics}
+                    fetchData={fetchData}
+                    isLoading={isLoading}
+                  />
+                </EuiFlexItem>
+                <EuiFlexItem>
+                  <Techniques
+                    indexPatternId={indexPattern?.id}
+                    filterParams={filterParams}
+                    onSelectedTabChanged={id => onSelectedTabChanged(id)}
+                    tacticsObject={mitreState.tacticsObject}
+                    selectedTactics={mitreState.selectedTactics}
+                    fetchData={fetchData}
+                    isLoading={isLoading}
+                  />
+                </EuiFlexItem>
+              </EuiFlexGroup>
+            </EuiPanel>
+          </EuiPanel>
+        </>
+      )}
     </I18nProvider>
   );
 };
diff --git a/plugins/main/public/components/overview/nist/dashboards/dashboard.tsx b/plugins/main/public/components/overview/nist/dashboards/dashboard.tsx
index 39cd2623fa..017efa65f3 100644
--- a/plugins/main/public/components/overview/nist/dashboards/dashboard.tsx
+++ b/plugins/main/public/components/overview/nist/dashboards/dashboard.tsx
@@ -8,7 +8,7 @@ import useSearchBar from '../../../common/search-bar/use-search-bar';
 import './styles.scss';
 import { withErrorBoundary } from '../../../common/hocs';
 import { DiscoverNoResults } from '../../../common/no-results/no-results';
-import { LoadingSpinner } from '../../../common/loading-spinner/loading-spinner';
+import { LoadingSearchbarProgress } from '../../../common/loading-searchbar-progress/loading-searchbar-progress';
 import { IndexPattern } from '../../../../../../../src/plugins/data/common';
 import {
   ErrorFactory,
@@ -91,10 +91,10 @@ const DashboardNIST80053Component: React.FC = () => {
   return (
     <>
       <I18nProvider>
-        <>
-          {isDataSourceLoading && !dataSource ? (
-            <LoadingSpinner />
-          ) : (
+        {isDataSourceLoading && !dataSource ? (
+          <LoadingSearchbarProgress />
+        ) : (
+          <>
             <WzSearchBar
               appName='nist-searchbar'
               {...searchBarProps}
@@ -103,42 +103,42 @@ const DashboardNIST80053Component: React.FC = () => {
               showQueryInput={true}
               showQueryBar={true}
             />
-          )}
-          {dataSource && results?.hits?.total === 0 ? (
-            <DiscoverNoResults />
-          ) : null}
-          <div
-            className={
-              dataSource && results?.hits?.total > 0 ? '' : 'wz-no-display'
-            }
-          >
-            <SampleDataWarning />
-            <div className='nist-dashboard-responsive'>
-              <DashboardByRenderer
-                input={{
-                  viewMode: ViewMode.VIEW,
-                  panels: getDashboardPanels(
-                    AlertsRepository.getStoreIndexPatternId(),
-                    Boolean(dataSource?.getPinnedAgentFilter()?.length),
-                  ),
-                  isFullScreenMode: false,
-                  filters: fetchFilters ?? [],
-                  useMargins: true,
-                  id: 'nist-dashboard-tab',
-                  timeRange: absoluteDateRange,
-                  title: 'NIST 800-53 dashboard',
-                  description: 'Dashboard of the NIST 800-53',
-                  query: searchBarProps.query,
-                  refreshConfig: {
-                    pause: false,
-                    value: 15,
-                  },
-                  hidePanelTitles: false,
-                }}
-              />
+            {dataSource && results?.hits?.total === 0 ? (
+              <DiscoverNoResults />
+            ) : null}
+            <div
+              className={
+                dataSource && results?.hits?.total > 0 ? '' : 'wz-no-display'
+              }
+            >
+              <SampleDataWarning />
+              <div className='nist-dashboard-responsive'>
+                <DashboardByRenderer
+                  input={{
+                    viewMode: ViewMode.VIEW,
+                    panels: getDashboardPanels(
+                      AlertsRepository.getStoreIndexPatternId(),
+                      Boolean(dataSource?.getPinnedAgentFilter()?.length),
+                    ),
+                    isFullScreenMode: false,
+                    filters: fetchFilters ?? [],
+                    useMargins: true,
+                    id: 'nist-dashboard-tab',
+                    timeRange: absoluteDateRange,
+                    title: 'NIST 800-53 dashboard',
+                    description: 'Dashboard of the NIST 800-53',
+                    query: searchBarProps.query,
+                    refreshConfig: {
+                      pause: false,
+                      value: 15,
+                    },
+                    hidePanelTitles: false,
+                  }}
+                />
+              </div>
             </div>
-          </div>
-        </>
+          </>
+        )}
       </I18nProvider>
     </>
   );
diff --git a/plugins/main/public/components/overview/office/dashboard/dashboard.tsx b/plugins/main/public/components/overview/office/dashboard/dashboard.tsx
index f985e7628e..b3b48d1e5b 100644
--- a/plugins/main/public/components/overview/office/dashboard/dashboard.tsx
+++ b/plugins/main/public/components/overview/office/dashboard/dashboard.tsx
@@ -23,7 +23,7 @@ import {
 } from '../../../common/data-source';
 import { Office365DataSource } from '../../../common/data-source/pattern/alerts/office-365/office-365-data-source';
 import { DiscoverNoResults } from '../../../common/no-results/no-results';
-import { LoadingSpinner } from '../../../common/loading-spinner/loading-spinner';
+import { LoadingSearchbarProgress } from '../../../common/loading-searchbar-progress/loading-searchbar-progress';
 import { useReportingCommunicateSearchContext } from '../../../common/hooks/use-reporting-communicate-search-context';
 import { WzSearchBar } from '../../../common/search-bar';
 
@@ -90,10 +90,10 @@ const DashboardOffice365Component: React.FC = () => {
   return (
     <>
       <I18nProvider>
-        <>
-          {isDataSourceLoading && !dataSource ? (
-            <LoadingSpinner />
-          ) : (
+        {isDataSourceLoading && !dataSource ? (
+          <LoadingSearchbarProgress />
+        ) : (
+          <>
             <WzSearchBar
               appName='google-cloud-searchbar'
               {...searchBarProps}
@@ -103,59 +103,61 @@ const DashboardOffice365Component: React.FC = () => {
               showQueryBar={true}
               showSaveQuery={true}
             />
-          )}
-          {dataSource && results?.hits?.total === 0 ? (
-            <DiscoverNoResults />
-          ) : null}
+            {dataSource && results?.hits?.total === 0 ? (
+              <DiscoverNoResults />
+            ) : null}
 
-          <div
-            className={`office-365-dashboard-responsive ${
-              dataSource && results?.hits?.total > 0 ? '' : 'wz-no-display'
-            }`}
-          >
-            <SampleDataWarning />
-            <DashboardByRenderer
-              input={{
-                viewMode: ViewMode.VIEW,
-                panels: getKPIsPanel(AlertsRepository.getStoreIndexPatternId()),
-                isFullScreenMode: false,
-                filters: fetchFilters ?? [],
-                useMargins: true,
-                id: 'kpis-th-dashboard-tab',
-                timeRange: absoluteDateRange,
-                title: 'KPIs Office 365 dashboard',
-                description: 'KPIs Dashboard of the Office 365',
-                query: searchBarProps.query,
-                refreshConfig: {
-                  pause: false,
-                  value: 15,
-                },
-                hidePanelTitles: true,
-              }}
-            />
-            <DashboardByRenderer
-              input={{
-                viewMode: ViewMode.VIEW,
-                panels: getDashboardPanels(
-                  AlertsRepository.getStoreIndexPatternId(),
-                ),
-                isFullScreenMode: false,
-                filters: fetchFilters ?? [],
-                useMargins: true,
-                id: 'office-365-detector-dashboard-tab',
-                timeRange: absoluteDateRange,
-                title: 'Office 365 detector dashboard',
-                description: 'Dashboard of the Office 365',
-                query: searchBarProps.query,
-                refreshConfig: {
-                  pause: false,
-                  value: 15,
-                },
-                hidePanelTitles: false,
-              }}
-            />
-          </div>
-        </>
+            <div
+              className={`office-365-dashboard-responsive ${
+                dataSource && results?.hits?.total > 0 ? '' : 'wz-no-display'
+              }`}
+            >
+              <SampleDataWarning />
+              <DashboardByRenderer
+                input={{
+                  viewMode: ViewMode.VIEW,
+                  panels: getKPIsPanel(
+                    AlertsRepository.getStoreIndexPatternId(),
+                  ),
+                  isFullScreenMode: false,
+                  filters: fetchFilters ?? [],
+                  useMargins: true,
+                  id: 'kpis-th-dashboard-tab',
+                  timeRange: absoluteDateRange,
+                  title: 'KPIs Office 365 dashboard',
+                  description: 'KPIs Dashboard of the Office 365',
+                  query: searchBarProps.query,
+                  refreshConfig: {
+                    pause: false,
+                    value: 15,
+                  },
+                  hidePanelTitles: true,
+                }}
+              />
+              <DashboardByRenderer
+                input={{
+                  viewMode: ViewMode.VIEW,
+                  panels: getDashboardPanels(
+                    AlertsRepository.getStoreIndexPatternId(),
+                  ),
+                  isFullScreenMode: false,
+                  filters: fetchFilters ?? [],
+                  useMargins: true,
+                  id: 'office-365-detector-dashboard-tab',
+                  timeRange: absoluteDateRange,
+                  title: 'Office 365 detector dashboard',
+                  description: 'Dashboard of the Office 365',
+                  query: searchBarProps.query,
+                  refreshConfig: {
+                    pause: false,
+                    value: 15,
+                  },
+                  hidePanelTitles: false,
+                }}
+              />
+            </div>
+          </>
+        )}
       </I18nProvider>
     </>
   );
diff --git a/plugins/main/public/components/overview/office/panel/office-panel.tsx b/plugins/main/public/components/overview/office/panel/office-panel.tsx
index 3c234e3b52..7d908087d7 100644
--- a/plugins/main/public/components/overview/office/panel/office-panel.tsx
+++ b/plugins/main/public/components/overview/office/panel/office-panel.tsx
@@ -16,7 +16,7 @@ import { MainPanel } from '../../../common/modules/panel';
 import { withErrorBoundary } from '../../../common/hocs';
 import { CustomSearchBar } from '../../../common/custom-search-bar';
 import useSearchBar from '../../../common/search-bar/use-search-bar';
-import { LoadingSpinner } from '../../../common/loading-spinner/loading-spinner';
+import { LoadingSearchbarProgress } from '../../../common/loading-searchbar-progress/loading-searchbar-progress';
 import { ModuleConfiguration } from './views';
 import { ModuleConfig, filtersValues } from './config';
 import {
@@ -47,7 +47,7 @@ export const OfficePanel = withErrorBoundary(() => {
     isLoading: isDataSourceLoading,
     fetchData,
     setFilters,
-    filterManager
+    filterManager,
   } = useDataSource<tParsedIndexPattern, PatternDataSource>({
     DataSource: Office365DataSource,
     repository: new AlertsDataSourceRepository(),
@@ -67,19 +67,24 @@ export const OfficePanel = withErrorBoundary(() => {
     const { field, value } = selectedFilter;
     const controlledByFilter = 'office-panel-row-filter';
     if (value) {
-      const filter = filterManager?.createFilter(FILTER_OPERATOR.IS_ONE_OF, field, [value], controlledByFilter);
+      const filter = filterManager?.createFilter(
+        FILTER_OPERATOR.IS_ONE_OF,
+        field,
+        [value],
+        controlledByFilter,
+      );
       // this hide the remove filter button in the filter bar
       setSelectedPanelFilter([filter]);
     } else {
       setSelectedPanelFilter([]);
     }
     setCurrentSelectedFilter(selectedFilter);
-  }
+  };
 
   return (
     <>
       {isDataSourceLoading ? (
-        <LoadingSpinner />
+        <LoadingSearchbarProgress />
       ) : (
         <>
           <CustomSearchBar
@@ -108,4 +113,3 @@ export const OfficePanel = withErrorBoundary(() => {
     </>
   );
 });
-
diff --git a/plugins/main/public/components/overview/pci/dashboards/dashboard.tsx b/plugins/main/public/components/overview/pci/dashboards/dashboard.tsx
index 9e8efad4b2..64305d0b5c 100644
--- a/plugins/main/public/components/overview/pci/dashboards/dashboard.tsx
+++ b/plugins/main/public/components/overview/pci/dashboards/dashboard.tsx
@@ -23,7 +23,7 @@ import {
 } from '../../../common/data-source';
 import { PCIDSSDataSource } from '../../../common/data-source/pattern/alerts/pci-dss/pci-dss-data-source';
 import { DiscoverNoResults } from '../../../common/no-results/no-results';
-import { LoadingSpinner } from '../../../common/loading-spinner/loading-spinner';
+import { LoadingSearchbarProgress } from '../../../common/loading-searchbar-progress/loading-searchbar-progress';
 import { useReportingCommunicateSearchContext } from '../../../common/hooks/use-reporting-communicate-search-context';
 import { WzSearchBar } from '../../../common/search-bar';
 
@@ -92,10 +92,10 @@ const DashboardPCIDSSComponent: React.FC = () => {
   return (
     <>
       <I18nProvider>
-        <>
-          {isDataSourceLoading && !dataSource ? (
-            <LoadingSpinner />
-          ) : (
+        {isDataSourceLoading && !dataSource ? (
+          <LoadingSearchbarProgress />
+        ) : (
+          <>
             <WzSearchBar
               appName='pci-dss-searchbar'
               {...searchBarProps}
@@ -104,42 +104,42 @@ const DashboardPCIDSSComponent: React.FC = () => {
               showQueryInput={true}
               showQueryBar={true}
             />
-          )}
-          {dataSource && results?.hits?.total === 0 ? (
-            <DiscoverNoResults />
-          ) : null}
-          <div
-            className={
-              dataSource && results?.hits?.total > 0 ? '' : 'wz-no-display'
-            }
-          >
-            <SampleDataWarning />
-            <div className='pci-dss-dashboard-responsive'>
-              <DashboardByRenderer
-                input={{
-                  viewMode: ViewMode.VIEW,
-                  panels: getDashboardPanels(
-                    AlertsRepository.getStoreIndexPatternId(),
-                    Boolean(dataSource?.getPinnedAgentFilter()?.length),
-                  ),
-                  isFullScreenMode: false,
-                  filters: fetchFilters ?? [],
-                  useMargins: true,
-                  id: 'pci-dss-dashboard-tab',
-                  timeRange: absoluteDateRange,
-                  title: 'PCI DSS dashboard',
-                  description: 'Dashboard of the PCI DSS',
-                  query: searchBarProps.query,
-                  refreshConfig: {
-                    pause: false,
-                    value: 15,
-                  },
-                  hidePanelTitles: false,
-                }}
-              />
+            {dataSource && results?.hits?.total === 0 ? (
+              <DiscoverNoResults />
+            ) : null}
+            <div
+              className={
+                dataSource && results?.hits?.total > 0 ? '' : 'wz-no-display'
+              }
+            >
+              <SampleDataWarning />
+              <div className='pci-dss-dashboard-responsive'>
+                <DashboardByRenderer
+                  input={{
+                    viewMode: ViewMode.VIEW,
+                    panels: getDashboardPanels(
+                      AlertsRepository.getStoreIndexPatternId(),
+                      Boolean(dataSource?.getPinnedAgentFilter()?.length),
+                    ),
+                    isFullScreenMode: false,
+                    filters: fetchFilters ?? [],
+                    useMargins: true,
+                    id: 'pci-dss-dashboard-tab',
+                    timeRange: absoluteDateRange,
+                    title: 'PCI DSS dashboard',
+                    description: 'Dashboard of the PCI DSS',
+                    query: searchBarProps.query,
+                    refreshConfig: {
+                      pause: false,
+                      value: 15,
+                    },
+                    hidePanelTitles: false,
+                  }}
+                />
+              </div>
             </div>
-          </div>
-        </>
+          </>
+        )}
       </I18nProvider>
     </>
   );
diff --git a/plugins/main/public/components/overview/server-management-statistics/dashboards/dashboardTabsPanels.tsx b/plugins/main/public/components/overview/server-management-statistics/dashboards/dashboardTabsPanels.tsx
index 4b40984946..b261d69619 100644
--- a/plugins/main/public/components/overview/server-management-statistics/dashboards/dashboardTabsPanels.tsx
+++ b/plugins/main/public/components/overview/server-management-statistics/dashboards/dashboardTabsPanels.tsx
@@ -22,7 +22,7 @@ import {
   StatisticsDataSource,
   StatisticsDataSourceRepository,
 } from '../../../common/data-source/pattern/statistics';
-import { LoadingSpinner } from '../../../common/loading-spinner/loading-spinner';
+import { LoadingSearchbarProgress } from '../../../common/loading-searchbar-progress/loading-searchbar-progress';
 import {
   ErrorFactory,
   ErrorHandler,
@@ -131,7 +131,7 @@ export const DashboardTabsPanels = ({
   return (
     <>
       {isDataSourceLoading && !dataSource ? (
-        <LoadingSpinner />
+        <LoadingSearchbarProgress />
       ) : (
         <EuiFlexGroup alignItems='center' justifyContent='flexEnd'>
           {!!(clusterNodes && clusterNodes.length && clusterNodeSelected) && (
diff --git a/plugins/main/public/components/overview/threat-hunting/dashboard/dashboard.tsx b/plugins/main/public/components/overview/threat-hunting/dashboard/dashboard.tsx
index 2cda96f4fd..ba380ff059 100644
--- a/plugins/main/public/components/overview/threat-hunting/dashboard/dashboard.tsx
+++ b/plugins/main/public/components/overview/threat-hunting/dashboard/dashboard.tsx
@@ -49,7 +49,7 @@ import {
   useDataSource,
 } from '../../../common/data-source';
 import { DiscoverNoResults } from '../../../common/no-results/no-results';
-import { LoadingSpinner } from '../../../common/loading-spinner/loading-spinner';
+import { LoadingSearchbarProgress } from '../../../common/loading-searchbar-progress/loading-searchbar-progress';
 import { useReportingCommunicateSearchContext } from '../../../common/hooks/use-reporting-communicate-search-context';
 import { wzDiscoverRenderColumns } from '../../../common/wazuh-discover/render-columns';
 import { WzSearchBar } from '../../../common/search-bar';
@@ -207,10 +207,10 @@ const DashboardTH: React.FC = () => {
 
   return (
     <I18nProvider>
-      <>
-        {isDataSourceLoading && !dataSource ? (
-          <LoadingSpinner />
-        ) : (
+      {isDataSourceLoading && !dataSource ? (
+        <LoadingSearchbarProgress />
+      ) : (
+        <>
           <WzSearchBar
             appName='th-searchbar'
             {...searchBarProps}
@@ -220,107 +220,109 @@ const DashboardTH: React.FC = () => {
             showQueryBar={true}
             showSaveQuery={true}
           />
-        )}
-        {!isDataSourceLoading && dataSource && results?.hits?.total === 0 ? (
-          <DiscoverNoResults />
-        ) : null}
-        <div
-          className={`th-container ${
-            !isDataSourceLoading && dataSource && results?.hits?.total > 0
-              ? ''
-              : 'wz-no-display'
-          }`}
-        >
-          <SampleDataWarning />
-          <div className='th-dashboard-responsive'>
-            <DashboardByRenderer
-              input={{
-                viewMode: ViewMode.VIEW,
-                panels: getKPIsPanel(AlertsRepository.getStoreIndexPatternId()),
-                isFullScreenMode: false,
-                filters: fetchFilters ?? [],
-                useMargins: true,
-                id: 'kpis-th-dashboard-tab',
-                timeRange: absoluteDateRange,
-                title: 'KPIs Threat Hunting dashboard',
-                description: 'KPIs Dashboard of the Threat Hunting',
-                query: query,
-                refreshConfig: {
-                  pause: false,
-                  value: 15,
-                },
-                hidePanelTitles: true,
-              }}
-            />
-            <DashboardByRenderer
-              input={{
-                viewMode: ViewMode.VIEW,
-                panels: getDashboardPanels(
-                  AlertsRepository.getStoreIndexPatternId(),
-                  pinnedAgent,
-                ),
-                isFullScreenMode: false,
-                filters: fetchFilters ?? [],
-                useMargins: true,
-                id: 'th-dashboard-tab',
-                timeRange: absoluteDateRange,
-                title: 'Threat Hunting dashboard',
-                description: 'Dashboard of the Threat Hunting',
-                query: query,
-                refreshConfig: {
-                  pause: false,
-                  value: 15,
-                },
-                hidePanelTitles: false,
-              }}
-            />
-            <div style={{ margin: '8px' }}>
-              {!isDataSourceLoading ? (
-                <EuiDataGrid
-                  {...dataGridProps}
-                  className={sideNavDocked ? 'dataGridDockedNav' : ''}
-                  toolbarVisibility={{
-                    additionalControls: (
-                      <>
-                        <DiscoverDataGridAdditionalControls
-                          totalHits={results?.hits?.total || 0}
-                          isExporting={isExporting}
-                          onClickExportResults={onClickExportResults}
-                          maxEntriesPerQuery={MAX_ENTRIES_PER_QUERY}
-                          dateRange={absoluteDateRange}
+          {!isDataSourceLoading && dataSource && results?.hits?.total === 0 ? (
+            <DiscoverNoResults />
+          ) : null}
+          <div
+            className={`th-container ${
+              !isDataSourceLoading && dataSource && results?.hits?.total > 0
+                ? ''
+                : 'wz-no-display'
+            }`}
+          >
+            <SampleDataWarning />
+            <div className='th-dashboard-responsive'>
+              <DashboardByRenderer
+                input={{
+                  viewMode: ViewMode.VIEW,
+                  panels: getKPIsPanel(
+                    AlertsRepository.getStoreIndexPatternId(),
+                  ),
+                  isFullScreenMode: false,
+                  filters: fetchFilters ?? [],
+                  useMargins: true,
+                  id: 'kpis-th-dashboard-tab',
+                  timeRange: absoluteDateRange,
+                  title: 'KPIs Threat Hunting dashboard',
+                  description: 'KPIs Dashboard of the Threat Hunting',
+                  query: query,
+                  refreshConfig: {
+                    pause: false,
+                    value: 15,
+                  },
+                  hidePanelTitles: true,
+                }}
+              />
+              <DashboardByRenderer
+                input={{
+                  viewMode: ViewMode.VIEW,
+                  panels: getDashboardPanels(
+                    AlertsRepository.getStoreIndexPatternId(),
+                    pinnedAgent,
+                  ),
+                  isFullScreenMode: false,
+                  filters: fetchFilters ?? [],
+                  useMargins: true,
+                  id: 'th-dashboard-tab',
+                  timeRange: absoluteDateRange,
+                  title: 'Threat Hunting dashboard',
+                  description: 'Dashboard of the Threat Hunting',
+                  query: query,
+                  refreshConfig: {
+                    pause: false,
+                    value: 15,
+                  },
+                  hidePanelTitles: false,
+                }}
+              />
+              <div style={{ margin: '8px' }}>
+                {!isDataSourceLoading ? (
+                  <EuiDataGrid
+                    {...dataGridProps}
+                    className={sideNavDocked ? 'dataGridDockedNav' : ''}
+                    toolbarVisibility={{
+                      additionalControls: (
+                        <>
+                          <DiscoverDataGridAdditionalControls
+                            totalHits={results?.hits?.total || 0}
+                            isExporting={isExporting}
+                            onClickExportResults={onClickExportResults}
+                            maxEntriesPerQuery={MAX_ENTRIES_PER_QUERY}
+                            dateRange={absoluteDateRange}
+                          />
+                        </>
+                      ),
+                    }}
+                  />
+                ) : null}
+              </div>
+              {inspectedHit && (
+                <EuiFlyout onClose={() => setInspectedHit(undefined)} size='m'>
+                  <EuiFlyoutHeader>
+                    <DocDetailsHeader
+                      doc={inspectedHit}
+                      indexPattern={dataSource?.indexPattern}
+                    />
+                  </EuiFlyoutHeader>
+                  <EuiFlyoutBody>
+                    <EuiFlexGroup direction='column'>
+                      <EuiFlexItem>
+                        <DocViewer
+                          {...docViewerProps}
+                          renderFields={getAllCustomRenders(
+                            threatHuntingTableDefaultColumns,
+                            wzDiscoverRenderColumns,
+                          )}
                         />
-                      </>
-                    ),
-                  }}
-                />
-              ) : null}
+                      </EuiFlexItem>
+                    </EuiFlexGroup>
+                  </EuiFlyoutBody>
+                </EuiFlyout>
+              )}
             </div>
-            {inspectedHit && (
-              <EuiFlyout onClose={() => setInspectedHit(undefined)} size='m'>
-                <EuiFlyoutHeader>
-                  <DocDetailsHeader
-                    doc={inspectedHit}
-                    indexPattern={dataSource?.indexPattern}
-                  />
-                </EuiFlyoutHeader>
-                <EuiFlyoutBody>
-                  <EuiFlexGroup direction='column'>
-                    <EuiFlexItem>
-                      <DocViewer
-                        {...docViewerProps}
-                        renderFields={getAllCustomRenders(
-                          threatHuntingTableDefaultColumns,
-                          wzDiscoverRenderColumns,
-                        )}
-                      />
-                    </EuiFlexItem>
-                  </EuiFlexGroup>
-                </EuiFlyoutBody>
-              </EuiFlyout>
-            )}
           </div>
-        </div>
-      </>
+        </>
+      )}
     </I18nProvider>
   );
 };
diff --git a/plugins/main/public/components/overview/tsc/dashboards/dashboard.tsx b/plugins/main/public/components/overview/tsc/dashboards/dashboard.tsx
index b4c77dfc1a..dfb3da8ee1 100644
--- a/plugins/main/public/components/overview/tsc/dashboards/dashboard.tsx
+++ b/plugins/main/public/components/overview/tsc/dashboards/dashboard.tsx
@@ -8,7 +8,7 @@ import useSearchBar from '../../../common/search-bar/use-search-bar';
 import './styles.scss';
 import { withErrorBoundary } from '../../../common/hocs';
 import { DiscoverNoResults } from '../../../common/no-results/no-results';
-import { LoadingSpinner } from '../../../common/loading-spinner/loading-spinner';
+import { LoadingSearchbarProgress } from '../../../common/loading-searchbar-progress/loading-searchbar-progress';
 import { IndexPattern } from '../../../../../../../src/plugins/data/common';
 import {
   ErrorFactory,
@@ -91,10 +91,10 @@ const DashboardTSCComponent: React.FC = () => {
   return (
     <>
       <I18nProvider>
-        <>
-          {isDataSourceLoading && !dataSource ? (
-            <LoadingSpinner />
-          ) : (
+        {isDataSourceLoading && !dataSource ? (
+          <LoadingSearchbarProgress />
+        ) : (
+          <>
             <WzSearchBar
               appName='tsc-searchbar'
               {...searchBarProps}
@@ -103,42 +103,42 @@ const DashboardTSCComponent: React.FC = () => {
               showQueryInput={true}
               showQueryBar={true}
             />
-          )}
-          {dataSource && results?.hits?.total === 0 ? (
-            <DiscoverNoResults />
-          ) : null}
-          <div
-            className={
-              dataSource && results?.hits?.total > 0 ? '' : 'wz-no-display'
-            }
-          >
-            <SampleDataWarning />
-            <div className='tsc-dashboard-responsive'>
-              <DashboardByRenderer
-                input={{
-                  viewMode: ViewMode.VIEW,
-                  panels: getDashboardPanels(
-                    AlertsRepository.getStoreIndexPatternId(),
-                    Boolean(dataSource?.getPinnedAgentFilter()?.length),
-                  ),
-                  isFullScreenMode: false,
-                  filters: fetchFilters ?? [],
-                  useMargins: true,
-                  id: 'tsc-dashboard-tab',
-                  timeRange: absoluteDateRange,
-                  title: 'TSC dashboard',
-                  description: 'Dashboard of the TSC',
-                  query: searchBarProps.query,
-                  refreshConfig: {
-                    pause: false,
-                    value: 15,
-                  },
-                  hidePanelTitles: false,
-                }}
-              />
+            {dataSource && results?.hits?.total === 0 ? (
+              <DiscoverNoResults />
+            ) : null}
+            <div
+              className={
+                dataSource && results?.hits?.total > 0 ? '' : 'wz-no-display'
+              }
+            >
+              <SampleDataWarning />
+              <div className='tsc-dashboard-responsive'>
+                <DashboardByRenderer
+                  input={{
+                    viewMode: ViewMode.VIEW,
+                    panels: getDashboardPanels(
+                      AlertsRepository.getStoreIndexPatternId(),
+                      Boolean(dataSource?.getPinnedAgentFilter()?.length),
+                    ),
+                    isFullScreenMode: false,
+                    filters: fetchFilters ?? [],
+                    useMargins: true,
+                    id: 'tsc-dashboard-tab',
+                    timeRange: absoluteDateRange,
+                    title: 'TSC dashboard',
+                    description: 'Dashboard of the TSC',
+                    query: searchBarProps.query,
+                    refreshConfig: {
+                      pause: false,
+                      value: 15,
+                    },
+                    hidePanelTitles: false,
+                  }}
+                />
+              </div>
             </div>
-          </div>
-        </>
+          </>
+        )}
       </I18nProvider>
     </>
   );
diff --git a/plugins/main/public/components/overview/virustotal/dashboard/dashboard.tsx b/plugins/main/public/components/overview/virustotal/dashboard/dashboard.tsx
index f834d90d95..29cf0cff74 100644
--- a/plugins/main/public/components/overview/virustotal/dashboard/dashboard.tsx
+++ b/plugins/main/public/components/overview/virustotal/dashboard/dashboard.tsx
@@ -20,7 +20,7 @@ import {
   tParsedIndexPattern,
   useDataSource,
 } from '../../../common/data-source';
-import { LoadingSpinner } from '../../../common/loading-spinner/loading-spinner';
+import { LoadingSearchbarProgress } from '../../../common/loading-searchbar-progress/loading-searchbar-progress';
 import { DiscoverNoResults } from '../../../common/no-results/no-results';
 import { VirusTotalDataSource } from '../../../common/data-source/pattern/alerts/virustotal/virustotal-data-source';
 import './virustotal_dashboard.scss';
@@ -91,10 +91,10 @@ const DashboardVT: React.FC = () => {
 
   return (
     <I18nProvider>
-      <>
-        {isDataSourceLoading && !dataSource ? (
-          <LoadingSpinner />
-        ) : (
+      {isDataSourceLoading && !dataSource ? (
+        <LoadingSearchbarProgress />
+      ) : (
+        <>
           <WzSearchBar
             appName='virustotal-searchbar'
             {...searchBarProps}
@@ -104,63 +104,63 @@ const DashboardVT: React.FC = () => {
             showQueryBar={true}
             showSaveQuery={true}
           />
-        )}
-        {!isDataSourceLoading && dataSource && results?.hits?.total > 0 ? (
-          <SampleDataWarning />
-        ) : null}
-        {dataSource && results?.hits?.total === 0 ? (
-          <DiscoverNoResults />
-        ) : null}
-        <div
-          className={`virustotal-dashboard-responsive ${
-            !isDataSourceLoading && dataSource && results?.hits?.total > 0
-              ? ''
-              : 'wz-no-display'
-          }`}
-        >
-          <DashboardByRenderer
-            input={{
-              viewMode: ViewMode.VIEW,
-              panels: getKPIsPanel(AlertsRepository.getStoreIndexPatternId()),
-              isFullScreenMode: false,
-              filters: fetchFilters ?? [],
-              useMargins: true,
-              id: 'kpis-virustotal-dashboard-tab',
-              timeRange: absoluteDateRange,
-              title: 'KPIs Virustotal dashboard',
-              description: 'KPIs Dashboard of the Virustotal',
-              query: query,
-              refreshConfig: {
-                pause: false,
-                value: 15,
-              },
-              hidePanelTitles: true,
-            }}
-          />
-          <DashboardByRenderer
-            input={{
-              viewMode: ViewMode.VIEW,
-              panels: getDashboardPanels(
-                AlertsRepository.getStoreIndexPatternId(),
-                Boolean(dataSource?.getPinnedAgentFilter().length),
-              ),
-              isFullScreenMode: false,
-              filters: fetchFilters ?? [],
-              useMargins: true,
-              id: 'virustotal-dashboard-tab',
-              timeRange: absoluteDateRange,
-              title: 'Virustotal dashboard',
-              description: 'Dashboard of the Virustotal',
-              query: query,
-              refreshConfig: {
-                pause: false,
-                value: 15,
-              },
-              hidePanelTitles: false,
-            }}
-          />
-        </div>
-      </>
+          {!isDataSourceLoading && dataSource && results?.hits?.total > 0 ? (
+            <SampleDataWarning />
+          ) : null}
+          {dataSource && results?.hits?.total === 0 ? (
+            <DiscoverNoResults />
+          ) : null}
+          <div
+            className={`virustotal-dashboard-responsive ${
+              !isDataSourceLoading && dataSource && results?.hits?.total > 0
+                ? ''
+                : 'wz-no-display'
+            }`}
+          >
+            <DashboardByRenderer
+              input={{
+                viewMode: ViewMode.VIEW,
+                panels: getKPIsPanel(AlertsRepository.getStoreIndexPatternId()),
+                isFullScreenMode: false,
+                filters: fetchFilters ?? [],
+                useMargins: true,
+                id: 'kpis-virustotal-dashboard-tab',
+                timeRange: absoluteDateRange,
+                title: 'KPIs Virustotal dashboard',
+                description: 'KPIs Dashboard of the Virustotal',
+                query: query,
+                refreshConfig: {
+                  pause: false,
+                  value: 15,
+                },
+                hidePanelTitles: true,
+              }}
+            />
+            <DashboardByRenderer
+              input={{
+                viewMode: ViewMode.VIEW,
+                panels: getDashboardPanels(
+                  AlertsRepository.getStoreIndexPatternId(),
+                  Boolean(dataSource?.getPinnedAgentFilter().length),
+                ),
+                isFullScreenMode: false,
+                filters: fetchFilters ?? [],
+                useMargins: true,
+                id: 'virustotal-dashboard-tab',
+                timeRange: absoluteDateRange,
+                title: 'Virustotal dashboard',
+                description: 'Dashboard of the Virustotal',
+                query: query,
+                refreshConfig: {
+                  pause: false,
+                  value: 15,
+                },
+                hidePanelTitles: false,
+              }}
+            />
+          </div>
+        </>
+      )}
     </I18nProvider>
   );
 };
diff --git a/plugins/main/public/components/overview/vulnerabilities/common/components/loading_spinner.scss b/plugins/main/public/components/overview/vulnerabilities/common/components/loading_spinner.scss
deleted file mode 100644
index 051ab642c1..0000000000
--- a/plugins/main/public/components/overview/vulnerabilities/common/components/loading_spinner.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.discoverNoResults {
-  display: flex;
-  align-items: center;
-}
diff --git a/plugins/main/public/components/overview/vulnerabilities/common/components/loading_spinner.tsx b/plugins/main/public/components/overview/vulnerabilities/common/components/loading_spinner.tsx
deleted file mode 100644
index 7f505e6167..0000000000
--- a/plugins/main/public/components/overview/vulnerabilities/common/components/loading_spinner.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import './loading_spinner.scss';
-import React from 'react';
-import { EuiTitle, EuiPanel, EuiEmptyPrompt, EuiLoadingSpinner } from '@elastic/eui';
-import { FormattedMessage } from '@osd/i18n/react';
-
-export function LoadingSpinner() {
-  return (
-    <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/plugins/main/public/components/overview/vulnerabilities/dashboards/inventory/inventory.tsx b/plugins/main/public/components/overview/vulnerabilities/dashboards/inventory/inventory.tsx
index 377438dc3e..ecef54dd3a 100644
--- a/plugins/main/public/components/overview/vulnerabilities/dashboards/inventory/inventory.tsx
+++ b/plugins/main/public/components/overview/vulnerabilities/dashboards/inventory/inventory.tsx
@@ -30,7 +30,7 @@ import {
   getAllCustomRenders,
 } from '../../../../common/data-grid/data-grid-service';
 import { DiscoverNoResults } from '../../common/components/no_results';
-import { LoadingSpinner } from '../../common/components/loading_spinner';
+import { LoadingSearchbarProgress } from '../../../../../../public/components/common/loading-searchbar-progress/loading-searchbar-progress';
 // common components/hooks
 import useSearchBar from '../../../../common/search-bar/use-search-bar';
 import { useDataGrid } from '../../../../common/data-grid/use-data-grid';
@@ -185,7 +185,7 @@ const InventoryVulsComponent = () => {
         >
           <>
             {isDataSourceLoading ? (
-              <LoadingSpinner />
+              <LoadingSearchbarProgress />
             ) : (
               <WzSearchBar
                 appName='inventory-vuls'
diff --git a/plugins/main/public/components/overview/vulnerabilities/dashboards/overview/dashboard.tsx b/plugins/main/public/components/overview/vulnerabilities/dashboards/overview/dashboard.tsx
index b0145425be..2ea3d9846f 100644
--- a/plugins/main/public/components/overview/vulnerabilities/dashboards/overview/dashboard.tsx
+++ b/plugins/main/public/components/overview/vulnerabilities/dashboards/overview/dashboard.tsx
@@ -10,7 +10,7 @@ import './vulnerability_detector_filters.scss';
 import { getKPIsPanel } from './dashboard_panels_kpis';
 import { withErrorBoundary } from '../../../../common/hocs';
 import { DiscoverNoResults } from '../../common/components/no_results';
-import { LoadingSpinner } from '../../common/components/loading_spinner';
+import { LoadingSearchbarProgress } from '../../../../../../public/components/common/loading-searchbar-progress/loading-searchbar-progress';
 import {
   ErrorFactory,
   ErrorHandler,
@@ -89,7 +89,7 @@ const DashboardVulsComponent: React.FC<DashboardVulsProps> = ({
         <>
           <ModuleEnabledCheck />
           {isDataSourceLoading && !dataSource ? (
-            <LoadingSpinner />
+            <LoadingSearchbarProgress />
           ) : (
             <WzSearchBar
               appName='vulnerability-detector-searchbar'
diff --git a/plugins/main/public/controllers/management/components/management/cluster/cluster-overview.tsx b/plugins/main/public/controllers/management/components/management/cluster/cluster-overview.tsx
index 95ce212425..f74efc79ac 100644
--- a/plugins/main/public/controllers/management/components/management/cluster/cluster-overview.tsx
+++ b/plugins/main/public/controllers/management/components/management/cluster/cluster-overview.tsx
@@ -10,7 +10,7 @@ import { cluster } from '../../../../../utils/applications';
 import { WzRequest } from '../../../../../react-services';
 import { ClusterDisabled } from '../../../../../components/management/cluster/cluster-disabled';
 import { ClusterDashboard } from '../../../../../components/management/cluster/dashboard/dashboard';
-import { LoadingSpinner } from '../../../../../components/common/loading-spinner/loading-spinner';
+import { LoadingSearchbarProgress } from '../../../../../components/common/loading-searchbar-progress/loading-searchbar-progress';
 import { FormattedMessage } from '@osd/i18n/react';
 
 interface ClusterOverviewState {
@@ -60,7 +60,7 @@ export const ClusterOverview = compose(
       />
     ),
     () => (
-      <LoadingSpinner
+      <LoadingSearchbarProgress
         message={
           <FormattedMessage
             id='module.cluster.checking'