Tracking: Improve charts loader styles - refs BT#20297

app/Resources/public/css/base.css

@@ -10665,4 +10665,46 @@ ul.dropdown-menu.inner > li > a {
     left: 0;
     width: 100%;
     height: 100%;
-}
+}
+
+.skeleton {
+    background-color: #ECF0F1;
+    border-radius: 4px;
+    margin-bottom: 20px;
+}
+.skeleton--loading::after {
+    -webkit-animation: skeleton-loading 1.2s infinite;
+    -moz-animation: skeleton-loading 1.2s infinite;
+    -o-animation: skeleton-loading 1.2s infinite;
+    animation: skeleton-loading 1.2s infinite;
+    background: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
+    background: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
+    background: -o-linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
+    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
+    content: "";
+    height: 100%;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    -webkit-transform: translateX(-100%);
+    -moz-transform: translateX(-100%);
+    -o-transform: translateX(-100%);
+    transform: translateX(-100%);
+    z-index: 1;
+}
+
+@keyframes skeleton-loading {
+    from {
+        -webkit-transform: translateX(-100%);
+        -moz-transform: translateX(-100%);
+        -o-transform: translateX(-100%);
+        transform: translateX(-100%);
+    }
+    to {
+        -webkit-transform: translateX(100%);
+        -moz-transform: translateX(100%);
+        -o-transform: translateX(100%);
+        transform: translateX(100%);
+    }
+}

main/tracking/courseLog.php

@@ -513,8 +513,8 @@ if ($nbStudents > 0 || isset($parameters['user_active'])) {
         echo '<script>
             $(function () {
                 function loadGraphs () {
+                    $("#tracking-course-summary-wrapper .skeleton").addClass("skeleton--loading");
                     $("#tracking-course-summary-wrapper")
-                        .html("<p><span class=\"fa fa-spinner fa-spin fa-2x\" aria-hidden=\"true\"></span></p>")
                         .load(_p.web_ajax + "course_log.ajax.php?a=graph&'.api_get_cidreq().'");
                 }
         ';
@@ -525,7 +525,7 @@ if ($nbStudents > 0 || isset($parameters['user_active'])) {
 
         if (TrackingCourseLog::HIDE_COURSE_REPORT_GRAPH_CLICK_SHOW === $hideReports) {
             echo '$("#tracking-course-summary-loader").click(function () {
-                $(this).remove();
+                    $(this).remove();
                     loadGraphs();
                 });
             ';
@@ -533,17 +533,59 @@ if ($nbStudents > 0 || isset($parameters['user_active'])) {
 
         echo '});
             </script>
-            <div id="tracking-course-summary-wrapper"></div>
+            <style>
+                #tracking-course-summary-wrapper {
+                    position: relative;
+                    z-index: 998;
+                }
+                #tracking-course-summary-loader {
+                    position: absolute;
+                    left: 50%;
+                    top: 50%;
+                    -webkit-transform: translate(-50%, -50%);
+                    -moz-transform: translate(-50%, -50%);
+                    -o-transform: translate(-50%, -50%);
+                    transform: translate(-50%, -50%);
+                    z-index: 999;
+                }
+            </style>
+            <div id="tracking-course-summary-wrapper">
+                <div class="row">
+                    <div class="col-lg-3 col-sm-3">
+                        <div class="skeleton" style="height: 82px;"></div>
+                    </div>
+                    <div class="col-lg-3 col-sm-3">
+                        <div class="skeleton" style="height: 82px;"></div>
+                    </div>
+                    <div class="col-lg-3 col-sm-3">
+                        <div class="skeleton" style="height: 82px;"></div>
+                    </div>
+                    <div class="col-lg-3 col-sm-3">
+                        <div class="skeleton" style="height: 82px;"></div>
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="col-md-4">
+                        <div class="skeleton" style="height: 241px;"></div>
+                    </div>
+                    <div class="col-md-4">
+                        <div class="skeleton" style="height: 241px;"></div>
+                    </div>
+                    <div class="col-md-4">
+                        <div class="skeleton" style="height: 241px;"></div>
+                    </div>
+                </div>
         ';
 
         if (TrackingCourseLog::HIDE_COURSE_REPORT_GRAPH_CLICK_SHOW === $hideReports) {
-            echo '<p>
-                    <button type="button" class="btn btn-info" id="tracking-course-summary-loader">'
+            echo '<button type="button" class="btn btn-info" id="tracking-course-summary-loader">'
+                .Display::returnFontAwesomeIcon('bar-chart', '', true)
                 .get_lang('ClickToShowGraphs')
                 .'</button>
-                </p>
             ';
         }
+
+        echo '</div>';
     }
 
     $html .= Display::page_subheader2(get_lang('StudentList'));