From: Anton Khorev <tony29@yandex.ru>
Date: Fri, 8 Nov 2024 12:04:38 +0000 (+0300)
Subject: Restore loading spinner in richtext previews
X-Git-Tag: live~23^2
X-Git-Url: https://git.openstreetmap.org./rails.git/commitdiff_plain/a05692a3f6f0be293ff73aec04b32fcaf76f97ce

Restore loading spinner in richtext previews
---

diff --git a/app/assets/javascripts/richtext.js b/app/assets/javascripts/richtext.js
index 56aad8c73..0c0a69923 100644
--- a/app/assets/javascripts/richtext.js
+++ b/app/assets/javascripts/richtext.js
@@ -6,8 +6,10 @@
    */
   $(document).on("change", ".richtext_container textarea", function () {
     var container = $(this).closest(".richtext_container");
+    var preview = container.find(".tab-pane[id$='_preview']");
 
-    container.find(".tab-pane[id$='_preview']").empty();
+    preview.children(".richtext_placeholder").attr("hidden", true);
+    preview.children(".richtext").empty();
   });
 
   /*
@@ -31,14 +33,14 @@
     var editor = container.find("textarea");
     var preview = container.find(".tab-pane[id$='_preview']");
 
-    if (preview.contents().length === 0) {
-      preview.oneTime(500, "loading", function () {
-        preview.addClass("loading");
+    if (preview.children(".richtext").contents().length === 0) {
+      preview.oneTime(200, "loading", function () {
+        preview.children(".richtext_placeholder").removeAttr("hidden");
       });
 
-      preview.load(editor.data("previewUrl"), { text: editor.val() }, function () {
+      preview.children(".richtext").load(editor.data("previewUrl"), { text: editor.val() }, function () {
         preview.stopTime("loading");
-        preview.removeClass("loading");
+        preview.children(".richtext_placeholder").attr("hidden", true);
       });
     }
   });
diff --git a/app/views/shared/_richtext_field.html.erb b/app/views/shared/_richtext_field.html.erb
index 5b84fd6ed..eb11aa13c 100644
--- a/app/views/shared/_richtext_field.html.erb
+++ b/app/views/shared/_richtext_field.html.erb
@@ -15,7 +15,14 @@
       <div id="<%= id %>_edit" class="tab-pane show active">
         <%= builder.text_area(attribute, options.merge(:wrapper => false, "data-preview-url" => preview_url(:type => type))) %>
       </div>
-      <div id="<%= id %>_preview" class="tab-pane richtext text-break"></div>
+      <div id="<%= id %>_preview" class="tab-pane">
+        <div class="richtext_placeholder text-center py-5" hidden>
+          <div class="spinner-border" role="status">
+            <span class="visually-hidden"><%= t("browse.start_rjs.loading") %></span>
+          </div>
+        </div>
+        <div class="richtext text-break"></div>
+      </div>
       <div id="<%= id %>_help" class="tab-pane">
         <div class="card bg-body-tertiary h-100">
           <div class="card-body">