mirror of
				https://github.com/zulip/zulip.git
				synced 2025-11-04 05:53:43 +00:00 
			
		
		
		
	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:
		@@ -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");
 | 
				
			||||||
 
 | 
				
			|||||||
		Reference in New Issue
	
	Block a user