From 8c69c3d551c58c2eb478e510c6c9b0cccdfde59e Mon Sep 17 00:00:00 2001
From: Magnus Jacobsson <Magnus.Jacobsson@berotec.se>
Date: Tue, 18 Sep 2018 19:04:35 +0200
Subject: [PATCH 1/2] Refactor: Renamed prevState argument to state

The purpose of using an updater function is to get the latest,
up-to-date version of the state, which accessing this.state might not
give. Using the name prevState for something that might actually be
the next upcoming state may lead thinking astray.
---
 src/pages/index.js | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/pages/index.js b/src/pages/index.js
index 18880e3d..0f96065c 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -249,54 +249,54 @@ class Index extends React.Component {
   }
 
   handleNodeStyleChange = (style) => {
-    this.setPersistentState(prevState => ({
+    this.setPersistentState(state => ({
       defaultNodeAttributes: {
-          ...prevState.defaultNodeAttributes,
+          ...state.defaultNodeAttributes,
         style: style,
       },
     }));
   }
 
   handleNodeColorChange = (color) => {
-    this.setPersistentState(prevState => ({
+    this.setPersistentState(state => ({
       defaultNodeAttributes: {
-          ...prevState.defaultNodeAttributes,
+          ...state.defaultNodeAttributes,
         color: color,
       },
     }));
   }
 
   handleNodeFillColorChange = (color) => {
-    this.setPersistentState(prevState => ({
+    this.setPersistentState(state => ({
       defaultNodeAttributes: {
-          ...prevState.defaultNodeAttributes,
+          ...state.defaultNodeAttributes,
         fillcolor: color,
       },
     }));
   }
 
   handleEdgeStyleChange = (style) => {
-    this.setPersistentState(prevState => ({
+    this.setPersistentState(state => ({
       defaultEdgeAttributes: {
-          ...prevState.defaultEdgeAttributes,
+          ...state.defaultEdgeAttributes,
         style: style,
       },
     }));
   }
 
   handleEdgeColorChange = (color) => {
-    this.setPersistentState(prevState => ({
+    this.setPersistentState(state => ({
       defaultEdgeAttributes: {
-          ...prevState.defaultEdgeAttributes,
+          ...state.defaultEdgeAttributes,
         color: color,
       },
     }));
   }
 
   handleEdgeFillColorChange = (color) => {
-    this.setPersistentState(prevState => ({
+    this.setPersistentState(state => ({
       defaultEdgeAttributes: {
-          ...prevState.defaultEdgeAttributes,
+          ...state.defaultEdgeAttributes,
         fillcolor: color,
       },
     }));

From 53aaeae21b9771a9c52f595e1ec2e2b2f05900b7 Mon Sep 17 00:00:00 2001
From: Magnus Jacobsson <Magnus.Jacobsson@berotec.se>
Date: Tue, 18 Sep 2018 21:41:14 +0200
Subject: [PATCH 2/2] Show progress indicator after 800 ms when rendering graph

Resolves https://github.com/magjac/graphviz-visual-editor/issues/38
---
 src/Graph.js | 47 ++++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 40 insertions(+), 7 deletions(-)

diff --git a/src/Graph.js b/src/Graph.js
index d997e4f4..788b7316 100644
--- a/src/Graph.js
+++ b/src/Graph.js
@@ -1,6 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
+import Fade from '@material-ui/core/Fade';
+import CircularProgress from '@material-ui/core/CircularProgress';
 import { select as d3_select} from 'd3-selection';
 import { selectAll as d3_selectAll} from 'd3-selection';
 import { transition as d3_transition} from 'd3-transition';
@@ -18,6 +20,11 @@ const styles = {
   flex: {
     flexGrow: 1,
   },
+  progress: {
+    position: 'absolute',
+    top: 'calc(64px + 2 * 12px + 2px)',
+    left: 'calc(100vw - 2 * 12px - 2 * 12px)',
+  },
 };
 
 function isNumeric(n) {
@@ -27,7 +34,9 @@ function isNumeric(n) {
 class Graph extends React.Component {
   constructor(props) {
     super(props);
-    this.state = {};
+    this.state = {
+      busy: false,
+    };
     this.createGraph = this.createGraph.bind(this)
     this.renderGraph = this.renderGraph.bind(this)
     this.isDrawingEdge = false;
@@ -65,6 +74,7 @@ class Graph extends React.Component {
     let line = errorMessage.replace(/.*error in line ([0-9]*) .*\n/, '$1');
     this.props.onError({message: errorMessage, line: line});
     this.rendering = false;
+    this.setState({busy: false});
     if (this.pendingUpdate) {
         this.pendingUpdate = false;
         this.render();
@@ -126,6 +136,7 @@ class Graph extends React.Component {
       return;
     }
     this.rendering = true;
+    this.setState({busy: true});
     this.graphviz
       .width(width)
       .height(height)
@@ -149,6 +160,7 @@ class Graph extends React.Component {
     this.dotGraph = this.prelDotGraph;
     this.addEventHandlers();
     this.rendering = false;
+    this.setState({busy: false});
     if (!this.renderGraphReady) {
       this.renderGraphReady = true;
       this.setZoomScale(1, true);
@@ -714,12 +726,33 @@ class Graph extends React.Component {
   }
 
   render() {
-    return <div
-             ref={div => this.div = d3_select(div)}
-             onDragOver={this.handleNodeShapeDragOver}
-             onDrop={this.handleNodeShapeDrop.bind(this)}
-           >
-           </div>;
+    const { classes } = this.props;
+    return (
+      <React.Fragment>
+        <div
+          ref={div => this.div = d3_select(div)}
+          onDragOver={this.handleNodeShapeDragOver}
+          onDrop={this.handleNodeShapeDrop.bind(this)}
+        >
+        </div>
+        {this.state.busy && (
+          <Fade
+            in={true}
+            style={{
+              transitionDelay: '800ms',
+            }}
+            unmountOnExit
+          >
+             <CircularProgress
+               className={classes.progress}
+               color="secondary"
+               size={20}
+               thickness={4.5}
+             />
+          </Fade>
+        )}
+      </React.Fragment>
+    );
   }
 }