diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/charts/__tests__/__snapshots__/chart_wrapper.test.tsx.snap b/x-pack/legacy/plugins/uptime/public/components/functional/charts/__tests__/__snapshots__/chart_wrapper.test.tsx.snap
new file mode 100644
index 0000000000000..3f3e6b0b929e1
--- /dev/null
+++ b/x-pack/legacy/plugins/uptime/public/components/functional/charts/__tests__/__snapshots__/chart_wrapper.test.tsx.snap
@@ -0,0 +1,280 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ChartWrapper component renders the component with loading false 1`] = `
+<Fragment>
+  <div
+    intl={
+      Object {
+        "defaultFormats": Object {},
+        "defaultLocale": "en",
+        "formatDate": [Function],
+        "formatHTMLMessage": [Function],
+        "formatMessage": [Function],
+        "formatNumber": [Function],
+        "formatPlural": [Function],
+        "formatRelative": [Function],
+        "formatTime": [Function],
+        "formats": Object {
+          "date": Object {
+            "full": Object {
+              "day": "numeric",
+              "month": "long",
+              "weekday": "long",
+              "year": "numeric",
+            },
+            "long": Object {
+              "day": "numeric",
+              "month": "long",
+              "year": "numeric",
+            },
+            "medium": Object {
+              "day": "numeric",
+              "month": "short",
+              "year": "numeric",
+            },
+            "short": Object {
+              "day": "numeric",
+              "month": "numeric",
+              "year": "2-digit",
+            },
+          },
+          "number": Object {
+            "currency": Object {
+              "style": "currency",
+            },
+            "percent": Object {
+              "style": "percent",
+            },
+          },
+          "relative": Object {
+            "days": Object {
+              "units": "day",
+            },
+            "hours": Object {
+              "units": "hour",
+            },
+            "minutes": Object {
+              "units": "minute",
+            },
+            "months": Object {
+              "units": "month",
+            },
+            "seconds": Object {
+              "units": "second",
+            },
+            "years": Object {
+              "units": "year",
+            },
+          },
+          "time": Object {
+            "full": Object {
+              "hour": "numeric",
+              "minute": "numeric",
+              "second": "numeric",
+              "timeZoneName": "short",
+            },
+            "long": Object {
+              "hour": "numeric",
+              "minute": "numeric",
+              "second": "numeric",
+              "timeZoneName": "short",
+            },
+            "medium": Object {
+              "hour": "numeric",
+              "minute": "numeric",
+              "second": "numeric",
+            },
+            "short": Object {
+              "hour": "numeric",
+              "minute": "numeric",
+            },
+          },
+        },
+        "formatters": Object {
+          "getDateTimeFormat": [Function],
+          "getMessageFormat": [Function],
+          "getNumberFormat": [Function],
+          "getPluralFormat": [Function],
+          "getRelativeFormat": [Function],
+        },
+        "locale": "en",
+        "messages": Object {},
+        "now": [Function],
+        "onError": [Function],
+        "textComponent": Symbol(react.fragment),
+        "timeZone": null,
+      }
+    }
+    style={
+      Object {
+        "height": "100%",
+        "opacity": 1,
+        "transition": "opacity 0.2s",
+      }
+    }
+  >
+    <SnapshotHeading
+      down={8}
+      total={12}
+    />
+    <EuiSpacer
+      size="xs"
+    />
+    <DonutChart
+      down={8}
+      height={144}
+      up={4}
+      width={144}
+    />
+  </div>
+</Fragment>
+`;
+
+exports[`ChartWrapper component renders the component with loading true 1`] = `
+<Fragment>
+  <div
+    intl={
+      Object {
+        "defaultFormats": Object {},
+        "defaultLocale": "en",
+        "formatDate": [Function],
+        "formatHTMLMessage": [Function],
+        "formatMessage": [Function],
+        "formatNumber": [Function],
+        "formatPlural": [Function],
+        "formatRelative": [Function],
+        "formatTime": [Function],
+        "formats": Object {
+          "date": Object {
+            "full": Object {
+              "day": "numeric",
+              "month": "long",
+              "weekday": "long",
+              "year": "numeric",
+            },
+            "long": Object {
+              "day": "numeric",
+              "month": "long",
+              "year": "numeric",
+            },
+            "medium": Object {
+              "day": "numeric",
+              "month": "short",
+              "year": "numeric",
+            },
+            "short": Object {
+              "day": "numeric",
+              "month": "numeric",
+              "year": "2-digit",
+            },
+          },
+          "number": Object {
+            "currency": Object {
+              "style": "currency",
+            },
+            "percent": Object {
+              "style": "percent",
+            },
+          },
+          "relative": Object {
+            "days": Object {
+              "units": "day",
+            },
+            "hours": Object {
+              "units": "hour",
+            },
+            "minutes": Object {
+              "units": "minute",
+            },
+            "months": Object {
+              "units": "month",
+            },
+            "seconds": Object {
+              "units": "second",
+            },
+            "years": Object {
+              "units": "year",
+            },
+          },
+          "time": Object {
+            "full": Object {
+              "hour": "numeric",
+              "minute": "numeric",
+              "second": "numeric",
+              "timeZoneName": "short",
+            },
+            "long": Object {
+              "hour": "numeric",
+              "minute": "numeric",
+              "second": "numeric",
+              "timeZoneName": "short",
+            },
+            "medium": Object {
+              "hour": "numeric",
+              "minute": "numeric",
+              "second": "numeric",
+            },
+            "short": Object {
+              "hour": "numeric",
+              "minute": "numeric",
+            },
+          },
+        },
+        "formatters": Object {
+          "getDateTimeFormat": [Function],
+          "getMessageFormat": [Function],
+          "getNumberFormat": [Function],
+          "getPluralFormat": [Function],
+          "getRelativeFormat": [Function],
+        },
+        "locale": "en",
+        "messages": Object {},
+        "now": [Function],
+        "onError": [Function],
+        "textComponent": Symbol(react.fragment),
+        "timeZone": null,
+      }
+    }
+    style={
+      Object {
+        "height": "100%",
+        "opacity": 0.3,
+        "transition": "opacity 0.2s",
+      }
+    }
+  >
+    <SnapshotHeading
+      down={8}
+      total={12}
+    />
+    <EuiSpacer
+      size="xs"
+    />
+    <DonutChart
+      down={8}
+      height={144}
+      up={4}
+      width={144}
+    />
+  </div>
+  <EuiFlexGroup
+    alignItems="center"
+    justifyContent="spaceAround"
+    style={
+      Object {
+        "height": "100%",
+        "marginBottom": 0,
+        "marginTop": "-100%",
+      }
+    }
+  >
+    <EuiFlexItem
+      grow={false}
+    >
+      <EuiLoadingChart
+        size="xl"
+      />
+    </EuiFlexItem>
+  </EuiFlexGroup>
+</Fragment>
+`;
diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/charts/__tests__/chart_wrapper.test.tsx b/x-pack/legacy/plugins/uptime/public/components/functional/charts/__tests__/chart_wrapper.test.tsx
new file mode 100644
index 0000000000000..43e6b80d5c840
--- /dev/null
+++ b/x-pack/legacy/plugins/uptime/public/components/functional/charts/__tests__/chart_wrapper.test.tsx
@@ -0,0 +1,83 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { EuiSpacer } from '@elastic/eui';
+import { mount } from 'enzyme';
+import { nextTick } from 'test_utils/enzyme_helpers';
+import { shallowWithIntl } from 'test_utils/enzyme_helpers';
+import { ChartWrapper } from '../chart_wrapper';
+import { SnapshotHeading } from '../../snapshot_heading';
+import { DonutChart } from '../donut_chart';
+const SNAPSHOT_CHART_WIDTH = 144;
+const SNAPSHOT_CHART_HEIGHT = 144;
+describe('ChartWrapper component', () => {
+  it('renders the component with loading false', () => {
+    const component = shallowWithIntl(
+      <ChartWrapper loading={false}>
+        <SnapshotHeading down={8} total={12} />
+        <EuiSpacer size="xs" />
+        <DonutChart up={4} down={8} height={SNAPSHOT_CHART_HEIGHT} width={SNAPSHOT_CHART_WIDTH} />
+      </ChartWrapper>
+    );
+    expect(component).toMatchSnapshot();
+  });
+
+  it('renders the component with loading true', () => {
+    const component = shallowWithIntl(
+      <ChartWrapper loading={true}>
+        <SnapshotHeading down={8} total={12} />
+        <EuiSpacer size="xs" />
+        <DonutChart up={4} down={8} height={SNAPSHOT_CHART_HEIGHT} width={SNAPSHOT_CHART_WIDTH} />
+      </ChartWrapper>
+    );
+    expect(component).toMatchSnapshot();
+  });
+
+  it('mounts the component with loading true or false', async () => {
+    const component = mount(
+      <ChartWrapper loading={true}>
+        <SnapshotHeading down={8} total={12} />
+        <EuiSpacer size="xs" />
+        <DonutChart up={4} down={8} height={SNAPSHOT_CHART_HEIGHT} width={SNAPSHOT_CHART_WIDTH} />
+      </ChartWrapper>
+    );
+
+    let loadingChart = component.find(`.euiLoadingChart`);
+    expect(loadingChart.length).toBe(1);
+
+    component.setProps({
+      loading: false,
+    });
+    await nextTick();
+    component.update();
+
+    loadingChart = component.find(`.euiLoadingChart`);
+    expect(loadingChart.length).toBe(0);
+  });
+
+  it('mounts the component with chart when loading true or false', async () => {
+    const component = mount(
+      <ChartWrapper loading={true}>
+        <SnapshotHeading down={8} total={12} />
+        <EuiSpacer size="xs" />
+        <DonutChart up={4} down={8} height={SNAPSHOT_CHART_HEIGHT} width={SNAPSHOT_CHART_WIDTH} />
+      </ChartWrapper>
+    );
+
+    let donutChart = component.find(DonutChart);
+    expect(donutChart.length).toBe(1);
+
+    component.setProps({
+      loading: false,
+    });
+    await nextTick();
+    component.update();
+
+    donutChart = component.find(DonutChart);
+    expect(donutChart.length).toBe(1);
+  });
+});