typing: Display several people are typing...

Displays "Several people are typing..." when more than 3 users
are typing to avoid typing notifications in streams being too noisy.

static/js/typing_events.js

@@ -18,6 +18,10 @@ import * as typing_data from "./typing_data";
 // and expire its typing status
 const TYPING_STARTED_EXPIRY_PERIOD = 15000; // 15s
 
+// If number of users typing exceed this,
+// we render "Several people are typing..."
+const MAX_USERS_TO_DISPLAY_NAME = 3;
+
 // Note!: There are also timing constants in typing_status.js
 // that make typing indicators work.
 
@@ -53,10 +57,18 @@ function get_users_typing_for_narrow() {
 export function render_notifications_for_narrow() {
     const user_ids = get_users_typing_for_narrow();
     const users_typing = user_ids.map((user_id) => people.get_by_user_id(user_id));
-    if (users_typing.length === 0) {
+    const num_of_users_typing = users_typing.length;
+
+    if (num_of_users_typing === 0) {
         $("#typing_notifications").hide();
     } else {
-        $("#typing_notifications").html(render_typing_notifications({users: users_typing}));
+        if (num_of_users_typing <= MAX_USERS_TO_DISPLAY_NAME) {
+            $("#typing_notifications").html(render_typing_notifications({users: users_typing}));
+        } else {
+            $("#typing_notifications").html(
+                "<li class='typing_notification'>Several people are typing...</li>",
+            );
+        }
         $("#typing_notifications").show();
     }
 }