message: add in loading page for the service graph
diff: import * as React from 'react';
  import { ReactCytoscape } from 'react-cytoscape';
  +import { Spinner } from 'patternfly-react';
  import PropTypes from 'prop-types';
  import * as API from '../../services/Api';
  @@ -8,6 +9,7 @@ import { refreshSettings } from '../../model/RefreshSettings';
  type CytoscapeLayoutState = {
  elements?: any;
  + isLoading: boolean;
  };
  type CytoscapeLayoutProps = {
  @@ -30,7 +32,8 @@ export default class CytoscapeLayout extends React.Component<CytoscapeLayoutProp
  console.log('Starting ServiceGraphPage for namespace ' + this.props.namespace);
  this.state = {
  - elements: {}
  + elements: [],
  + isLoading: false
  };
  this.updateGraphElements = this.updateGraphElements.bind(this);
  }
  @@ -129,6 +132,7 @@ export default class CytoscapeLayout extends React.Component<CytoscapeLayoutProp
  render() {
  return (
  <div id="cytoscape-container" style={{ marginRight: '25em' }}>
  + <Spinner loading={this.state.isLoading}>
  <ReactCytoscape
  containerID="cy"
  cyRef={cy => {
  @@ -139,20 +143,25 @@ export default class CytoscapeLayout extends React.Component<CytoscapeLayoutProp
  cytoscapeOptions={GraphStyles.options()}
  layout={this.props.layout}
  />
  + </Spinner>
  </div>
  );
  }
  updateGraphElements(props: any) {
  let params = { interval: props.interval };
  + this.setState({ isLoading: true });
  API.GetGraphElements(props.namespace, params)
  .then(response => {
  const elements =
  response['data'] && response['data'].elements ? response['data'].elements : { nodes: [], edges: [] };
  - this.setState({ elements: elements });
  + this.setState({ elements: elements, isLoading: false });
  })
  .catch(error => {
  - this.setState({});
  + this.setState({
  + elements: [],
  + isLoading: false
  + });
  console.error(error);
  });
  }
  