fix loader waits too long when project loads superfast

dependencies hashes:
openFrameworks d78075f4bca6be2a2533c6e51a75cc1f18404501
ofxMsdfgen e14da13d02c4dff04fb69d7923469f606924e6c3
ofxGPUFont d482bb7cbdf6b296fa4ab5abcf73fb5ff8c8b239
ofxVariableLab 0b5f9bdebc1e5550621957e73c040c258ec6317b
ofxProfiler a868e34fa1a79189dd4fbdede2938e308535e5e8
theatre 86d3e07f6f2c75fd6e08fca8c97e3617c9e23b18

bin/em/variabletime/web/js/artboard.js

@@ -152,7 +152,11 @@ const Artboard = function(tp, domElement = false, autoInit = true) {
                 });
                 // should we have an audio object, let's inject the buttons, etc
                 if (typeof audio === 'object' && audio.hasOwnProperty('injectPanel')) {
-                    audio.injectPanel(this);
+                    const success = audio.injectPanel(this);
+                    if (success) {
+                        const e = new CustomEvent('injectedAll', {});
+                        tp.getPanel().dispatchEvent(e);
+                    }
                 } else {
                     console.log('Artboard::findInjectPanel', `cannot inject audio panel for ${this.id()} for some reason.`);
                 }

bin/em/variabletime/web/js/audio.js

@@ -807,6 +807,11 @@ const Audio = function(tp, record) {
                 addAudioButton(layer, propTitle, isActive);
             }
         });
+        const good = props.length > 1 && props[0] !== 'dummy'; 
+        if (good) {
+            this.injectedPanelAtLeastOnce = true;
+        }
+        return good;
     };
     const audioSourceCombos = {};
     const readAudioFiles = () => {

bin/em/variabletime/web/js/layer.js

@@ -802,7 +802,11 @@ const Layer = function(tp, layerID, fontsAndAxes, autoInit = true) {
 
                         // should we have an audio object, let's inject the buttons, etc
                         if (typeof audio === 'object' && typeof audio.injectPanel === 'function') {
-                            audio.injectPanel(this);
+                            const success = audio.injectPanel(this);
+                            if (success) {
+                                const e = new CustomEvent('injectedAll', {});
+                                tp.getPanel().dispatchEvent(e);
+                            }
                         } else {
                             console.log('Layer::findInjectPanel', `cannot inject audio panel for ${this.id()} for some reason.`);
                         }

bin/em/variabletime/web/js/main.js

@@ -324,8 +324,31 @@ const resize = () => {
     Module.windowResized(Math.round(width * ratio), Math.round(height * ratio));
 };
 
+const setLoadingDoneHook = () => {
+    let addedListener = false;
+    const loadingInjectInterval = setInterval(() => {
+        if (!addedListener) {
+            const panel = tp.getPanel();
+            if (panel !== null) {
+                if (audio.injectedPanelAtLeastOnce) {
+                    window.setLoadingDone();
+                } else {
+                    addedListener = true;
+                    const injectedAll = () => {
+                        window.setLoadingDone();
+                        tp.getPanel().removeEventListener('injectedAll', injectedAll);
+                    };
+                    tp.getPanel().addEventListener('injectedAll', injectedAll);
+                }
+                clearInterval(loadingInjectInterval);
+            }
+        }
+    }, 20);
+};
+
 const postModuleInitialized = () => {
     window.setLoadingTask('setting up animation', 80);
+    setLoadingDoneHook();
     moduleFS.init()
         .then(() => {
             artboard = new Artboard(tp, content);
@@ -334,13 +357,13 @@ const postModuleInitialized = () => {
             tp.connectModuleCallbacks();
             exporter.init();
             getFontsAndAxes();
+            window.setLoadingTask('loading project', 85);
             tp.loadProject().then(() => {
                 interactor.init();
                 resize();
                 adjustPanel();
-                window.setLoadingTask('setting up animation', 100);
+                window.setLoadingTask('setting up whatever else is necessary', 100);
                 window.isInitialized = true;
-                window.setLoadingDone();
                 window.autoSaveInterval = setInterval(() => {
                     if (config.autoSave && window.isInitialized) {
                         tp.saveProject();

bin/em/variabletime/web/js/theatre-play.js

@@ -702,6 +702,7 @@ const TheatrePlay = function(autoInit = false) {
                 const defaultArtboardValues = window.getArtboard().theatreObject.value;
                 const artboardProps = {...defaultArtboardValues, ...artboardValues};
 
+                window.setLoadingTask('setting up artboard', 90);
                 studio.transaction(({
                     set
                 }) => {
@@ -719,6 +720,7 @@ const TheatrePlay = function(autoInit = false) {
                 Object.keys(objects)
                     .filter((e) => e.indexOf('layer-') === 0)
                     .forEach((layerId) => {
+                        window.setLoadingTask(`setting up the shapes of ${layerId} to come`, 90);
                         window.project_fontsHashMap = project.fontsHashMap;
                         layerPromises.push(window.addExistingLayer(layerId, objects[layerId]));
                     });
@@ -729,7 +731,6 @@ const TheatrePlay = function(autoInit = false) {
                         getLayers().forEach((layer) => {
                             if (layer.id() === project.layerOrder[project.layerOrder.length - 1]) {
                                 layer.select();
-                                // add audio mapping?
                             }
                         });
                     }