Add loading animation and prepare for production release

Author: chemicstry

.gitignore

@@ -60,3 +60,6 @@ typings/
 # lnd files
 lnd.cert
 admin.macaroon
+
+# built files
+dist/

client/GraphMap.jsx

@@ -4,6 +4,27 @@ import { ObjectTypes } from './DataStore.js';
 import { computed, autorun } from 'mobx';
 import { observer } from 'mobx-react';
 
+import FontAwesome from 'react-fontawesome';
+import FA from 'font-awesome/css/font-awesome.css';
+
+var styles = {
+    container: {
+        position: 'relative',
+        width: '100%',
+        height: '100%'
+    },
+    overlay: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center'
+    }
+}
+
 @observer
 export default class App extends React.Component {
     state = {
@@ -37,8 +58,15 @@ export default class App extends React.Component {
                     this.props.store.selectObject(event.edges[0]);
                 else
                     this.props.store.selectObject(undefined);
+            },
+            // Called when initial stabilization is complete
+            stabilizationIterationsDone: (event) => {
+                this.setState({
+                    loading: false
+                });
             }
-        }
+        },
+        loading: true
     };
 
     // Transforms network data into vis.js data format
@@ -80,6 +108,12 @@ export default class App extends React.Component {
             });
         }
 
+        // Notify that graph changed and will need to be restabilised
+        this.graphChanged = true;
+        this.setState({
+            loading: true
+        });
+
         return graph;
     }
 
@@ -95,8 +129,6 @@ export default class App extends React.Component {
 
             if (!this.network || !object)
                 return;
-            
-            console.log(object);
 
             if (object.type == ObjectTypes.NODE)
             {
@@ -114,16 +146,29 @@ export default class App extends React.Component {
         });
     }
 
+    componentWillReact() {
+        
+    }
+
     componentDidUpdate(prevProps, prevState) {
-        if (this.network)
+        // Stabilize if graph changed
+        if (this.network && this.graphChanged)
         {
-            setTimeout(() => this.network.fit(), 500);
+            this.network.stabilize();
+            this.graphChanged = false;
         }
     }
 
     render() {
         return (
-            <Graph graph={this.graphData} options={this.state.options} events={this.state.events} getNetwork={(network) => this.getNetwork(network)} />
+            <div style={styles.container}>
+                <Graph graph={this.graphData} options={this.state.options} events={this.state.events} getNetwork={(network) => this.getNetwork(network)} />
+                { this.state.loading ? (
+                <div style={styles.overlay}>
+                    <FontAwesome name='spinner' pulse size='2x' cssModule={FA} />
+                </div>
+                ) : '' }
+            </div>
         );
     }
 }

package-lock.json

@@ -3,8 +3,14 @@
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/chemicstry/recksplorer.git"
+  },
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "rimraf dist && cross-env NODE_ENV=production webpack --config ./webpack.production.config.js --progress --profile --colors",
+    "start": "node server"
   },
   "author": "",
   "license": "ISC",
@@ -43,6 +49,7 @@
     "file-loader": "^1.1.6",
     "html-webpack-plugin": "^2.30.1",
     "resolve-url-loader": "^2.2.1",
+    "rimraf": "^2.6.2",
     "style-loader": "^0.19.1",
     "webpack": "^3.10.0",
     "webpack-dev-middleware": "^2.0.4",

package.json

@@ -0,0 +1,87 @@
+'use strict';
+
+var path = require('path');
+var webpack = require('webpack');
+var HtmlWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = {
+    entry: [
+        path.join(__dirname, 'client/main.js')
+    ],
+    output: {
+        path: path.join(__dirname, '/dist/'),
+        filename: '[name]-[hash].min.js',
+        publicPath: '/'
+    },
+    plugins: [
+        new HtmlWebpackPlugin({
+            template: 'client/index.tpl.html',
+            inject: 'body',
+            filename: 'index.html'
+        }),
+        new webpack.optimize.OccurrenceOrderPlugin(),
+        new webpack.optimize.UglifyJsPlugin({
+            compressor: {
+                warnings: false,
+                screw_ie8: true
+            }
+        })
+    ],
+    module: {
+        loaders: [
+            {
+                test: /\.jsx?$/,
+                exclude: /node_modules/,
+                loader: 'babel-loader',
+                query: {
+                    "presets": [
+                        ["env", {"modules": false}],
+                        "stage-1",
+                        "react"
+                    ],
+                    "plugins": [
+                        "transform-runtime",
+                        "transform-decorators-legacy"
+                    ]
+                }
+            },
+            {
+                test: /\.json?$/,
+                loader: 'json'
+            },
+            {
+                test: /\font-awesome.css$/,
+                loader: 'css-loader',
+                query: {
+                    modules: false
+                }
+            },
+            {
+                test: /\.css$/,
+                loaders: [
+                    {
+                        loader: 'style-loader'
+                    },
+                    {
+                        loader: 'css-loader',
+                        query: {
+                            modules: true,
+                            localIdentName: '[name]__[local]___[hash:base64:5]'
+                        }
+                    }, 
+                    {
+                        loader: 'resolve-url-loader'
+                    }
+                ],
+            },
+            { 
+                test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
+                loader: "url-loader?limit=10000&mimetype=application/font-woff" 
+            },
+            { 
+                test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
+                loader: "file-loader" 
+            },
+        ]
+    }
+};