From: Tom Hughes <tom@compton.nu>
Date: Wed, 13 Nov 2024 17:00:06 +0000 (+0000)
Subject: Merge remote-tracking branch 'upstream/pull/5315'
X-Git-Tag: live~303
X-Git-Url: https://git.openstreetmap.org./rails.git/commitdiff_plain/349f5e0655f5026db54e4795e48a688eb2b7a654?hp=d975100504a87788df9386ceee455e76ebfade64

Merge remote-tracking branch 'upstream/pull/5315'
---

diff --git a/app/assets/javascripts/index.js b/app/assets/javascripts/index.js
index 2b29992e9..4dfc849fe 100644
--- a/app/assets/javascripts/index.js
+++ b/app/assets/javascripts/index.js
@@ -25,8 +25,6 @@
 //= require qs/dist/qs
 
 $(document).ready(function () {
-  var loaderTimeout;
-
   var map = new L.OSM.Map("map", {
     zoomControl: false,
     layerControl: false,
@@ -39,11 +37,7 @@ $(document).ready(function () {
 
     map.setSidebarOverlaid(false);
 
-    clearTimeout(loaderTimeout);
-
-    loaderTimeout = setTimeout(function () {
-      $("#sidebar_loader").show();
-    }, 200);
+    $("#sidebar_loader").show().addClass("delayed-fade-in");
 
     // IE<10 doesn't respect Vary: X-Requested-With header, so
     // prevent caching the XHR response as a full-page URL.
@@ -60,9 +54,8 @@ $(document).ready(function () {
       url: content_path,
       dataType: "html",
       complete: function (xhr) {
-        clearTimeout(loaderTimeout);
         $("#flash").empty();
-        $("#sidebar_loader").hide();
+        $("#sidebar_loader").removeClass("delayed-fade-in").hide();
 
         var content = $(xhr.responseText);
 
diff --git a/app/assets/javascripts/richtext.js b/app/assets/javascripts/richtext.js
index 0c0a69923..bd00d937e 100644
--- a/app/assets/javascripts/richtext.js
+++ b/app/assets/javascripts/richtext.js
@@ -8,7 +8,7 @@
     var container = $(this).closest(".richtext_container");
     var preview = container.find(".tab-pane[id$='_preview']");
 
-    preview.children(".richtext_placeholder").attr("hidden", true);
+    preview.children(".richtext_placeholder").attr("hidden", true).removeClass("delayed-fade-in");
     preview.children(".richtext").empty();
   });
 
@@ -34,13 +34,10 @@
     var preview = container.find(".tab-pane[id$='_preview']");
 
     if (preview.children(".richtext").contents().length === 0) {
-      preview.oneTime(200, "loading", function () {
-        preview.children(".richtext_placeholder").removeAttr("hidden");
-      });
+      preview.children(".richtext_placeholder").removeAttr("hidden").addClass("delayed-fade-in");
 
       preview.children(".richtext").load(editor.data("previewUrl"), { text: editor.val() }, function () {
-        preview.stopTime("loading");
-        preview.children(".richtext_placeholder").attr("hidden", true);
+        preview.children(".richtext_placeholder").attr("hidden", true).removeClass("delayed-fade-in");
       });
     }
   });
diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index 8dba773d8..73f8521d7 100644
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -70,6 +70,18 @@ time[title] {
   }
 }
 
+/* Utility for delayed loading spinner */
+
+.delayed-fade-in {
+  animation: 300ms linear forwards delayed-fade-in;
+}
+
+@keyframes delayed-fade-in {
+  0%   { opacity: 0 }
+  66%  { opacity: 0 }
+  100% { opacity: 1 }
+}
+
 /* Rules for the header */
 
 #menu-icon {