Merge pull request #447 from embark-framework/features/show-building-placeholder

Add loading placeholder page while embark is building asset files.

lib/contracts/code_generator.js

@@ -14,7 +14,8 @@ const Templates = {
   define_web3_simple: require('./code_templates/define-web3-simple.js.ejs'),
   web3_connector: require('./code_templates/web3-connector.js.ejs'),
   do_when_loaded: require('./code_templates/do-when-loaded.js.ejs'),
-  exec_when_env_loaded: require('./code_templates/exec-when-env-loaded.js.ejs')
+  exec_when_env_loaded: require('./code_templates/exec-when-env-loaded.js.ejs'),
+  embark_building_placeholder: require('./code_templates/embark-building-placeholder.html.ejs')
 };
 
 class CodeGenerator {
@@ -101,11 +102,15 @@ class CodeGenerator {
       self.buildWeb3JS(cb);
     });
 
-    self.events.setCommandHandler('code-generator:contract', (contractName, cb) => {
+    this.events.setCommandHandler('code-generator:contract', (contractName, cb) => {
       let contract = self.contractsManager.contracts[contractName];
       self.buildContractJS(contractName, self.generateContractJSON(contractName, contract), cb);
     });
 
+    this.events.setCommandHandler('embark-building-placeholder', (cb) => {
+      this.buildPlaceholderPage(cb);
+    });
+
   }
 
   generateContext() {
@@ -384,6 +389,11 @@ class CodeGenerator {
     ], cb);
   }
 
+  buildPlaceholderPage(cb) {
+    let html = Templates.embark_building_placeholder({buildingMsg: __('Embark is building, please wait...')});
+    cb(html);
+  }
+
 }
 
 module.exports = CodeGenerator;

lib/core/fs.js

@@ -19,6 +19,10 @@ function copySync() {
   return fs.copySync.apply(fs.copySync, arguments);
 }
 
+function move(){
+  return fs.move.apply(fs.move, arguments);
+}
+
 function appendFileSync() {
   return fs.appendFileSync.apply(fs.writeFileSync, arguments);
 }
@@ -87,6 +91,7 @@ module.exports = {
   mkdirp,
   copy,
   copySync,
+  move,
   readFile,
   readFileSync,
   appendFileSync,

lib/i18n/locales/en.json

@@ -113,5 +113,6 @@
 	"No Blockchain node found": "No Blockchain node found",
 	"Couldn't connect to an Ethereum node are you sure it's on?": "Couldn't connect to an Ethereum node are you sure it's on?",
 	"make sure you have an Ethereum node or simulator running. e.g '%s'": "make sure you have an Ethereum node or simulator running. e.g '%s'",
+	"Embark is building, please wait...": "Embark is building, please wait...",
 	"finished building DApp and deploying to": "finished building DApp and deploying to"
 }

lib/pipeline/pipeline.js

@@ -4,6 +4,7 @@ const ProcessLauncher = require('../process/processLauncher');
 const utils = require('../utils/utils.js');
 const constants = require('../constants');
 
+
 require("babel-preset-react");
 require("babel-preset-es2015");
 require("babel-preset-es2016");
@@ -25,8 +26,14 @@ class Pipeline {
   build(abi, contractsJSON, path, callback) {
     let self = this;
     const importsList = {};
+    let placeholderPage;
 
     async.waterfall([
+      function createPlaceholderPage(next){
+        self.events.request('embark-building-placeholder', (html) => {
+          fs.writeFile(self.buildDir + 'index.html', html, next);
+        });
+      },
       function buildTheContracts(next) {
         self.buildContracts(next);
       },
@@ -161,11 +168,25 @@ class Pipeline {
                 }).join("\n");
 
                 self.logger.info(__("writing file") + " " + (self.buildDir + targetFile).bold.dim);
+                if(new RegExp(/^index.html?/i).test(targetFile)){
+                  targetFile = targetFile.replace('index', 'index-temp');
+                  placeholderPage = targetFile;
+                }
                 fs.writeFile(self.buildDir + targetFile, content, cb);
               }
             );
           },
           next);
+      },
+      function removePlaceholderPage(next){
+        let placeholderFile = self.buildDir + placeholderPage;
+        fs.access(self.buildDir + placeholderPage, (err) => {
+          if (err) return next(); // index-temp doesn't exist, do nothing
+
+          // rename index-temp.htm/l to index.htm/l, effectively replacing our placeholder page
+          // with the contents of the built index.html page
+          fs.move(placeholderFile, placeholderFile.replace('index-temp', 'index'), {overwrite: true}, next);
+        });
       }
     ], callback);
   }