[RUM Dashboard] Added loading state to visitor breakdown pie charts (#…

…77201) Co-authored-by: Elastic Machine <[email protected]>
elastic · Sep 14, 2020 · 6bef440 · 6bef440
1 parent 0fb4895
commit 6bef440
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 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
@@ -31,17 +31,18 @@ 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
     ? EUI_CHARTS_THEME_DARK
     : 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
@@ -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>
     </>