MM-58025 Resolved automatic tz not reflecting without refresh by listening to app visibility event (#26957)

* updated timeZone by listening to app visibility event

* eslint fixes

* linting issues

* linting issues

---------

Co-authored-by: fasal <fasal>

webapp/channels/src/components/logged_in/logged_in.tsx

@@ -65,11 +65,14 @@ export default class LoggedIn extends React.PureComponent<Props> {
         // Initialize websocket
         WebSocketActions.initialize();
 
-        this.props.actions.autoUpdateTimezone(getBrowserTimezone());
+        this.updateTimeZone();
 
         // Make sure the websockets close and reset version
         window.addEventListener('beforeunload', this.handleBeforeUnload);
 
+        // listen for the app visibility state
+        window.addEventListener('visibilitychange', this.handleVisibilityChange, false);
+
         // Listen for focused tab/window state
         window.addEventListener('focus', this.onFocusListener);
         window.addEventListener('blur', this.onBlurListener);
@@ -140,6 +143,16 @@ export default class LoggedIn extends React.PureComponent<Props> {
         return this.props.children;
     }
 
+    private handleVisibilityChange = (): void => {
+        if (!document.hidden) {
+            this.updateTimeZone();
+        }
+    };
+
+    private updateTimeZone(): void {
+        this.props.actions.autoUpdateTimezone(getBrowserTimezone());
+    }
+
     private onFocusListener(): void {
         GlobalActions.emitBrowserFocus(true);
     }