Add loader-icons to edition, including necessary changes to .css

sade-projects/textgrid/templates/tmpl1/css/goldenLayoutLight.css

@@ -136,7 +136,18 @@
 #goldenEdition {
     height: calc(100vh - 150px);
 }
-.ffacs, .ftran {margin:20px;}
+.ffacs, .ftran {
+    margin:20px;
+}
+
+.facsLoader {
+    position: absolute;
+}
+
+.codeLoader {
+    margin:20px;
+}
+
 body .lm_content{
   overflow: auto;
 }
@@ -154,5 +165,5 @@ body .lm_content{
     font-weight:300;
 }
 .lm_goldenlayout {
-     background: none; 
-}
\ No newline at end of file
+     background: none;
+}

sade-projects/textgrid/templates/tmpl1/js/goldenconfig.js

@@ -91,20 +91,20 @@ if( savedState !== null ) {
 
 // register components
 myLayout.registerComponent( 'code', function( container, state ){
-    container.getElement().html( '<div id="placeholder">…</div>');
+container.getElement().html( '<img alt="" class="codeLoader" src="https://fontane-nb.dariah.eu/public/img/loader.svg" width="500">');
     $.ajax({
         url: "get/code.html"+window.location.search,
         dataType: "text"
         }).done( function(data){
-            $( "#placeholder" ).replaceWith( data );
+            $( ".codeLoader" ).replaceWith( data );
         });
 });
 
 myLayout.registerComponent( 'tran', function( container, state ){
     if ( getParameter("page").indexOf("-") > 0 && getParameter("page").indexOf("alt") == -1 ) {
-        var newElement = '<div class="ftran sourceDoc double"></div>'
+        var newElement = '<div class="ftran sourceDoc double"><img alt="" class="facsLoader" src="https://fontane-nb.dariah.eu/public/img/loader.svg" width="500"></div>'
     }
-    else {var newElement = '<div class="ftran sourceDoc"></div>'}
+    else {var newElement = '<div class="ftran sourceDoc"><img alt="" class="transLoader" src="https://fontane-nb.dariah.eu/public/img/loader.svg" width="500"></div>'}
 container.getElement().html( newElement );
     $.ajax({
         url: "get/trans.html"+window.location.search,
@@ -122,14 +122,15 @@ container.getElement().html( newElement );
             }
             highlightLinkedAreas();
             indexTranscriptionHighlighting();
+            $( ".transLoader" ).remove();
         });
 });
 
 myLayout.registerComponent( 'facs', function( container, state ){
     if ( getParameter("page").indexOf("-") > 0 && getParameter("page").indexOf("alt") == -1 ) {
-        var newElement = '<div class="ffacs double"></div>'
+        var newElement = '<div class="ffacs double"><img alt="" class="facsLoader" src="https://fontane-nb.dariah.eu/public/img/loader.svg" width="500"></div>'
     }
-    else {var newElement = '<div class="ffacs"></div>'}
+    else {var newElement = '<div class="ffacs"><img alt="" class="facsLoader" src="https://fontane-nb.dariah.eu/public/img/loader.svg" width="500"></div>'}
 container.getElement().html( newElement );
     $.ajax({
         url: "get/facs.html"+window.location.search,
@@ -141,6 +142,9 @@ container.getElement().html( newElement );
                 rotate( myLayout.root.getItemsById("facs")[0].config.componentState.rotation );
             }
             altFacs();
+            document.getElementsByClassName("facs")[1].onload = function(){
+                $( ".facsLoader" ).remove();
+            };
         });
 });