avatar: show loading animation while deleting profile picture.

This commit displays the loading animation and hides other
avatar options as delete_user_avatar is called and as we get
response from the server, we show the options back and hide
the loading animation.
This commit is contained in:
Signior-X
2021-04-14 01:02:16 +05:30
committed by Tim Abbott
parent 9b645816bf
commit 5b13f99936

View File

@@ -50,6 +50,18 @@ export function build_bot_edit_widget(target) {
); );
} }
function display_avatar_delete_complete() {
$("#user-avatar-upload-widget .upload-spinner-background").css({visibility: "hidden"});
$("#user-avatar-upload-widget .image-upload-text").show();
$("#user-avatar-source").show();
}
function display_avatar_delete_started() {
$("#user-avatar-upload-widget .upload-spinner-background").css({visibility: "visible"});
$("#user-avatar-upload-widget .image-upload-text").hide();
$("#user-avatar-upload-widget .image-delete-button").hide();
}
export function build_user_avatar_widget(upload_function) { export function build_user_avatar_widget(upload_function) {
const get_file_input = function () { const get_file_input = function () {
return $("#user-avatar-upload-widget .image_file_input").expectOne(); return $("#user-avatar-upload-widget .image_file_input").expectOne();
@@ -66,16 +78,21 @@ export function build_user_avatar_widget(upload_function) {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
function delete_user_avatar() { function delete_user_avatar() {
display_avatar_delete_started();
channel.del({ channel.del({
url: "/json/users/me/avatar", url: "/json/users/me/avatar",
success() { success() {
$("#user-avatar-upload-widget .image-delete-button").hide(); display_avatar_delete_complete();
$("#user-avatar-source").show();
// Need to clear input because of a small edge case // Need to clear input because of a small edge case
// where you try to upload the same image you just deleted. // where you try to upload the same image you just deleted.
get_file_input().val(""); get_file_input().val("");
// Rest of the work is done via the user_events -> avatar_url event we will get // Rest of the work is done via the user_events -> avatar_url event we will get
}, },
error() {
display_avatar_delete_complete();
$("#user-avatar-upload-widget .image-delete-button").show();
},
}); });
} }
const modal_parent = $("#account-settings"); const modal_parent = $("#account-settings");