Add Loading Animation for Music Blocks (#1988)

* Add container for load animation

I also linked the JSON file that contains the random messages.

* Add CSS for load animation

* Add loading page handler

Run the loading animation when opening projects

* Remove loading page when project finished loading

* Add load messages JSON

This contain the messages for the loading page

* Add Loading GIF

* Add localization for load messages

* Add Spanish Translation for Load Messages

This is just to demo the localization of the loading messages. I only translated it using Google translate so I don't know if the translation is correct.

css/activities.css

@@ -117,6 +117,31 @@
   line-height: 30px;
 }
 
+/*CSS for load animation*/
+#load-container {
+   width: 100%;
+   height: 100%;
+   top: 0;
+   left: 0;
+   position: fixed;
+   display: block;
+   background-color: #fff;
+   opacity: 0.7;
+   z-index: 99;
+   text-align: center;
+}
+
+#messageText{
+  margin-top: 200px;
+  font-size: 30px;
+  z-index: 100;
+}
+
+
+#loading-image{
+  z-index: 100;
+}
+
 #popdown-palette {
     display: none;
     position: absolute;

index.html

@@ -18,6 +18,8 @@
   </noscript>
   <script src="dist/app.min.js/?cb=1566155195010" defer>
   </script>
+
+  <script type="text/javascript" src="js/loadmessages.json"></script>
 
   <!-- <script src="js/utils/detectIE.js">
   </script> -->
@@ -217,6 +219,16 @@
 
       <canvas id="myCanvas" width="1200" height="900">
       </canvas>
+
+     <!--Load Animation Container-->	    
+      <center>
+        <div id = "load-container">
+          <div id = "load-content">
+            <p id="messageText"></p>
+            <img id="loading-image" src="images/loading.gif" alt="Loading..." />
+          </div>
+        </div>
+      </center>
 
       <canvas id="overlayCanvas" width="1200" height="900" style="position:absolute; pointer-events:none; left:0; top:0; z-index:-100; visibility:hidden;">
       </canvas>

js/activity.js

@@ -945,6 +945,24 @@ function Activity() {
             disableHorizScrollIcon.style.display = 'none';
         }
     };
+
+
+    //Load Animation handler
+    doLoadAnimation = function(){
+      document.getElementById("load-container").style.display = "block";
+      var counter = 0;
+      setInterval(changeText, 2000);
+
+      function changeText() {
+        var randomLoadMessage = messages.load_messages[Math.floor(Math.random() * messages.load_messages.length)];
+        document.getElementById("messageText").innerHTML = _(randomLoadMessage) + "...";
+        counter++;
+        if (counter >= messages.load_messages.length) {
+          counter = 0;
+        }
+      }
+    };
+
 
     /*
      * @param chartBitmap bitmap of analysis charts
@@ -998,6 +1016,7 @@ function Activity() {
       var ctx = myChart.getContext('2d');
         loading = true;
         document.body.style.cursor = 'wait';
+        doLoadAnimation();
       var myRadarChart = null;
       var  scores = analyzeProject(blocks);
       var data = scoreToChartData(scores);
@@ -2630,6 +2649,7 @@ function Activity() {
         };
         loading = true;
         document.body.style.cursor = 'wait';
+        doLoadAnimation();
 
         // palettes.updatePalettes();
         setTimeout(function () {
@@ -2782,6 +2802,7 @@ function Activity() {
         }
 
         if (sessionData) {
+            doLoadAnimation();
             try {
                 if (sessionData === 'undefined' || sessionData === '[]') {
                     console.debug('empty session found: loading start');
@@ -4188,6 +4209,7 @@ function Activity() {
                 console.debug('loadRawProject ' + data);
                 loading = true;
                 document.body.style.cursor = 'wait';
+                doLoadAnimation();
                 _allClear(false);
 
                 // First, hide the palettes as they will need updating.
@@ -4469,6 +4491,7 @@ function Activity() {
             reader.onload = (function (theFile) {
                 loading = true;
                 document.body.style.cursor = 'wait';
+                doLoadAnimation();
 
                 setTimeout(function () {
                     var rawData = reader.result;
@@ -4539,6 +4562,7 @@ function Activity() {
             reader.onload = (function (theFile) {
                 loading = true;
                 document.body.style.cursor = 'wait';
+                doLoadAnimation();
 
                 setTimeout(function () {
                     var rawData = reader.result;
@@ -4633,6 +4657,7 @@ function Activity() {
             reader.onload = (function (theFile) {
                 loading = true;
                 document.body.style.cursor = 'wait';
+                doLoadAnimation();
 
                 setTimeout(function () {
                     obj = processRawPluginData(reader.result, palettes, blocks, errorMsg, logo.evalFlowDict, logo.evalArgDict, logo.evalParameterDict, logo.evalSetterDict, logo.evalOnStartList, logo.evalOnStopList, palettes.pluginMacros);

js/blocks.js

@@ -5537,7 +5537,7 @@ function Blocks (activity) {
 
         console.debug("Finished block loading");
         document.body.style.cursor = 'default';
-
+        document.getElementById("load-container").style.display = "none";
         var myCustomEvent = new Event('finishedLoading');
         document.dispatchEvent(myCustomEvent);
     };

js/loadmessages.json

@@ -0,0 +1,11 @@
+messages = {"load_messages": [
+  "Catching mice...",
+  "Cleaning the instruments...",
+  "Testing keypieces...",
+  "Sight-Reading...",
+  "Combining Math and Music...",
+  "Generating more blocks...",
+  "Do Re Mi Fa So La Ti Do...",
+  "Tuning string instruments...",
+  "Pressing random keys...",
+  ]};