[MM-60284] Desktop app doesnt stop the initial loading indicator (#28056)

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');