Refactoring rendering code to allow the loader to show

The loader is mostly an easter egg for people who like to try rendering
that enormous email-matching regexp from the Mail::RFC822::Address perl
module

src/js/regexper.js

@@ -69,7 +69,7 @@ export default class Regexper {
   updateLinks() {
     var blob, url;
 
-    blob = new Blob([svg.outerHTML], { type: 'image/svg+xml' });
+    blob = new Blob([this.svg.outerHTML], { type: 'image/svg+xml' });
     url = URL.createObjectURL(blob);
 
     this.download.setAttribute('href', url);
@@ -77,15 +77,27 @@ export default class Regexper {
   }
 
   renderSvg(snap, expression) {
-    var result;
+    var deferred = Q.defer(),
+        result;
 
     snap.selectAll('g').remove();
 
-    result = parser.parse(expression);
+    setTimeout(() => {
-    result.container = snap.group();
+      try {
-    result.render();
+        result = parser.parse(expression);
+      }
+      catch(e) {
+        deferred.reject(e);
+      }
 
-    return result;
+      if (result) {
+        result.container = snap.group();
+        result.render();
+        deferred.resolve(result);
+      }
+    });
+
+    return deferred.promise;
   }
 
   positionSvg(snap, parsed) {
@@ -104,15 +116,9 @@ export default class Regexper {
 
   renderRegexp(expression) {
     var padding = this.padding,
-        snap = Snap(this.svg),
+        snap = Snap(this.svg);
-        promise;
 
-    promise = Q.promise(((resolve, reject, notify) => {
+    return this.renderSvg(snap, expression)
-      resolve(this.renderSvg(snap, expression));
+      .then(this.positionSvg.bind(this, snap));
-    }).bind(this));
-
-    promise.then(this.positionSvg.bind(this, snap));
-
-    return promise;
   }
 }