From cdd8752eb507f34c4318ece6c14ccd71b5ecabc5 Mon Sep 17 00:00:00 2001
From: Nathan L Smith <smith@nlsmith.com>
Date: Mon, 28 Sep 2020 12:24:22 -0500
Subject: [PATCH] Add loading spinner

---
 .../apm/public/components/app/ServiceMap/index.tsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/x-pack/plugins/apm/public/components/app/ServiceMap/index.tsx b/x-pack/plugins/apm/public/components/app/ServiceMap/index.tsx
index ce70db486d4d..1d2e4ada43ad 100644
--- a/x-pack/plugins/apm/public/components/app/ServiceMap/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/ServiceMap/index.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiLoadingSpinner } from '@elastic/eui';
 import React, { ReactNode } from 'react';
 import { useTrackPageview } from '../../../../../observability/public';
 import {
@@ -47,6 +47,15 @@ function PromptContainer({ children }: { children: ReactNode }) {
   );
 }
 
+function LoadingSpinner() {
+  return (
+    <EuiLoadingSpinner
+      size="xl"
+      style={{ position: 'absolute', top: '50%', left: '50%' }}
+    />
+  );
+}
+
 export function ServiceMap({ serviceName }: ServiceMapProps) {
   const theme = useTheme();
   const license = useLicense();
@@ -109,13 +118,14 @@ export function ServiceMap({ serviceName }: ServiceMapProps) {
       ref={ref}
     >
       <Cytoscape
-        elements={data?.elements ?? []}
+        elements={data.elements}
         height={height}
         serviceName={serviceName}
         style={getCytoscapeDivStyle(theme)}
       >
         <Controls />
         {serviceName && <EmptyBanner />}
+        {status === FETCH_STATUS.LOADING && <LoadingSpinner />}
         <Popover focusedServiceName={serviceName} />
       </Cytoscape>
     </div>