Add loading spinner

elastic · Sep 28, 2020 · cdd8752 · cdd8752
1 parent 218dd34
commit cdd8752
Showing 1 changed file with 12 additions and 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
@@ -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>