Show spinner using delayed css animation in richtext preview

openstreetmap · Nov 13, 2024 · 9fded02 · 9fded02
1 parent 6042632
commit 9fded02
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 6 deletions.
diff --git 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
@@ -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 {