Runs faster

docs/bootstrap.js

@@ -258,7 +258,7 @@
 /******/ 				promises.push(installedWasmModuleData);
 /******/ 			else {
 /******/ 				var importObject = wasmImportObjects[wasmModuleId]();
-/******/ 				var req = fetch(__webpack_require__.p + "" + {"../pkg/vtracer_bg.wasm":"34e06406170859162632"}[wasmModuleId] + ".module.wasm");
+/******/ 				var req = fetch(__webpack_require__.p + "" + {"../pkg/vtracer_bg.wasm":"a56b184573f85c442cd0"}[wasmModuleId] + ".module.wasm");
 /******/ 				var promise;
 /******/ 				if(importObject instanceof Promise && typeof WebAssembly.compileStreaming === 'function') {
 /******/ 					promise = Promise.all([WebAssembly.compileStreaming(req), importObject]).then(function(items) {

webapp/app/index.js

@@ -267,25 +267,33 @@ class ConverterRunner {
             svg.style.background = '';
             canvas.style.display = '';
         }
+        canvas.style.opacity = '';
     }
 
     run () {
         const This = this;
-        requestAnimationFrame(function tick () {
+        setTimeout(function tick () {
             if (!This.stopped) {
-                if (!This.converter.tick()) {
+                let done = false;
+                const startTick = performance.now();
+                while (!(done = This.converter.tick()) &&
+                    performance.now() - startTick < 25) {
+                }
                 progress.value = This.converter.progress();
                 if (progress.value >= 50) {
                     canvas.style.display = 'none';
+                } else {
+                    canvas.style.opacity = (50 - progress.value) / 25;
                 }
                 if (progress.value >= progress.max) {
                     progressregion.style.display = 'none';
                     progress.value = 0;
                 }
-                    requestAnimationFrame(tick);
+                if (!done) {
+                    setTimeout(tick, 1);
                 }
             }
-        });
+        }, 1);
     }
 
     stop () {