From 44d01cdc11af5a4cb2944d3489c7c64163e535d1 Mon Sep 17 00:00:00 2001
From: Shahzad <shahzad31comp@gmail.com>
Date: Thu, 10 Sep 2020 17:56:17 +0200
Subject: [PATCH] Added loading state to visitor breakdown pie charts

---
 .../RumDashboard/Charts/VisitorBreakdownChart.tsx    |  5 +++--
 .../app/RumDashboard/VisitorBreakdown/index.tsx      | 12 +++++++++---
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/Charts/VisitorBreakdownChart.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/Charts/VisitorBreakdownChart.tsx
index 213126ba4bf81..34fcf62178711 100644
--- a/x-pack/plugins/apm/public/components/app/RumDashboard/Charts/VisitorBreakdownChart.tsx
+++ b/x-pack/plugins/apm/public/components/app/RumDashboard/Charts/VisitorBreakdownChart.tsx
@@ -31,9 +31,10 @@ interface Props {
     count: number;
     name: string;
   }>;
+  loading: boolean;
 }
 
-export function VisitorBreakdownChart({ options }: Props) {
+export function VisitorBreakdownChart({ loading, options }: Props) {
   const [darkMode] = useUiSetting$<boolean>('theme:darkMode');
 
   const euiChartTheme = darkMode
@@ -41,7 +42,7 @@ export function VisitorBreakdownChart({ options }: Props) {
     : EUI_CHARTS_THEME_LIGHT;
 
   return (
-    <ChartWrapper loading={false} height="230px" maxWidth="430px">
+    <ChartWrapper loading={loading} height="230px" maxWidth="430px">
       <StyleChart>
         <Chart>
           <Settings
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/VisitorBreakdown/index.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/VisitorBreakdown/index.tsx
index e18875f32ff72..245f58370d3d7 100644
--- a/x-pack/plugins/apm/public/components/app/RumDashboard/VisitorBreakdown/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/RumDashboard/VisitorBreakdown/index.tsx
@@ -16,7 +16,7 @@ export function VisitorBreakdown() {
 
   const { start, end } = urlParams;
 
-  const { data } = useFetcher(
+  const { data, status } = useFetcher(
     (callApmApi) => {
       if (start && end) {
         return callApmApi({
@@ -47,14 +47,20 @@ export function VisitorBreakdown() {
             <h4>{I18LABELS.browser}</h4>
           </EuiTitle>
           <EuiSpacer size="s" />
-          <VisitorBreakdownChart options={data?.browsers} />
+          <VisitorBreakdownChart
+            options={data?.browsers}
+            loading={status !== 'success'}
+          />
         </EuiFlexItem>
         <EuiFlexItem>
           <EuiTitle size="xs">
             <h4>{I18LABELS.operatingSystem}</h4>
           </EuiTitle>
           <EuiSpacer size="s" />
-          <VisitorBreakdownChart options={data?.os} />
+          <VisitorBreakdownChart
+            options={data?.os}
+            loading={status !== 'success'}
+          />
         </EuiFlexItem>
       </EuiFlexGroup>
     </>