Reduce the payload of notifications changes
Summary
There is a lot of unnecessary html payload when you change your notification settings (inside your profile settings).
Steps to reproduce
- Open console, networking tab
- Go to your Notifications - Profile Settings
- Toggle your notification settings for one of your projects or groups
- Notice how the POST request of your notifications changes is 4.2kb and most of the response is the same html as what is already rendered on your screen
Expected behavior
{"saved":true}
Relevant logs and/or screenshots
Current Payload
{"html":"\u003cdiv class=\"dropdown notification-dropdown pull-right\"\u003e\n\u003cform class=\"inline notification-form\" id=\"edit_notification_setting_1\" action=\"/notification_settings/1\" accept-charset=\"UTF-8\" data-remote=\"true\" method=\"post\"\u003e\u003cinput name=\"utf8\" type=\"hidden\" value=\"\u0026#x2713;\" /\u003e\u003cinput type=\"hidden\" name=\"_method\" value=\"patch\" /\u003e\u003cinput type=\"hidden\" name=\"namespace_id\" id=\"namespace_id\" value=\"2\" /\u003e\n\u003cinput class=\"notification_setting_level\" type=\"hidden\" value=\"watch\" name=\"notification_setting[level]\" id=\"notification_setting_level\" /\u003e\n\u003cdiv class=\"js-notification-toggle-btns\"\u003e\n\u003cdiv class=\"\"\u003e\n\u003cbutton class=\"dropdown-new btn btn-default notifications-btn\" data-target=\"dropdown-1-2-Namespace\" data-toggle=\"dropdown\" id=\"notifications-button\" type=\"button\"\u003e\n\u003ci class=\"fa fa-bell js-notification-loading\"\u003e\u003c/i\u003e\nWatch\n\u003ci class=\"fa fa-caret-down\"\u003e\u003c/i\u003e\n\u003c/button\u003e\n\u003cul class=\"dropdown-1-2-Namespace dropdown-menu dropdown-menu-align-right dropdown-menu-large dropdown-menu-no-wrap dropdown-menu-selectable\" role=\"menu\"\u003e\n\u003cli role=\"menuitem\"\u003e\u003ca class=\"update-notification \" data-notification-level=\"global\" data-notification-title=\"Global\" href=\"#\"\u003e\u003cstrong class=\"dropdown-menu-inner-title\"\u003eGlobal\u003c/strong\u003e\u003cspan class=\"dropdown-menu-inner-content\"\u003eUse your global notification setting\u003c/span\u003e\u003c/a\u003e\u003c/li\u003e\n\u003cli role=\"menuitem\"\u003e\u003ca class=\"update-notification is-active\" data-notification-level=\"watch\" data-notification-title=\"Watch\" href=\"#\"\u003e\u003cstrong class=\"dropdown-menu-inner-title\"\u003eWatch\u003c/strong\u003e\u003cspan class=\"dropdown-menu-inner-content\"\u003eYou will receive notifications for any activity\u003c/span\u003e\u003c/a\u003e\u003c/li\u003e\n\u003cli role=\"menuitem\"\u003e\u003ca class=\"update-notification \" data-notification-level=\"mention\" data-notification-title=\"On mention\" href=\"#\"\u003e\u003cstrong class=\"dropdown-menu-inner-title\"\u003eOn mention\u003c/strong\u003e\u003cspan class=\"dropdown-menu-inner-content\"\u003eYou will receive notifications only for comments in which you were @mentioned\u003c/span\u003e\u003c/a\u003e\u003c/li\u003e\n\u003cli role=\"menuitem\"\u003e\u003ca class=\"update-notification \" data-notification-level=\"participating\" data-notification-title=\"Participate\" href=\"#\"\u003e\u003cstrong class=\"dropdown-menu-inner-title\"\u003eParticipate\u003c/strong\u003e\u003cspan class=\"dropdown-menu-inner-content\"\u003eYou will only receive notifications for threads you have participated in\u003c/span\u003e\u003c/a\u003e\u003c/li\u003e\n\u003cli role=\"menuitem\"\u003e\u003ca class=\"update-notification \" data-notification-level=\"disabled\" data-notification-title=\"Disabled\" href=\"#\"\u003e\u003cstrong class=\"dropdown-menu-inner-title\"\u003eDisabled\u003c/strong\u003e\u003cspan class=\"dropdown-menu-inner-content\"\u003eYou will not get any notifications via email\u003c/span\u003e\u003c/a\u003e\u003c/li\u003e\n\u003cli class=\"divider\"\u003e\u003c/li\u003e\n\u003cli\u003e\n\u003ca class=\"update-notification\" data-notification-level=\"custom\" data-notification-title=\"Custom\" data-target=\"#modal-1-2-Namespace\" data-toggle=\"modal\" href=\"#\" role=\"button\"\u003e\n\u003cstrong class=\"dropdown-menu-inner-title\"\u003eCustom\u003c/strong\u003e\n\u003cspan class=\"dropdown-menu-inner-content\"\u003eYou will only receive notifications for the events you choose\u003c/span\u003e\n\u003c/a\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003c/div\u003e\n\u003c/div\u003e\n\u003c/form\u003e\u003c/div\u003e\n","saved":true}
Possible fixes
Use jQuery to update the UI instead of $(e.currentTarget).closest('.notification-dropdown').replaceWith(data.html);