community block MDL-24890 YUI: add loading image when waiting for the screenshot to be loaded

blocks/community/yui/imagegallery/imagegallery.js

@@ -15,9 +15,17 @@ YUI.add('moodle-block_community-imagegallery', function(Y) {
         overlay:null, //all the comment boxes
         imageidnumbers: [],
         imageloadingevent: null,
+        loadingimage: null,
 
         initializer : function(params) {
 
+            //create the loading image
+            var objBody = Y.one(document.body);
+            this.loadingimage = Y.Node.create('<div id="hubloadingimage" class="hiddenoverlay">'
+                +'<img src=\'' + M.cfg.wwwroot +'/pix/i/loading.gif\'>'
+                +'</div>');
+            objBody.append(this.loadingimage);
+
             /// create the div for overlay
             var objBody = Y.one(document.body);
             var overlaytitle = Y.Node.create('<div id="imagetitleoverlay" class="hiddenoverlay"></div>');
@@ -65,6 +73,12 @@ YUI.add('moodle-block_community-imagegallery', function(Y) {
             objBody.prepend(mask);
             this.set('maskNode', Y.one('#ss-mask'));
 
+            //display loading image
+            Y.one('#hubloadingimage').setStyle('display', 'block');
+            Y.one('#hubloadingimage').setStyle("position", 'fixed');
+            Y.one('#hubloadingimage').setStyle("top", '50%');
+            Y.one('#hubloadingimage').setStyle("left", '50%');
+
             var windowheight = e.target.get('winHeight');
             var windowwidth = e.target.get('winWidth');
 
@@ -93,16 +107,23 @@ YUI.add('moodle-block_community-imagegallery', function(Y) {
                 width: windowwidth - 100
             });
             this.overlay.render();
-            this.overlay.show(); //show the overlay
-            this.overlay.set("centered", true);
+            this.overlay.hide(); //show the overlay
+            this.overlay.set("centered", true);         
 
             e.halt(); // we are going to attach a new 'hide overlay' event to the body,
             // because javascript always propagate event to parent tag,
             // we need to tell Yahoo to stop to call the event on parent tag
             // otherwise the hide event will be call right away.
 
+            //once the image is loaded, update display
             this.imageloadingevent = Y.one('#imagetodisplay').on('load', function(e){
-                this.overlay.set("centered", true)
+                //hide the loading image
+                Y.one('#hubloadingimage').setStyle('display', 'none');
+
+                //display the screenshot
+                this.overlay.set("centered", true);
+                this.overlay.show();
+
             }, this);
 
             var previousnumber = screennumber - 1;
@@ -135,6 +156,9 @@ YUI.add('moodle-block_community-imagegallery', function(Y) {
             // remove the mask
             this.get('maskNode').remove();
 
+            //hide the loading image
+            Y.one('#hubloadingimage').setStyle('display', 'none');
+
             this.overlay.hide(); //hide the overlay
             if (this.event != null) {
                 this.event.detach(); //we need to detach the body hide event