Refactor script loading to ensure Monaco loads first

Refactored the script loading sequence to guarantee that the Monaco Editor is fully loaded and initialized before other scripts and before the loading screen is hidden. Introduced a monacoReady flag and updated readiness checks and fallback logic accordingly. Removed the unused updateLoadingText function. Increased the fallback timeout to 10 seconds to accommodate Monaco's loading time. These changes improve the reliability and sequencing of script dependencies during application startup.

Author: FransVanEk

src/framework/Elsa.Studio.Shared/wwwroot/js/elsa-studio-loader-server.js

@@ -10,6 +10,7 @@
     let loadingHidden = false;
     let blazorReady = false;
     let initialRenderComplete = false;
+    let monacoReady = false;
 
     // Load required stylesheets
     function loadStyles() {
@@ -31,25 +32,88 @@
         });
     }
 
-    // Load required scripts
-    function loadScripts() {
+    // Load Monaco Editor first with proper sequencing
+    function loadMonacoEditor() {
+        return new Promise((resolve, reject) => {
+            // First load the Monaco loader
+            const loaderScript = document.createElement('script');
+            loaderScript.src = '_content/BlazorMonaco/lib/monaco-editor/min/vs/loader.js';
+            loaderScript.onload = () => {
+                // Configure RequireJS paths for Monaco
+                if (typeof require !== 'undefined') {
+                    require.config({ 
+                        paths: { 
+                            'vs': '_content/BlazorMonaco/lib/monaco-editor/min/vs' 
+                        } 
+                    });
+                    
+                    // Load Monaco editor main
+                    require(['vs/editor/editor.main'], () => {
+                        console.log('Monaco editor loaded successfully');
+                        monacoReady = true;
+                        resolve();
+                    }, (error) => {
+                        console.error('Failed to load Monaco editor:', error);
+                        reject(error);
+                    });
+                } else {
+                    // Fallback: load editor.main.js directly
+                    const editorScript = document.createElement('script');
+                    editorScript.src = '_content/BlazorMonaco/lib/monaco-editor/min/vs/editor/editor.main.js';
+                    editorScript.onload = () => {
+                        console.log('Monaco editor loaded (fallback method)');
+                        monacoReady = true;
+                        resolve();
+                    };
+                    editorScript.onerror = reject;
+                    document.body.appendChild(editorScript);
+                }
+            };
+            loaderScript.onerror = reject;
+            document.body.appendChild(loaderScript);
+        });
+    }
+
+    // Load remaining scripts after Monaco is ready
+    function loadOtherScripts() {
         const scripts = [
             '_content/BlazorMonaco/jsInterop.js',
-            '_content/BlazorMonaco/lib/monaco-editor/min/vs/loader.js',
-            '_content/BlazorMonaco/lib/monaco-editor/min/vs/editor/editor.main.js',
             '_content/MudBlazor/MudBlazor.min.js',
             '_content/CodeBeam.MudBlazor.Extensions/MudExtensions.min.js',
             '_content/Radzen.Blazor/Radzen.Blazor.js',
             '_framework/blazor.server.js'
         ];
 
-        scripts.forEach(src => {
-            if (!document.querySelector(`script[src="${src}"]`)) {
+        const loadPromises = scripts.map(src => {
+            return new Promise((resolve, reject) => {
+                if (document.querySelector(`script[src="${src}"]`)) {
+                    resolve(); // Already loaded
+                    return;
+                }
+                
                 const script = document.createElement('script');
                 script.src = src;
+                script.onload = resolve;
+                script.onerror = reject;
                 document.body.appendChild(script);
-            }
+            });
         });
+
+        return Promise.all(loadPromises);
+    }
+
+    // Load all scripts in proper sequence
+    async function loadScripts() {
+        try {
+            console.log('Loading Monaco editor...');
+            await loadMonacoEditor();
+            console.log('Loading other scripts...');
+            await loadOtherScripts();
+            console.log('All scripts loaded successfully');
+        } catch (error) {
+            console.error('Script loading failed:', error);
+            // Continue anyway - some features might still work
+        }
     }
 
     // Inject loading screen HTML
@@ -83,14 +147,6 @@
         document.head.insertAdjacentHTML('beforeend', loadingStyle);
     }
 
-    // Update loading text (minimal usage)
-    function updateLoadingText(text) {
-        const loadingTextEl = document.getElementById('elsa-loading-text');
-        if (loadingTextEl) {
-            loadingTextEl.textContent = text;
-        }
-    }
-
     // Hide loading screen when actually ready
     function hideLoadingScreen() {
         if (!loadingHidden) {
@@ -102,16 +158,14 @@
 
     // Check if we should hide loading screen
     function checkReadiness() {
-        if (blazorReady && initialRenderComplete && !loadingHidden) {
+        if (blazorReady && initialRenderComplete && monacoReady && !loadingHidden) {
             hideLoadingScreen();
         }
     }
 
     // Detect when Blazor Server connection is established
     function detectBlazorConnection() {
-        // Check for Blazor global object and connection
         if (typeof window.Blazor !== 'undefined') {
-            // Monitor for SignalR connection
             const originalLog = console.log;
             console.log = function(...args) {
                 const message = args.join(' ');
@@ -123,13 +177,11 @@
             };
         }
 
-        // Check for Blazor Server specific DOM changes
         const observer = new MutationObserver(function(mutations) {
             mutations.forEach(function(mutation) {
                 if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
                     for (let node of mutation.addedNodes) {
                         if (node.nodeType === Node.ELEMENT_NODE) {
-                            // Check for Blazor component markers
                             if (node.hasAttribute && (
                                 node.hasAttribute('_bl_') || 
                                 node.querySelector && node.querySelector('[_bl_]') ||
@@ -152,7 +204,6 @@
             attributes: true 
         });
 
-        // Stop observing after readiness is detected
         setTimeout(() => {
             if (blazorReady || loadingHidden) {
                 observer.disconnect();
@@ -162,7 +213,6 @@
 
     // Detect when initial render is complete
     function detectRenderCompletion() {
-        // Check for common Blazor/MudBlazor elements
         function checkForMainContent() {
             const indicators = [
                 '.mud-main-content',
@@ -184,7 +234,6 @@
             return false;
         }
 
-        // Use requestAnimationFrame to detect when rendering settles
         let frameCount = 0;
         let lastBodyHeight = 0;
         let stableFrames = 0;
@@ -195,7 +244,7 @@
 
             if (currentHeight === lastBodyHeight && currentHeight > 100) {
                 stableFrames++;
-                if (stableFrames >= 5) { // 5 stable frames
+                if (stableFrames >= 5) {
                     if (!initialRenderComplete && checkForMainContent()) {
                         return;
                     } else if (!initialRenderComplete && frameCount > 30) {
@@ -212,16 +261,13 @@
             if (frameCount < 100 && !initialRenderComplete) {
                 requestAnimationFrame(checkRenderStability);
             } else if (!initialRenderComplete) {
-                // Fallback after 100 frames
                 initialRenderComplete = true;
                 checkReadiness();
             }
         }
 
-        // Start checking on next frame
         requestAnimationFrame(checkRenderStability);
 
-        // Also check periodically
         const intervalCheck = setInterval(() => {
             if (checkForMainContent()) {
                 clearInterval(intervalCheck);
@@ -233,29 +279,32 @@
 
     // Enhanced Blazor Server initialization
     function initializeBlazorServer(maxWaitMs) {
-        maxWaitMs = maxWaitMs || 8000; // Fallback timeout
+        maxWaitMs = maxWaitMs || 8000;
 
-        // Start detection methods
         setTimeout(() => detectBlazorConnection(), 100);
         setTimeout(() => detectRenderCompletion(), 500);
 
-        // Ultimate fallback timeout
         setTimeout(function() {
             if (!loadingHidden) {
                 console.warn('Fallback timeout reached - forcing loading screen to hide');
                 blazorReady = true;
                 initialRenderComplete = true;
+                monacoReady = true; // Force ready on timeout
                 hideLoadingScreen();
             }
         }, maxWaitMs);
     }
 
-    // Initialize everything
-    function initialize() {
+    // Initialize everything with proper sequencing
+    async function initialize() {
+        console.log('Starting Elsa Studio initialization...');
         loadStyles();
         injectLoadingScreen();
-        loadScripts();
-        initializeBlazorServer(8000);
+        
+        // Load scripts asynchronously but track completion
+        loadScripts(); // Don't await - let it load in background
+        
+        initializeBlazorServer(10000); // Give more time for Monaco loading
     }
 
     // Run initialization
@@ -265,13 +314,13 @@
         initialize();
     }
 
-    // Expose API for manual control if needed
+    // Expose API
     window.ElsaStudio = window.ElsaStudio || {};
     window.ElsaStudio.hideLoading = hideLoadingScreen;
-    window.ElsaStudio.updateLoadingText = updateLoadingText;
     window.ElsaStudio.forceReady = function() {
         blazorReady = true;
         initialRenderComplete = true;
+        monacoReady = true;
         checkReadiness();
     };