settings: Add a saving-saved indicator to the 'SETTINGS/TOPICS' UI.

This commit adds a 'saving...' - 'saved' indicator to the
'SETTINGS/TOPICS' UI.

This improves the UX by reflecting that the changes are saved.

web/src/settings_user_topics.js

@@ -69,7 +69,14 @@ export function set_up() {
 
         e.stopPropagation();
 
-        user_topics.set_user_topic_visibility_policy(stream_id, topic, visibility_policy);
+        user_topics.set_user_topic_visibility_policy(
+            stream_id,
+            topic,
+            visibility_policy,
+            false,
+            false,
+            $row.closest("#user-topic-settings").find(".alert-notification"),
+        );
     });
 
     populate_list();

web/src/user_topics.js

@@ -1,3 +1,5 @@
+import $ from "jquery";
+
 import render_topic_muted from "../templates/topic_muted.hbs";
 
 import * as blueslip from "./blueslip";
@@ -6,9 +8,12 @@ import * as compose_banner from "./compose_banner";
 import * as feedback_widget from "./feedback_widget";
 import {FoldDict} from "./fold_dict";
 import {$t} from "./i18n";
+import * as loading from "./loading";
 import {page_params} from "./page_params";
+import * as settings_ui from "./settings_ui";
 import * as sub_store from "./sub_store";
 import * as timerender from "./timerender";
+import * as ui_report from "./ui_report";
 import {get_time_from_date_muted} from "./util";
 
 const all_user_topics = new Map();
@@ -86,6 +91,7 @@ export function set_user_topic_visibility_policy(
     visibility_policy,
     from_hotkey,
     from_banner,
+    status_element,
 ) {
     const data = {
         stream_id,
@@ -93,10 +99,27 @@ export function set_user_topic_visibility_policy(
         visibility_policy,
     };
 
+    let $spinner;
+    if (status_element) {
+        $spinner = $(status_element).expectOne();
+        $spinner.fadeTo(0, 1);
+        loading.make_indicator($spinner, {text: settings_ui.strings.saving});
+    }
+
     channel.post({
         url: "/json/user_topics",
         data,
         success() {
+            if (status_element) {
+                const remove_after = 1000;
+                const appear_after = 500;
+                setTimeout(() => {
+                    ui_report.success(settings_ui.strings.success_html, $spinner, remove_after);
+                    settings_ui.display_checkmark($spinner);
+                }, appear_after);
+                return;
+            }
+
             if (visibility_policy === all_visibility_policies.INHERIT) {
                 feedback_widget.dismiss();
                 return;

web/templates/settings/user_topics_settings.hbs

@@ -22,6 +22,7 @@
         {{else}}
             <h3>{{t "Topic settings"}}</h3>
         {{/if}}
+        {{> settings_save_discard_widget section_name="user-topics-settings" show_only_indicator=true }}
         <input id="user_topics_search" class="search filter_text_input" type="text" placeholder="{{t 'Filter topics' }}" aria-label="{{t 'Filter topics' }}"/>
     </div>
     <div class="progressive-table-wrapper" data-simplebar>

web/tests/settings_user_topics.test.js

@@ -67,6 +67,18 @@ run_test("settings", ({override, override_rewire}) => {
         assert.equal(opts, "tr");
         return $topic_tr_html;
     };
+    const $topics_panel_header = $.create("fake.topic_panel_header").attr(
+        "id",
+        "user-topic-settings",
+    );
+    const $status_element = $.create("fake.topics_panel_status_element").addClass(
+        "alert-notification",
+    );
+    $topics_panel_header.set_find_results(".alert-notification", $status_element);
+    $topic_tr_html.closest = (opts) => {
+        assert.equal(opts, "#user-topic-settings");
+        return $topics_panel_header;
+    };
 
     let topic_data_called = 0;
     $topic_tr_html.attr = (opts) => {