Add loading spinner when using frameReady - refs BT#19389

main/document/showinframes.php

@@ -426,19 +426,12 @@ if ($execute_iframe) {
 
         echo $toolbar = Display::toolbarAction('actions-documents', [$actionsLeft]);
 
-        $translate = api_get_configuration_value('translate_html');
-        $display = '';
-        if ($translate) {
-            $display = ' display:none;';
-        }
-
         echo '<div class="embed-responsive embed-responsive-16by9">';
         echo '<iframe
             id="mainFrame"
             name="mainFrame"
             border="0"
             class="embed-responsive-item"
-            style="'.$display.'"
             src="'.$file_url_web.'&rand='.mt_rand(1, 10000).'"
             height="500" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe>';
         echo '</div>';

main/inc/lib/display.lib.php

@@ -2946,6 +2946,12 @@ HTML;
 
         $videoFeatures = implode("','", $videoFeatures);
         $frameReady = '
+
+        var $iframe = $("'.$frameName.'");
+        var $iframeSpinner = $("<span aria-hidden=\"true\" class=\"fa fa-spinner fa-spin fa-3x\"></span>");
+
+        $iframe.hide().parent().append($iframeSpinner);
+
         $.frameReady(function() {
              $(function () {
                 $("video:not(.skip), audio:not(.skip)").mediaelementplayer({
@@ -2957,9 +2963,9 @@ HTML;
                     vrPath: "'.$webPublicPath.'assets/vrview/build/vrview.js"
                 });
 
-                window.setTimeout(function () {
+                var iframe = window.top.document.querySelector("'.$frameName.'");
-                    window.top.document.getElementById("mainFrame").style.display = "";
+                iframe.parentNode.querySelector(".fa").remove()
-                }, 1500);
+                iframe.style.display = "block";
             });
         },
         "'.$frameName.'",

main/lp/scorm_api.php

@@ -1679,6 +1679,10 @@ function switch_item(current_item, next_item)
     } else {
         ?>
             log_in_log('loading '+mysrc+' in frame');
+
+            var $iframeSpinner = $('<span aria-hidden="true" class="fa fa-spinner fa-spin fa-3x"></span>');
+            cont_f.hide().parent().append($iframeSpinner);
+
             cont_f.attr("src",mysrc);
     <?php
     } ?>