From df971b7dc90b844c83d561faaa57730d8e9810d5 Mon Sep 17 00:00:00 2001
From: Shahzad <shahzad.muhammad@elastic.co>
Date: Tue, 12 Oct 2021 16:46:23 +0200
Subject: [PATCH] [Exploratory view] Render content only on expand (#114237)

---
 .../shared/exploratory_view/series_editor/series.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/x-pack/plugins/observability/public/components/shared/exploratory_view/series_editor/series.tsx b/x-pack/plugins/observability/public/components/shared/exploratory_view/series_editor/series.tsx
index 11f96afe7cea..d320b84c6a68 100644
--- a/x-pack/plugins/observability/public/components/shared/exploratory_view/series_editor/series.tsx
+++ b/x-pack/plugins/observability/public/components/shared/exploratory_view/series_editor/series.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { i18n } from '@kbn/i18n';
 import { EuiFlexItem, EuiFlexGroup, EuiPanel, EuiAccordion, EuiSpacer } from '@elastic/eui';
@@ -47,6 +47,14 @@ export function Series({ item, isExpanded, toggleExpanded }: Props) {
     seriesId: id,
   };
 
+  const [isExapndedOnce, setIsExapndedOnce] = useState(false);
+
+  useEffect(() => {
+    if (isExpanded) {
+      setIsExapndedOnce(true);
+    }
+  }, [isExpanded]);
+
   return (
     <EuiPanel hasBorder={true} data-test-subj={`exploratoryViewSeriesPanel${0}`}>
       <StyledAccordion
@@ -91,7 +99,7 @@ export function Series({ item, isExpanded, toggleExpanded }: Props) {
       >
         <EuiSpacer size="s" />
         <EuiPanel color="subdued">
-          <ExpandedSeriesRow {...seriesProps} />
+          {isExapndedOnce && <ExpandedSeriesRow {...seriesProps} />}
         </EuiPanel>
       </StyledAccordion>
     </EuiPanel>