FEATURE: Add a CSS class to the HTML element on background connection error (#10991)

FEATURE: Add a CSS class to the HTML element on background connection error (#10991)

This is a way to detect that Discourse isn’t able to receive online updates from the server, and will be used to trigger an UI warning to the user that the session is working on offline mode.

Meta request https://meta.discourse.org/t/offline-indicator/123000?u=falco

diff --git a/app/assets/javascripts/discourse/app/initializers/message-bus.js b/app/assets/javascripts/discourse/app/initializers/message-bus.js
index f5dcf26..5f44db1 100644
--- a/app/assets/javascripts/discourse/app/initializers/message-bus.js
+++ b/app/assets/javascripts/discourse/app/initializers/message-bus.js
@@ -5,6 +5,15 @@ import { handleLogoff } from "discourse/lib/ajax";
 import { isProduction, isTesting } from "discourse-common/config/environment";
 
 const LONG_POLL_AFTER_UNSEEN_TIME = 1200000; // 20 minutes
+const CONNECTIVITY_ERROR_CLASS = "message-bus-offline";
+
+function updateConnectivityIndicator(stat) {
+  if (stat === "error") {
+    document.documentElement.classList.add(CONNECTIVITY_ERROR_CLASS);
+  } else {
+    document.documentElement.classList.remove(CONNECTIVITY_ERROR_CLASS);
+  }
+}
 
 function ajax(opts) {
   if (opts.complete) {
@@ -12,6 +21,7 @@ function ajax(opts) {
     opts.complete = function (xhr, stat) {
       handleLogoff(xhr);
       oldComplete(xhr, stat);
+      updateConnectivityIndicator(stat);
     };
   } else {
     opts.complete = handleLogoff;

GitHub sha: ec35b353

This commit appears in #10991 which was approved by pmusaraj. It was merged by SamSaffron.