improved ui for plugin

parser/CompConverter.js

diff --git a/parser/CompConverter.js b/parser/CompConverter.js
index 116fc22..e8818a9 100644
--- a/parser/CompConverter.js
+++ b/parser/CompConverter.js
@@ -93,14 +93,16 @@
     }
 
     function searchNextComposition(){
-        var len = compositionsList.length;
-        while(currentExportingComposition < len){
-            if(compositionsList[currentExportingComposition].queued === true){
-                currentCompositionData = compositionsList[currentExportingComposition];
-                exportNextComposition();
-                return;
+        if(!renderCancelled){
+            var len = compositionsList.length;
+            while(currentExportingComposition < len){
+                if(compositionsList[currentExportingComposition].queued === true){
+                    currentCompositionData = compositionsList[currentExportingComposition];
+                    exportNextComposition();
+                    return;
+                }
+                currentExportingComposition+=1;
             }
-            currentExportingComposition+=1;
         }
         //If we get here there are no more compositions to render and callback is executed
         helperFootage.remove();

parser/DOMAnimationManager.js

diff --git a/parser/DOMAnimationManager.js b/parser/DOMAnimationManager.js
index d71a0c2..e103dca 100644
--- a/parser/DOMAnimationManager.js
+++ b/parser/DOMAnimationManager.js
@@ -12,6 +12,8 @@
     var mainLayers = [];
     var filesDirectory;
     var callback;
+    var pendingLayers = [];
+    var totalLayers = 0;
 
     function getCompositionAnimationData(compo, compositionData,fDirectory){
         mainComp = compo;
@@ -158,18 +160,21 @@
         return textDataOb;
     }
 
-    function createLayers(compo, layersData, frameRate){
-        var i, len = compo.layers.length;
-        for(i = 0;i<len;i++){
-            var layerOb = {};
-            var layerInfo = compo.layers[i+1];
+    function analyzeNextLayer(){
+        if(pendingLayers.length == 0){
+            renderNextFrame();
+        }else{
+            var pendingItem = pendingLayers.pop();
+            UI.setProgress(pendingLayers.length/totalLayers);
+            var layerOb = pendingItem.lOb;
+            var layerInfo = pendingItem.lInfo;
+            var frameRate = pendingItem.frameRate;
             var lType = extrasInstance.layerType(layerInfo);
-
             if(lType == 'AudioLayer' || lType == 'CameraLayer' || layerInfo.enabled == false){
                 //TODO add audios
-                layersData.push(layerOb);
                 layerOb.enabled = false;
-                continue;
+                analyzeNextLayer();
+                return;
             }else if(lType == 'TextLayer'){
                 var textProp = layerInfo.property("Source Text");
                 var textDocument = textProp.value;
@@ -201,10 +206,8 @@
             layerOb.an = {};
 
             if(lType=='PreCompLayer'){
-                layerOb.layers = [];
                 layerOb.width = layerInfo.source.width;
                 layerOb.height = layerInfo.source.height;
-                createLayers(layerInfo.source,layerOb.layers,layerInfo.source.frameRate);
             }else if(lType == 'StillLayer'){
                 addStillAsset(layerOb,layerInfo);
                 layerOb.width = layerInfo.source.width;
@@ -221,7 +224,6 @@
             layerOb.outPoint = layerInfo.outPoint*frameRate;
             layerOb.startTime = layerInfo.startTime*frameRate;
             layerOb.lastData = {};
-            layersData.push(layerOb);
 
             layerOb.ks = {};
             if(layerInfo.transform.opacity.numKeys>1){
@@ -253,6 +255,31 @@
             if(layerInfo.canSetTimeRemapEnabled && layerInfo.timeRemapEnabled){
                 extrasInstance.convertToBezierValues(layerInfo['Time Remap'], frameRate, layerOb,'tm');
             }
+            if(!renderCancelled){
+                extrasInstance.setTimeout(analyzeNextLayer,100);
+            }else{
+                callback.apply();
+            }
+        }
+    }
+
+    function createLayers(compo, layersData, frameRate){
+        var i, len = compo.layers.length;
+        for(i = 0;i<len;i++){
+            var layerOb = {};
+            var layerInfo = compo.layers[i+1];
+            var lType = extrasInstance.layerType(layerInfo);
+            layersData.push(layerOb);
+            if(lType == 'AudioLayer' || lType == 'CameraLayer' || layerInfo.enabled == false){
+                //TODO add audios
+                layerOb.enabled = false;
+                continue;
+            }
+            pendingLayers.push({lInfo:layerInfo,lOb:layerOb,frameRate:frameRate});
+            if(lType=='PreCompLayer'){
+                layerOb.layers = [];
+                createLayers(layerInfo.source,layerOb.layers,layerInfo.source.frameRate);
+            }
 
         }
     }
@@ -349,7 +376,8 @@
          processFinalData(mainLayers);
          callback.apply();*/
         // END TO TRAVERSE LAYER BY LAYER. NEEDED FOR TIME REMAP?
-        renderNextFrame();
+        totalLayers = pendingLayers.length;
+        analyzeNextLayer();
     }
 
     function iterateLayer(layerInfo, layerOb,frameRate){

parser/UI.js

diff --git a/parser/UI.js b/parser/UI.js
index 6c47ff1..225b202 100644
--- a/parser/UI.js
+++ b/parser/UI.js
@@ -168,6 +168,11 @@
         isPanelFocused = false;
     }
 
+    function setProgress(value){
+        renderGroup.progress.value = (1 - value)*100;
+        renderGroup.infoText.text = ((1 - value)*100).toFixed(2) + '%';
+    }
+
     function cancelRender(){
         renderCancelled = true;
         renderFinished();
@@ -348,7 +353,6 @@
         var project = app.project;
 
         var i,numItems = project.numItems;
-        var types = '';
         var count = 0;
         for(i=0;i<numItems;i+=1){
             if(extrasInstance.getprojectItemType(project.item(i+1))=='Comp'){
@@ -357,7 +361,6 @@
             };
         }
         var numComps = availableCompositions.length;
-        var itemsList = [];
         for(i=0;i<numComps;i++){
             availableCompositions[i].item = compsList.add('item',availableCompositions[i].comp.name);
             if(availableCompositions[i].selected){
@@ -461,6 +464,7 @@
 
     var ob ={};
     ob.setExportText = setExportText;
+    ob.setProgress = setProgress;
 
     UI = ob;
 

player/index.html

diff --git a/player/index.html b/player/index.html
index 5b2840e..5e21cde 100644
--- a/player/index.html
+++ b/player/index.html
@@ -28,7 +28,7 @@
 </head>
 <body style="background-color:#666; margin: 10px;height: 100%; font-family: sans-serif;font-size: 10px">
 <div id="loader"></div>
-<div style="width:800px;height:800px;background-color:#cccccc" class="bodymovin" data-animation-path="exports/dalek" data-bm-player="0" data-anim-type="svg" data-anim-loop="true"></div>
+<div style="width:800px;height:800px;background-color:#cccccc" class="bodymovin" data-animation-path="exports/canvasShape1" data-bm-player="0" data-anim-type="svg" data-anim-loop="true"></div>
 
 </body>
 </html>