[Exploratory view] Render content only on expand (#114237)

elastic · Oct 12, 2021 · df971b7 · df971b7
1 parent 0b46bb1
commit df971b7
Showing 1 changed file with 10 additions and 2 deletions.
diff --git a/.../plugins/observability/public/components/shared/exploratory_view/series_editor/series.tsx b/.../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>