[ML] add marker body (#104672) (#104724)

Co-authored-by: Dima Arnautov <dmitrii.arnautov@elastic.co>

Author: kibanamachine

x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/event_rate_chart/overlay_range.tsx

@@ -9,6 +9,7 @@ import React, { FC } from 'react';
 import { EuiIcon } from '@elastic/eui';
 import { RectAnnotation, LineAnnotation, AnnotationDomainType, Position } from '@elastic/charts';
 import { timeFormatter } from '../../../../../../../../common/util/date_utils';
+import { useCurrentEuiTheme } from '../../../../../../components/color_range_legend';
 
 interface Props {
   overlayKey: number;
@@ -19,12 +20,14 @@ interface Props {
 }
 
 export const OverlayRange: FC<Props> = ({ overlayKey, start, end, color, showMarker = true }) => {
+  const { euiTheme } = useCurrentEuiTheme();
+
   return (
     <>
       <RectAnnotation
         id={`rect_annotation_${overlayKey}`}
         zIndex={1}
-        hideTooltips={true}
+        hideTooltips
         dataValues={[
           {
             coordinates: {
@@ -50,14 +53,12 @@ export const OverlayRange: FC<Props> = ({ overlayKey, start, end, color, showMar
           },
         }}
         markerPosition={Position.Bottom}
-        hideTooltips={true}
-        marker={
+        hideTooltips
+        marker={showMarker ? <EuiIcon type="arrowUp" /> : undefined}
+        markerBody={
           showMarker ? (
-            <div>
-              <div style={{ textAlign: 'center' }}>
-                <EuiIcon type="arrowUp" />
-              </div>
-              <div style={{ fontWeight: 'normal', color: '#343741' }}>{timeFormatter(start)}</div>
+            <div style={{ fontWeight: 'normal', color: euiTheme.euiTextColor }}>
+              {timeFormatter(start)}
             </div>
           ) : undefined
         }

x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/loading_wrapper/loading_wrapper.tsx

@@ -26,7 +26,7 @@ export const LoadingWrapper: FC<Props> = ({ hasData, loading = false, height, ch
           transition: 'opacity 0.2s',
         }}
       >
-        {children}
+        {loading && !hasData ? null : children}
       </div>
       {loading === true && (
         <EuiFlexGroup