diff --git a/static/js/typing_events.js b/static/js/typing_events.js index a95ca1b6652e48..264fe9af2b00fa 100644 --- a/static/js/typing_events.js +++ b/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( + "
  • Several people are typing...
  • ", + ); + } $("#typing_notifications").show(); } }