From c2df4e413e1a6d781dce2e4504af3623f7164e86 Mon Sep 17 00:00:00 2001
From: M-ZubairAhmed <m-zubairahmed@protonmail.com>
Date: Tue, 10 Sep 2024 00:15:14 +0000
Subject: [PATCH] [MM-60284] Desktop app doesnt stop the initial loading
 indicator (#28056)

---
 .../initial_loading_screen_class.ts           | 25 ++++++++++++-------
 1 file changed, 16 insertions(+), 9 deletions(-)

diff --git a/webapp/channels/src/components/initial_loading_screen/initial_loading_screen_class.ts b/webapp/channels/src/components/initial_loading_screen/initial_loading_screen_class.ts
index 64a4ac45c2..4e1f6c9805 100644
--- a/webapp/channels/src/components/initial_loading_screen/initial_loading_screen_class.ts
+++ b/webapp/channels/src/components/initial_loading_screen/initial_loading_screen_class.ts
@@ -26,10 +26,25 @@ export class InitialLoadingScreenClass {
     constructor() {
         this.loadingScreenElement = document.getElementById('initialPageLoadingScreen');
         this.loadingAnimationElement = document.getElementById('initialPageLoadingAnimation');
-
         this.initialLoadingScreenCSS = document.getElementById('initialLoadingScreenCSS') as HTMLLinkElement | null;
 
         this.handleAnimationEndEvent = this.handleAnimationEndEvent.bind(this);
+
+        this.init();
+    }
+
+    private init() {
+        if (isDesktopApp()) {
+            // Let Mattermost desktop handle the loading screen
+            this.destroy();
+            return;
+        }
+
+        this.addAnimationEndListener();
+
+        // Starting automatically in the constructor instead of waiting for call from the code base
+        // as per the latest UX recommendation
+        this.start();
     }
 
     private handleAnimationEndEvent(event: AnimationEvent) {
@@ -88,14 +103,6 @@ export class InitialLoadingScreenClass {
      * If we do want to do that then we should remove the set timeout destroy call doing above.
      */
     public start() {
-        if (isDesktopApp()) {
-            // Let Mattermost desktop handle the loading screen
-            this.destroy();
-            return;
-        }
-
-        this.addAnimationEndListener();
-
         if (!this.loadingScreenElement || !this.loadingAnimationElement) {
             // eslint-disable-next-line no-console
             console.error('InitialLoadingScreen: No loading screen or animation element found');