Improve the loading state of the "Ping Details" dialog

If the "Ping details" dialog takes more than ~300ms to load,
show an animated progress indicator.

Also, move the loading code to a ping_details.js file
to reduce code repetition.

static/css/ping_details.css

@@ -33,3 +33,21 @@
     height: 500px;
     background: #f5f5f5;
 }
+
+#ping-details-body .loading {
+    padding: 150px 16px;
+}
+
+@keyframes fadeIn {
+    0% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
+
+#ping-details-body .loading .spinner.started {
+    animation: fadeIn 1s ease-in;
+}

static/js/checks.js

@@ -51,27 +51,9 @@ $(function () {
         if (this.innerText == "Never") {
             return false;
         }
-
-        $("#ping-details-body").text("Updating...");
-        $('#ping-details-modal').modal("show");
-
         var code = $(this).closest("tr.checks-row").attr("id");
         var lastPingUrl = base + "/checks/" + code + "/last_ping/";
-        $.get(lastPingUrl, function(data) {
-            $("#ping-details-body" ).html(data);
-            var htmlPre = $("#email-body-html pre");
-            if (htmlPre.length) {
-                var opts = {USE_PROFILES: {html: true}};
-                var clean = DOMPurify.sanitize(htmlPre.text(), opts);
-                var blob = new Blob([clean], {type: "text/html; charset=utf-8"});
-
-                var iframe = document.createElement("iframe");
-                iframe.sandbox = "";
-                iframe.src = URL.createObjectURL(blob);
-
-                htmlPre.replaceWith(iframe);
-            }
-        });
+        loadPingDetails(lastPingUrl);
 
         var logUrl = base + "/checks/" + code + "/log/";
         $("#ping-details-log").attr("href", logUrl);

static/js/details.js

@@ -127,27 +127,7 @@ $(function () {
     });
 
     $("#events").on("click", "tr.ok", function() {
-        $("#ping-details-body").text("Updating...");
-        $('#ping-details-modal').modal("show");
-
-        $.get(this.dataset.url, function(data) {
-                $("#ping-details-body").html(data);
-
-                var htmlPre = $("#email-body-html pre");
-                if (htmlPre.length) {
-                    var opts = {USE_PROFILES: {html: true}};
-                    var clean = DOMPurify.sanitize(htmlPre.text(), opts);
-                    var blob = new Blob([clean], {type: "text/html; charset=utf-8"});
-
-                    var iframe = document.createElement("iframe");
-                    iframe.sandbox = "";
-                    iframe.src = URL.createObjectURL(blob);
-
-                    htmlPre.replaceWith(iframe);
-                }
-            }
-        );
-
+        loadPingDetails(this.dataset.url);
         return false;
     });
 

static/js/log.js

@@ -1,25 +1,6 @@
 $(function () {
     $("#log tr.ok").on("click", function() {
-        $("#ping-details-body").text("Updating...");
-        $('#ping-details-modal').modal("show");
-
-        $.get(this.dataset.url, function(data) {
-            $("#ping-details-body").html(data);
-
-            var htmlPre = $("#email-body-html pre");
-            if (htmlPre.length) {
-                var opts = {USE_PROFILES: {html: true}};
-                var clean = DOMPurify.sanitize(htmlPre.text(), opts);
-                var blob = new Blob([clean], {type: "text/html; charset=utf-8"});
-
-                var iframe = document.createElement("iframe");
-                iframe.sandbox = "";
-                iframe.src = URL.createObjectURL(blob);
-
-                htmlPre.replaceWith(iframe);
-            }
-        });
-
+        loadPingDetails(this.dataset.url);
         return false;
     });
 

static/js/ping_details.js

@@ -0,0 +1,23 @@
+function loadPingDetails(url) {
+    $("#ping-details-body").html("<div class='loading'><div class='spinner'><div class='d1'></div><div class='d2'></div><div class='d3'></div></div></div>");
+    $('#ping-details-modal').modal("show");
+    $("#ping-details-body .spinner").addClass("started");
+
+    $.get(url, function(data) {
+            $("#ping-details-body").html(data);
+
+            var htmlPre = $("#email-body-html pre");
+            if (htmlPre.length) {
+                var opts = {USE_PROFILES: {html: true}};
+                var clean = DOMPurify.sanitize(htmlPre.text(), opts);
+                var blob = new Blob([clean], {type: "text/html; charset=utf-8"});
+
+                var iframe = document.createElement("iframe");
+                iframe.sandbox = "";
+                iframe.src = URL.createObjectURL(blob);
+
+                htmlPre.replaceWith(iframe);
+            }
+        }
+    );
+}

templates/front/details.html

@@ -379,6 +379,7 @@
 <script src="{% static 'js/purify.min.js' %}"></script>
 <script src="{% static 'js/update-timeout-modal.js' %}"></script>
 <script src="{% static 'js/adaptive-setinterval.js' %}"></script>
+<script src="{% static 'js/ping_details.js' %}"></script>
 <script src="{% static 'js/details.js' %}"></script>
 {% endcompress %}
 {% endblock %}

templates/front/log.html

@@ -151,6 +151,7 @@
 <script src="{% static 'js/moment.min.js' %}"></script>
 <script src="{% static 'js/moment-timezone-with-data-10-year-range.min.js' %}"></script>
 <script src="{% static 'js/purify.min.js' %}"></script>
+<script src="{% static 'js/ping_details.js' %}"></script>
 <script src="{% static 'js/log.js' %}"></script>
 {% endcompress %}
 {% endblock %}

templates/front/my_checks.html

@@ -99,6 +99,7 @@
 <script src="{% static 'js/purify.min.js' %}"></script>
 <script src="{% static 'js/update-timeout-modal.js' %}"></script>
 <script src="{% static 'js/adaptive-setinterval.js' %}"></script>
+<script src="{% static 'js/ping_details.js' %}"></script>
 <script src="{% static 'js/checks.js' %}"></script>
 {% endcompress %}
 {% endblock %}