diff --git a/web/src/click_handlers.js b/web/src/click_handlers.js index d40e4ea46a..7fb521eae4 100644 --- a/web/src/click_handlers.js +++ b/web/src/click_handlers.js @@ -401,7 +401,7 @@ export function initialize() { const $recipient_row = $(e.target).closest(".recipient_row"); const message_id = rows.id_for_recipient_row($recipient_row); const topic_name = $(e.target).attr("data-topic-name"); - message_edit.toggle_resolve_topic(message_id, topic_name); + message_edit.toggle_resolve_topic(message_id, topic_name, false, $recipient_row); }); $("body").on("click", ".message_header .on_hover_topic_unresolve", (e) => { @@ -409,7 +409,7 @@ export function initialize() { const $recipient_row = $(e.target).closest(".recipient_row"); const message_id = rows.id_for_recipient_row($recipient_row); const topic_name = $(e.target).attr("data-topic-name"); - message_edit.toggle_resolve_topic(message_id, topic_name); + message_edit.toggle_resolve_topic(message_id, topic_name, false, $recipient_row); }); // Mute topic in a unmuted stream diff --git a/web/src/message_edit.js b/web/src/message_edit.js index 677b93eca5..d3e6f434e3 100644 --- a/web/src/message_edit.js +++ b/web/src/message_edit.js @@ -598,6 +598,14 @@ export function start($row, edit_box_open_callback) { }); } +function show_toggle_resolve_topic_spinner($row) { + const $spinner = $row.find(".toggle_resolve_topic_spinner"); + loading.make_indicator($spinner); + $spinner.css({width: "18px"}); + $row.find(".on_hover_topic_resolve, .on_hover_topic_unresolve").hide(); + $row.find(".toggle_resolve_topic_spinner").show(); +} + function get_resolve_topic_time_limit_error_string(time_limit, time_limit_unit, topic_is_resolved) { if (topic_is_resolved) { if (time_limit_unit === "minute") { @@ -682,7 +690,12 @@ function handle_resolve_topic_failure_due_to_time_limit(topic_is_resolved) { }); } -export function toggle_resolve_topic(message_id, old_topic_name, report_errors_in_global_banner) { +export function toggle_resolve_topic( + message_id, + old_topic_name, + report_errors_in_global_banner, + $row, +) { let new_topic_name; const topic_is_resolved = resolved_topic.is_resolved(old_topic_name); if (topic_is_resolved) { @@ -691,6 +704,10 @@ export function toggle_resolve_topic(message_id, old_topic_name, report_errors_i new_topic_name = resolved_topic.resolve_name(old_topic_name); } + if ($row) { + show_toggle_resolve_topic_spinner($row); + } + const request = { propagate_mode: "change_all", topic: new_topic_name, @@ -701,7 +718,13 @@ export function toggle_resolve_topic(message_id, old_topic_name, report_errors_i channel.patch({ url: "/json/messages/" + message_id, data: request, + success() { + const $spinner = $row.find(".toggle_resolve_topic_spinner"); + loading.destroy_indicator($spinner); + }, error(xhr) { + const $spinner = $row.find(".toggle_resolve_topic_spinner"); + loading.destroy_indicator($spinner); if (xhr.responseJSON) { if (xhr.responseJSON.code === "MOVE_MESSAGES_TIME_LIMIT_EXCEEDED") { handle_resolve_topic_failure_due_to_time_limit(topic_is_resolved); diff --git a/web/styles/zulip.css b/web/styles/zulip.css index 4de8bb5dc1..723464de79 100644 --- a/web/styles/zulip.css +++ b/web/styles/zulip.css @@ -2482,7 +2482,13 @@ div.topic_edit_spinner { vertical-align: middle; } -div.topic_edit_spinner .loading_indicator_spinner { +div.toggle_resolve_topic_spinner { + margin-top: -12px; + padding-left: 9px; +} + +div.topic_edit_spinner .loading_indicator_spinner, +div.toggle_resolve_topic_spinner .loading_indicator_spinner { width: 14px; height: 14px; diff --git a/web/templates/recipient_row.hbs b/web/templates/recipient_row.hbs index 1b4b49ec69..2d79c11604 100644 --- a/web/templates/recipient_row.hbs +++ b/web/templates/recipient_row.hbs @@ -55,6 +55,7 @@ {{else}} {{/if}} +
{{/if}} {{#if development}}