From 9fded0245046b4078c4af1714910c49621b83b4c Mon Sep 17 00:00:00 2001
From: Anton Khorev <tony29@yandex.ru>
Date: Wed, 13 Nov 2024 15:05:20 +0300
Subject: [PATCH] Show spinner using delayed css animation in richtext preview

---
 app/assets/javascripts/richtext.js |  9 +++------
 app/assets/stylesheets/common.scss | 12 ++++++++++++
 2 files changed, 15 insertions(+), 6 deletions(-)

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 {
-- 
2.39.5