From: Anton Khorev <tony29@yandex.ru>
Date: Wed, 13 Nov 2024 12:05:20 +0000 (+0300)
Subject: Show spinner using delayed css animation in richtext preview
X-Git-Tag: live~18^2~1
X-Git-Url: https://git.openstreetmap.org./rails.git/commitdiff_plain/9fded0245046b4078c4af1714910c49621b83b4c

Show spinner using delayed css animation in richtext preview
---

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 {