From 241dd3bce3a4d5f932d8f66ccfda3ec7605d0c7e Mon Sep 17 00:00:00 2001
From: Justin Kambic <jk@elastic.co>
Date: Fri, 28 Apr 2023 13:57:39 -0400
Subject: [PATCH 1/6] Allow for skipping of the exploratory view embeddable
 loading wrapper.

---
 .../shared/exploratory_view/embeddable/embeddable.tsx    | 1 +
 .../shared/exploratory_view/embeddable/index.tsx         | 9 +++++++--
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/x-pack/plugins/exploratory_view/public/components/shared/exploratory_view/embeddable/embeddable.tsx b/x-pack/plugins/exploratory_view/public/components/shared/exploratory_view/embeddable/embeddable.tsx
index 4642e7fbec524..3330c16fa99cb 100644
--- a/x-pack/plugins/exploratory_view/public/components/shared/exploratory_view/embeddable/embeddable.tsx
+++ b/x-pack/plugins/exploratory_view/public/components/shared/exploratory_view/embeddable/embeddable.tsx
@@ -62,6 +62,7 @@ export interface ExploratoryEmbeddableProps {
   lineHeight?: number;
   dataTestSubj?: string;
   searchSessionId?: string;
+  skipLoadingWrapper?: boolean;
 }
 
 export interface ExploratoryEmbeddableComponentProps extends ExploratoryEmbeddableProps {
diff --git a/x-pack/plugins/exploratory_view/public/components/shared/exploratory_view/embeddable/index.tsx b/x-pack/plugins/exploratory_view/public/components/shared/exploratory_view/embeddable/index.tsx
index 85fb195d29d4f..8235bc11c01ff 100644
--- a/x-pack/plugins/exploratory_view/public/components/shared/exploratory_view/embeddable/index.tsx
+++ b/x-pack/plugins/exploratory_view/public/components/shared/exploratory_view/embeddable/index.tsx
@@ -117,7 +117,12 @@ export function getExploratoryViewEmbeddable(
       return newProps;
     }, [loadCount, props, series.time]);
 
-    if (Object.keys(dataViews).length === 0 || loading || !lensHelper || lensLoading) {
+    if (
+      Object.keys(dataViews).length === 0 ||
+      (loading && !props.skipLoadingWrapper) ||
+      !lensHelper ||
+      lensLoading
+    ) {
       return (
         <LoadingWrapper customHeight={customHeight}>
           <EuiLoadingSpinner size="l" />
@@ -138,7 +143,7 @@ export function getExploratoryViewEmbeddable(
                 {...embedProps}
                 dataViewState={dataViews}
                 lens={lens}
-                lensFormulaHelper={lensHelper.formula}
+                lensFormulaHelper={lensHelper?.formula}
                 searchSessionId={services.data.search.session.getSessionId()}
                 onLoad={onLensLoaded}
               />

From a1ee791ca8311027c60bf32527fd07490750ecf4 Mon Sep 17 00:00:00 2001
From: Justin Kambic <jk@elastic.co>
Date: Fri, 28 Apr 2023 13:58:39 -0400
Subject: [PATCH 2/6] Skip loading wrapper for monitor detail embeddables.

---
 .../monitor_details/monitor_summary/availability_panel.tsx   | 1 +
 .../monitor_summary/availability_sparklines.tsx              | 1 +
 .../monitor_details/monitor_summary/duration_panel.tsx       | 1 +
 .../monitor_details/monitor_summary/duration_sparklines.tsx  | 1 +
 .../monitor_details/monitor_summary/duration_trend.tsx       | 1 +
 .../monitor_details/monitor_summary/monitor_alerts.tsx       | 5 +++++
 .../monitor_summary/monitor_error_sparklines.tsx             | 1 +
 .../monitor_details/monitor_summary/monitor_errors_count.tsx | 1 +
 .../monitor_details/monitor_summary/step_duration_panel.tsx  | 1 +
 9 files changed, 13 insertions(+)

diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/availability_panel.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/availability_panel.tsx
index 413012edb658d..f035915ac30a3 100644
--- a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/availability_panel.tsx
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/availability_panel.tsx
@@ -39,6 +39,7 @@ export const AvailabilityPanel = (props: AvailabilityPanelprops) => {
       align="left"
       customHeight="70px"
       reportType={ReportTypes.SINGLE_METRIC}
+      skipLoadingWrapper={true}
       attributes={[
         {
           time: props,
diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/availability_sparklines.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/availability_sparklines.tsx
index da6881dee4328..e099b29d0f1d5 100644
--- a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/availability_sparklines.tsx
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/availability_sparklines.tsx
@@ -44,6 +44,7 @@ export const AvailabilitySparklines = (props: AvailabilitySparklinesProps) => {
       axisTitlesVisibility={{ x: false, yRight: false, yLeft: false }}
       legendIsVisible={false}
       hideTicks={true}
+      skipLoadingWrapper={true}
       attributes={[
         {
           seriesType: 'area',
diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/duration_panel.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/duration_panel.tsx
index 7ca1d1e003cc4..194d4e2f9f4ab 100644
--- a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/duration_panel.tsx
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/duration_panel.tsx
@@ -39,6 +39,7 @@ export const DurationPanel = (props: DurationPanelProps) => {
       align="left"
       customHeight="70px"
       reportType={ReportTypes.SINGLE_METRIC}
+      skipLoadingWrapper={true}
       attributes={[
         {
           time: props,
diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/duration_sparklines.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/duration_sparklines.tsx
index 5851d1c47cdf5..59672e84a9c6e 100644
--- a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/duration_sparklines.tsx
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/duration_sparklines.tsx
@@ -43,6 +43,7 @@ export const DurationSparklines = (props: DurationSparklinesProps) => {
         axisTitlesVisibility={{ x: false, yRight: false, yLeft: false }}
         legendIsVisible={false}
         hideTicks={true}
+        skipLoadingWrapper={true}
         attributes={[
           {
             seriesType: 'area',
diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/duration_trend.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/duration_trend.tsx
index b25f29a2a3b83..54f4d31473ece 100644
--- a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/duration_trend.tsx
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/duration_trend.tsx
@@ -34,6 +34,7 @@ export const MonitorDurationTrend = (props: MonitorDurationTrendProps) => {
       id="monitorDurationTrend"
       customHeight="240px"
       reportType="kpi-over-time"
+      skipLoadingWrapper={true}
       attributes={Object.keys(metricsToShow).map((metric) => ({
         dataType: 'synthetics',
         time: props,
diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_alerts.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_alerts.tsx
index edd41cf80db32..0b9d9cbc07df7 100644
--- a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_alerts.tsx
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_alerts.tsx
@@ -60,6 +60,7 @@ export const MonitorAlerts = ({
                   withActions={false}
                   customHeight={'27px'}
                   reportType="single-metric"
+                  skipLoadingWrapper={true}
                   attributes={[
                     {
                       dataType: 'alerts',
@@ -104,6 +105,7 @@ export const MonitorAlerts = ({
             dataTestSubj="monitorActiveAlertsCount"
             customHeight={'120px'}
             reportType="single-metric"
+            skipLoadingWrapper={true}
             attributes={[
               {
                 dataType: 'alerts',
@@ -135,6 +137,7 @@ export const MonitorAlerts = ({
             sparklineMode
             customHeight="100px"
             reportType="kpi-over-time"
+            skipLoadingWrapper={true}
             attributes={[
               {
                 seriesType: 'area',
@@ -167,6 +170,7 @@ export const MonitorAlerts = ({
           <ExploratoryViewEmbeddable
             customHeight={'120px'}
             reportType="single-metric"
+            skipLoadingWrapper={true}
             attributes={[
               {
                 dataType: 'alerts',
@@ -198,6 +202,7 @@ export const MonitorAlerts = ({
             sparklineMode
             customHeight="100px"
             reportType="kpi-over-time"
+            skipLoadingWrapper={true}
             attributes={[
               {
                 seriesType: 'area',
diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_error_sparklines.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_error_sparklines.tsx
index f7a0d5b316af1..b8e059b2363f4 100644
--- a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_error_sparklines.tsx
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_error_sparklines.tsx
@@ -40,6 +40,7 @@ export const MonitorErrorSparklines = ({ from, to, monitorId, id }: Props) => {
       axisTitlesVisibility={{ x: false, yRight: false, yLeft: false }}
       legendIsVisible={false}
       hideTicks={true}
+      skipLoadingWrapper={true}
       attributes={[
         {
           time,
diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_errors_count.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_errors_count.tsx
index f8d7bc3c2f0ac..f60bfb4e3a5d7 100644
--- a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_errors_count.tsx
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_errors_count.tsx
@@ -38,6 +38,7 @@ export const MonitorErrorsCount = ({ monitorId, from, to, id }: MonitorErrorsCou
       align="left"
       customHeight="70px"
       reportType={ReportTypes.SINGLE_METRIC}
+      skipLoadingWrapper={true}
       attributes={[
         {
           time,
diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/step_duration_panel.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/step_duration_panel.tsx
index a8bd0d9a23b6c..e7efdc1b4195f 100644
--- a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/step_duration_panel.tsx
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/step_duration_panel.tsx
@@ -74,6 +74,7 @@ export const StepDurationPanel = ({
         reportType={ReportTypes.KPI}
         legendPosition={legendPosition}
         legendIsVisible={doBreakdown}
+        skipLoadingWrapper={true}
         attributes={[
           {
             time,

From 0ba1d538e556aa82edeaf10d60d66d8d2b972a01 Mon Sep 17 00:00:00 2001
From: Justin Kambic <jk@elastic.co>
Date: Fri, 28 Apr 2023 14:16:48 -0400
Subject: [PATCH 3/6] Skip loading wrapper for history embeddable components.

---
 .../monitor_details/monitor_summary/monitor_complete_count.tsx   | 1 +
 .../monitor_summary/monitor_complete_sparklines.tsx              | 1 +
 .../monitor_details/monitor_summary/monitor_total_runs_count.tsx | 1 +
 3 files changed, 3 insertions(+)

diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_complete_count.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_complete_count.tsx
index 5bff2b1a219a2..4ed382bad17df 100644
--- a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_complete_count.tsx
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_complete_count.tsx
@@ -35,6 +35,7 @@ export const MonitorCompleteCount = (props: MonitorCompleteCountProps) => {
       id="monitorCompleteCount"
       align="left"
       reportType={ReportTypes.SINGLE_METRIC}
+      skipLoadingWrapper={true}
       attributes={[
         {
           time: props,
diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_complete_sparklines.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_complete_sparklines.tsx
index 0027c77f03c9b..18a28846a2ec7 100644
--- a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_complete_sparklines.tsx
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_complete_sparklines.tsx
@@ -38,6 +38,7 @@ export const MonitorCompleteSparklines = (props: Props) => {
       axisTitlesVisibility={{ x: false, yRight: false, yLeft: false }}
       legendIsVisible={false}
       hideTicks={true}
+      skipLoadingWrapper={true}
       attributes={[
         {
           seriesType: 'area',
diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_total_runs_count.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_total_runs_count.tsx
index 6e4e9f0c3d70d..b41faabcb85a6 100644
--- a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_total_runs_count.tsx
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_total_runs_count.tsx
@@ -35,6 +35,7 @@ export const MonitorTotalRunsCount = (props: MonitorTotalRunsCountProps) => {
       id="monitorTotalRunsCount"
       align="left"
       reportType={ReportTypes.SINGLE_METRIC}
+      skipLoadingWrapper={true}
       attributes={[
         {
           time: props,

From 043fd578ac737a9ed8712533175bbeb9aed68163 Mon Sep 17 00:00:00 2001
From: Justin Kambic <jk@elastic.co>
Date: Fri, 28 Apr 2023 14:59:11 -0400
Subject: [PATCH 4/6] Skip loading wrapper for error details page embeddables.

---
 .../components/monitor_details/monitor_errors/failed_tests.tsx   | 1 +
 .../monitor_details/monitor_errors/failed_tests_count.tsx        | 1 +
 2 files changed, 2 insertions(+)

diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_errors/failed_tests.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_errors/failed_tests.tsx
index 9b27d72a20ca0..e02cb1767205f 100644
--- a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_errors/failed_tests.tsx
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_errors/failed_tests.tsx
@@ -43,6 +43,7 @@ export const MonitorFailedTests = ({
         reportType="heatmap"
         axisTitlesVisibility={{ x: false, yRight: false, yLeft: false }}
         legendIsVisible={false}
+        skipLoadingWrapper={true}
         attributes={[
           {
             time,
diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_errors/failed_tests_count.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_errors/failed_tests_count.tsx
index e525630b8b3d8..7a33717c1b0c0 100644
--- a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_errors/failed_tests_count.tsx
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_errors/failed_tests_count.tsx
@@ -29,6 +29,7 @@ export const FailedTestsCount = ({ from, to, id }: { to: string; from: string; i
     <ExploratoryViewEmbeddable
       id={id}
       reportType="single-metric"
+      skipLoadingWrapper={true}
       attributes={[
         {
           time: { from, to },

From 177d57001e5239d2fb35ef2afa26c9839cb7e13b Mon Sep 17 00:00:00 2001
From: shahzad31 <shahzad31comp@gmail.com>
Date: Sat, 29 Apr 2023 14:37:44 +0200
Subject: [PATCH 5/6] update logic

---
 .../shared/exploratory_view/embeddable/embeddable.tsx      | 1 -
 .../shared/exploratory_view/embeddable/index.tsx           | 7 +------
 .../exploratory_view/embeddable/use_app_data_view.ts       | 2 +-
 .../monitor_details/monitor_errors/failed_tests.tsx        | 1 -
 .../monitor_details/monitor_errors/failed_tests_count.tsx  | 1 -
 .../monitor_details/monitor_summary/availability_panel.tsx | 1 -
 .../monitor_summary/availability_sparklines.tsx            | 1 -
 .../monitor_details/monitor_summary/duration_panel.tsx     | 1 -
 .../monitor_summary/duration_sparklines.tsx                | 1 -
 .../monitor_details/monitor_summary/duration_trend.tsx     | 1 -
 .../monitor_details/monitor_summary/monitor_alerts.tsx     | 1 -
 .../monitor_summary/monitor_complete_count.tsx             | 1 -
 .../monitor_summary/monitor_complete_sparklines.tsx        | 1 -
 .../monitor_summary/monitor_error_sparklines.tsx           | 1 -
 .../monitor_summary/monitor_errors_count.tsx               | 1 -
 .../monitor_summary/monitor_total_runs_count.tsx           | 1 -
 .../monitor_summary/step_duration_panel.tsx                | 1 -
 17 files changed, 2 insertions(+), 22 deletions(-)

diff --git a/x-pack/plugins/exploratory_view/public/components/shared/exploratory_view/embeddable/embeddable.tsx b/x-pack/plugins/exploratory_view/public/components/shared/exploratory_view/embeddable/embeddable.tsx
index 3330c16fa99cb..4642e7fbec524 100644
--- a/x-pack/plugins/exploratory_view/public/components/shared/exploratory_view/embeddable/embeddable.tsx
+++ b/x-pack/plugins/exploratory_view/public/components/shared/exploratory_view/embeddable/embeddable.tsx
@@ -62,7 +62,6 @@ export interface ExploratoryEmbeddableProps {
   lineHeight?: number;
   dataTestSubj?: string;
   searchSessionId?: string;
-  skipLoadingWrapper?: boolean;
 }
 
 export interface ExploratoryEmbeddableComponentProps extends ExploratoryEmbeddableProps {
diff --git a/x-pack/plugins/exploratory_view/public/components/shared/exploratory_view/embeddable/index.tsx b/x-pack/plugins/exploratory_view/public/components/shared/exploratory_view/embeddable/index.tsx
index 8235bc11c01ff..aa07c2c2d3551 100644
--- a/x-pack/plugins/exploratory_view/public/components/shared/exploratory_view/embeddable/index.tsx
+++ b/x-pack/plugins/exploratory_view/public/components/shared/exploratory_view/embeddable/index.tsx
@@ -117,12 +117,7 @@ export function getExploratoryViewEmbeddable(
       return newProps;
     }, [loadCount, props, series.time]);
 
-    if (
-      Object.keys(dataViews).length === 0 ||
-      (loading && !props.skipLoadingWrapper) ||
-      !lensHelper ||
-      lensLoading
-    ) {
+    if (Object.keys(dataViews).length === 0 || loading || !lensHelper || lensLoading) {
       return (
         <LoadingWrapper customHeight={customHeight}>
           <EuiLoadingSpinner size="l" />
diff --git a/x-pack/plugins/exploratory_view/public/components/shared/exploratory_view/embeddable/use_app_data_view.ts b/x-pack/plugins/exploratory_view/public/components/shared/exploratory_view/embeddable/use_app_data_view.ts
index ab1ca8827c58a..0852c98bb3dc9 100644
--- a/x-pack/plugins/exploratory_view/public/components/shared/exploratory_view/embeddable/use_app_data_view.ts
+++ b/x-pack/plugins/exploratory_view/public/components/shared/exploratory_view/embeddable/use_app_data_view.ts
@@ -48,5 +48,5 @@ export const useAppDataView = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [dataViewTitle, seriesDataType, JSON.stringify(series)]);
 
-  return { dataViews, loading };
+  return { dataViews, loading: loading && !dataViews[seriesDataType] };
 };
diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_errors/failed_tests.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_errors/failed_tests.tsx
index e02cb1767205f..9b27d72a20ca0 100644
--- a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_errors/failed_tests.tsx
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_errors/failed_tests.tsx
@@ -43,7 +43,6 @@ export const MonitorFailedTests = ({
         reportType="heatmap"
         axisTitlesVisibility={{ x: false, yRight: false, yLeft: false }}
         legendIsVisible={false}
-        skipLoadingWrapper={true}
         attributes={[
           {
             time,
diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_errors/failed_tests_count.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_errors/failed_tests_count.tsx
index 7a33717c1b0c0..e525630b8b3d8 100644
--- a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_errors/failed_tests_count.tsx
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_errors/failed_tests_count.tsx
@@ -29,7 +29,6 @@ export const FailedTestsCount = ({ from, to, id }: { to: string; from: string; i
     <ExploratoryViewEmbeddable
       id={id}
       reportType="single-metric"
-      skipLoadingWrapper={true}
       attributes={[
         {
           time: { from, to },
diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/availability_panel.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/availability_panel.tsx
index f035915ac30a3..413012edb658d 100644
--- a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/availability_panel.tsx
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/availability_panel.tsx
@@ -39,7 +39,6 @@ export const AvailabilityPanel = (props: AvailabilityPanelprops) => {
       align="left"
       customHeight="70px"
       reportType={ReportTypes.SINGLE_METRIC}
-      skipLoadingWrapper={true}
       attributes={[
         {
           time: props,
diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/availability_sparklines.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/availability_sparklines.tsx
index e099b29d0f1d5..da6881dee4328 100644
--- a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/availability_sparklines.tsx
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/availability_sparklines.tsx
@@ -44,7 +44,6 @@ export const AvailabilitySparklines = (props: AvailabilitySparklinesProps) => {
       axisTitlesVisibility={{ x: false, yRight: false, yLeft: false }}
       legendIsVisible={false}
       hideTicks={true}
-      skipLoadingWrapper={true}
       attributes={[
         {
           seriesType: 'area',
diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/duration_panel.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/duration_panel.tsx
index 194d4e2f9f4ab..7ca1d1e003cc4 100644
--- a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/duration_panel.tsx
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/duration_panel.tsx
@@ -39,7 +39,6 @@ export const DurationPanel = (props: DurationPanelProps) => {
       align="left"
       customHeight="70px"
       reportType={ReportTypes.SINGLE_METRIC}
-      skipLoadingWrapper={true}
       attributes={[
         {
           time: props,
diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/duration_sparklines.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/duration_sparklines.tsx
index 59672e84a9c6e..5851d1c47cdf5 100644
--- a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/duration_sparklines.tsx
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/duration_sparklines.tsx
@@ -43,7 +43,6 @@ export const DurationSparklines = (props: DurationSparklinesProps) => {
         axisTitlesVisibility={{ x: false, yRight: false, yLeft: false }}
         legendIsVisible={false}
         hideTicks={true}
-        skipLoadingWrapper={true}
         attributes={[
           {
             seriesType: 'area',
diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/duration_trend.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/duration_trend.tsx
index 54f4d31473ece..b25f29a2a3b83 100644
--- a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/duration_trend.tsx
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/duration_trend.tsx
@@ -34,7 +34,6 @@ export const MonitorDurationTrend = (props: MonitorDurationTrendProps) => {
       id="monitorDurationTrend"
       customHeight="240px"
       reportType="kpi-over-time"
-      skipLoadingWrapper={true}
       attributes={Object.keys(metricsToShow).map((metric) => ({
         dataType: 'synthetics',
         time: props,
diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_alerts.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_alerts.tsx
index 0b9d9cbc07df7..32bf92011ec96 100644
--- a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_alerts.tsx
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_alerts.tsx
@@ -60,7 +60,6 @@ export const MonitorAlerts = ({
                   withActions={false}
                   customHeight={'27px'}
                   reportType="single-metric"
-                  skipLoadingWrapper={true}
                   attributes={[
                     {
                       dataType: 'alerts',
diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_complete_count.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_complete_count.tsx
index 4ed382bad17df..5bff2b1a219a2 100644
--- a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_complete_count.tsx
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_complete_count.tsx
@@ -35,7 +35,6 @@ export const MonitorCompleteCount = (props: MonitorCompleteCountProps) => {
       id="monitorCompleteCount"
       align="left"
       reportType={ReportTypes.SINGLE_METRIC}
-      skipLoadingWrapper={true}
       attributes={[
         {
           time: props,
diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_complete_sparklines.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_complete_sparklines.tsx
index 18a28846a2ec7..0027c77f03c9b 100644
--- a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_complete_sparklines.tsx
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_complete_sparklines.tsx
@@ -38,7 +38,6 @@ export const MonitorCompleteSparklines = (props: Props) => {
       axisTitlesVisibility={{ x: false, yRight: false, yLeft: false }}
       legendIsVisible={false}
       hideTicks={true}
-      skipLoadingWrapper={true}
       attributes={[
         {
           seriesType: 'area',
diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_error_sparklines.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_error_sparklines.tsx
index b8e059b2363f4..f7a0d5b316af1 100644
--- a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_error_sparklines.tsx
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_error_sparklines.tsx
@@ -40,7 +40,6 @@ export const MonitorErrorSparklines = ({ from, to, monitorId, id }: Props) => {
       axisTitlesVisibility={{ x: false, yRight: false, yLeft: false }}
       legendIsVisible={false}
       hideTicks={true}
-      skipLoadingWrapper={true}
       attributes={[
         {
           time,
diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_errors_count.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_errors_count.tsx
index f60bfb4e3a5d7..f8d7bc3c2f0ac 100644
--- a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_errors_count.tsx
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_errors_count.tsx
@@ -38,7 +38,6 @@ export const MonitorErrorsCount = ({ monitorId, from, to, id }: MonitorErrorsCou
       align="left"
       customHeight="70px"
       reportType={ReportTypes.SINGLE_METRIC}
-      skipLoadingWrapper={true}
       attributes={[
         {
           time,
diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_total_runs_count.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_total_runs_count.tsx
index b41faabcb85a6..6e4e9f0c3d70d 100644
--- a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_total_runs_count.tsx
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_total_runs_count.tsx
@@ -35,7 +35,6 @@ export const MonitorTotalRunsCount = (props: MonitorTotalRunsCountProps) => {
       id="monitorTotalRunsCount"
       align="left"
       reportType={ReportTypes.SINGLE_METRIC}
-      skipLoadingWrapper={true}
       attributes={[
         {
           time: props,
diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/step_duration_panel.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/step_duration_panel.tsx
index e7efdc1b4195f..a8bd0d9a23b6c 100644
--- a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/step_duration_panel.tsx
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/step_duration_panel.tsx
@@ -74,7 +74,6 @@ export const StepDurationPanel = ({
         reportType={ReportTypes.KPI}
         legendPosition={legendPosition}
         legendIsVisible={doBreakdown}
-        skipLoadingWrapper={true}
         attributes={[
           {
             time,

From 179d7cd7ee8504f1dccead70e3316fd2f7fc8da3 Mon Sep 17 00:00:00 2001
From: Shahzad <shahzad31comp@gmail.com>
Date: Mon, 1 May 2023 14:00:41 +0200
Subject: [PATCH 6/6] Update monitor_alerts.tsx

---
 .../monitor_details/monitor_summary/monitor_alerts.tsx        | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_alerts.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_alerts.tsx
index 32bf92011ec96..edd41cf80db32 100644
--- a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_alerts.tsx
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_alerts.tsx
@@ -104,7 +104,6 @@ export const MonitorAlerts = ({
             dataTestSubj="monitorActiveAlertsCount"
             customHeight={'120px'}
             reportType="single-metric"
-            skipLoadingWrapper={true}
             attributes={[
               {
                 dataType: 'alerts',
@@ -136,7 +135,6 @@ export const MonitorAlerts = ({
             sparklineMode
             customHeight="100px"
             reportType="kpi-over-time"
-            skipLoadingWrapper={true}
             attributes={[
               {
                 seriesType: 'area',
@@ -169,7 +167,6 @@ export const MonitorAlerts = ({
           <ExploratoryViewEmbeddable
             customHeight={'120px'}
             reportType="single-metric"
-            skipLoadingWrapper={true}
             attributes={[
               {
                 dataType: 'alerts',
@@ -201,7 +198,6 @@ export const MonitorAlerts = ({
             sparklineMode
             customHeight="100px"
             reportType="kpi-over-time"
-            skipLoadingWrapper={true}
             attributes={[
               {
                 seriesType: 'area',