cst1/openstreetmap-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Show spinner using delayed css animation in richtext preview

Browse source
This commit is contained in:
Anton Khorev 2024-11-13 15:05:20 +03:00
parent 6042632806
commit 9fded02450
2 changed files with 15 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

9
app/assets/javascripts/richtext.js
View file

@ -8,7 +8,7 @@
var container = $(this).closest(".richtext_container"); var container = $(this).closest(".richtext_container");
var preview = container.find(".tab-pane[id$='_preview']"); 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(); preview.children(".richtext").empty();
}); });
@ -34,13 +34,10 @@
var preview = container.find(".tab-pane[id$='_preview']"); var preview = container.find(".tab-pane[id$='_preview']");
if (preview.children(".richtext").contents().length === 0) { if (preview.children(".richtext").contents().length === 0) {
preview.oneTime(200, "loading", function () { preview.children(".richtext_placeholder").removeAttr("hidden").addClass("delayed-fade-in");
preview.children(".richtext_placeholder").removeAttr("hidden");
});
preview.children(".richtext").load(editor.data("previewUrl"), { text: editor.val() }, function () { preview.children(".richtext").load(editor.data("previewUrl"), { text: editor.val() }, function () {
preview.stopTime("loading"); preview.children(".richtext_placeholder").attr("hidden", true).removeClass("delayed-fade-in");
preview.children(".richtext_placeholder").attr("hidden", true);
}); });
} }
}); });

12
app/assets/stylesheets/common.scss
View file

@ -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 */ /* Rules for the header */
#menu-icon { #menu-icon {