settings: Show a tick inside of add button on click.

We want the input field to retain
the same width even when
Add button shrinks, when we
show a check icon.

This solution involves layering
of the check and `Add` button
and toggling visibility.

Karl's coment: https://chat.zulip.org/#narrow/channel/6-frontend/topic/.2334347.20rework.20subscribe.20users.20confirmations/near/2206344.

Related: https://github.com/zulip/zulip/pull/34912#issuecomment-3010269391.

Reference:
https://chat.zulip.org/#narrow/channel/6-frontend/topic/.2334347.20rework.20subscribe.20users.20confirmations/with/2193352.
Co-authored-by: Rajeev Tapadia <108951750+rajeevtapadia@users.noreply.github.com>
Co-authored-by: Maneesh Shukla <shuklamaneesh24@gmail.com>
Co-authored-by: Karl Stolley <karl@zulip.com>
Signed-off-by: apoorvapendse <apoorvavpendse@gmail.com>

web/src/stream_edit_subscribers.ts

@@ -335,6 +335,17 @@ function subscribe_new_users({pill_user_ids}: {pill_user_ids: number[]}): void {
             people.get_by_user_id(Number(user_id)),
         );
 
+        const $pill_widget_button_wrapper = $(".add_subscriber_button_wrapper");
+        const $check_icon = $pill_widget_button_wrapper.find(".check");
+        const $add_subscriber_button = $pill_widget_button_wrapper.find(".add-subscriber-button");
+
+        $check_icon.removeClass("hidden-below");
+        $add_subscriber_button.addClass("hidden-below");
+        setTimeout(() => {
+            $check_icon.addClass("hidden-below");
+            $add_subscriber_button.removeClass("hidden-below");
+        }, 1000);
+
         show_stream_subscription_request_success_result({
             subscribed_users,
             already_subscribed_users,

web/src/user_group_edit_members.ts

@@ -351,6 +351,17 @@ function add_new_members({
     const subgroup_ids = [...subgroup_id_set];
 
     function invite_success(): void {
+        const $pill_widget_button_wrapper = $(".add_member_button_wrapper");
+        const $check_icon = $pill_widget_button_wrapper.find(".check");
+        const $add_member_button = $pill_widget_button_wrapper.find(".add-member-button");
+
+        $check_icon.removeClass("hidden-below");
+        $add_member_button.addClass("hidden-below");
+        setTimeout(() => {
+            $check_icon.addClass("hidden-below");
+            $add_member_button.removeClass("hidden-below");
+        }, 1000);
+
         pill_widget.clear();
         show_user_group_membership_request_result({
             message: $t({defaultMessage: "Added successfully."}),

web/styles/subscriptions.css

@@ -292,6 +292,31 @@ h4.user_group_setting_subsection_title {
     }
 }
 
+.add_subscriber_button_wrapper,
+.add_member_button_wrapper {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr;
+    place-items: center;
+
+    .check,
+    .add-subscriber-button,
+    .add-member-button {
+        grid-column: 1 / 2;
+        grid-row: 1 / 2;
+        z-index: 1;
+        visibility: visible;
+        max-height: 1.75em;
+        width: 100%;
+        position: relative;
+
+        &.hidden-below {
+            visibility: hidden;
+            z-index: -1;
+        }
+    }
+}
+
 .add_subscribers_container .add_subscriber_button_wrapper,
 .add_members_container .add_member_button_wrapper {
     padding-left: 5px;

web/templates/stream_settings/add_subscribers_form.hbs

@@ -14,6 +14,13 @@
               intent="brand"
               type="submit"
               }}
+
+            {{> ../components/icon_button
+              icon="check"
+              intent="success"
+              custom_classes="check hidden-below"
+              disabled=true
+              }}
         </div>
     {{/if}}
 </div>

web/templates/user_group_settings/add_members_form.hbs

@@ -15,6 +15,12 @@
               intent="brand"
               type="submit"
               }}
+            {{> ../components/icon_button
+              icon="check"
+              intent="success"
+              custom_classes="check hidden-below"
+              disabled=true
+              }}
         </div>
     {{/if}}
 </div>