theme: Change recipient bar color and theme in the same paint.

`update_recipient_bar_background_color` changes in a paint
after change in theme without using `requestAnimationFrame` to
make sure they happen in the same paint..

Replaced `setTimeout` with `requestAnimationFrame` in
`server_events_dispatch` since `requestAnimationFrame` already
ensures that they happen in the next paint, assuming that was the
intention of `setTimeout` being preset there.

web/src/click_handlers.js

@@ -847,16 +847,20 @@ export function initialize() {
     $("body").on("click", "#gear-menu .dark-theme", (e) => {
         // Allow propagation to close gear menu.
         e.preventDefault();
+        requestAnimationFrame(() => {
             dark_theme.enable();
             message_lists.update_recipient_bar_background_color();
         });
+    });
 
     $("body").on("click", "#gear-menu .light-theme", (e) => {
         // Allow propagation to close gear menu.
         e.preventDefault();
+        requestAnimationFrame(() => {
             dark_theme.disable();
             message_lists.update_recipient_bar_background_color();
         });
+    });
 
     $("body").on("click", "#header-container .brand", (e) => {
         e.preventDefault();

web/src/server_events_dispatch.js

@@ -746,7 +746,7 @@ export function dispatch_normal_event(event) {
                 unread_ui.update_unread_banner();
             }
             if (event.property === "color_scheme") {
-                setTimeout(() => {
+                requestAnimationFrame(() => {
                     if (event.value === settings_config.color_scheme_values.night.code) {
                         dark_theme.enable();
                         realm_logo.render();
@@ -758,7 +758,7 @@ export function dispatch_normal_event(event) {
                         realm_logo.render();
                     }
                     message_lists.update_recipient_bar_background_color();
-                }, 300);
+                });
             }
             if (event.property === "starred_message_counts") {
                 starred_messages_ui.rerender_ui();

web/src/zcommand.js

@@ -61,8 +61,10 @@ export function switch_to_light_theme() {
     send({
         command: "/day",
         on_success(data) {
+            requestAnimationFrame(() => {
                 dark_theme.disable();
                 message_lists.update_recipient_bar_background_color();
+            });
             feedback_widget.show({
                 populate($container) {
                     const rendered_msg = markdown.parse_non_message(data.msg);
@@ -84,8 +86,10 @@ export function switch_to_dark_theme() {
     send({
         command: "/night",
         on_success(data) {
+            requestAnimationFrame(() => {
                 dark_theme.enable();
                 message_lists.update_recipient_bar_background_color();
+            });
             feedback_widget.show({
                 populate($container) {
                     const rendered_msg = markdown.parse_non_message(data.msg);

web/tests/dispatch.test.js

@@ -17,7 +17,7 @@ const test_message = events.test_message;
 const test_user = events.test_user;
 const typing_person1 = events.typing_person1;
 
-set_global("setTimeout", (func) => func());
+set_global("requestAnimationFrame", (func) => func());
 
 const activity = mock_esm("../src/activity");
 const alert_words_ui = mock_esm("../src/alert_words_ui");