elsa-workflows · FransVanEk · Jan 21, 2026 · Jan 21, 2026 · Jan 21, 2026 · Jan 21, 2026
diff --git a/src/framework/Elsa.Studio.Shared/Components/AppBar/LogoutButton.razor b/src/framework/Elsa.Studio.Shared/Components/AppBar/LogoutButton.razor
@@ -0,0 +1 @@
+<MudIconButton Icon="@Icons.Material.Outlined.Logout" Color="Color.Inherit" Href="/login" Target="_self" Title="Logout"/>
diff --git a/src/framework/Elsa.Studio.Shared/Layouts/MainLayout.razor.cs b/src/framework/Elsa.Studio.Shared/Layouts/MainLayout.razor.cs
@@ -38,6 +38,7 @@ protected override void OnInitialized()
         if (BrandingProvider.AppBarIcons.ShowGitHubLink) AppBarService.AddComponent<GitHub>(15);
         AppBarService.AddComponent<DarkModeToggle>(20);
         AppBarService.AddComponent<ProductInfo>(25);
+        AppBarService.AddComponent<LogoutButton>(99);
 
         ThemeService.CurrentThemeChanged += OnThemeChanged;
         ThemeService.IsDarkModeChanged += OnDarkModeChanged;

diff --git a/src/framework/Elsa.Studio.Shell/App.razor b/src/framework/Elsa.Studio.Shell/App.razor
@@ -1,14 +1,19 @@
 @inherits StudioComponentBase
+@inject IJSRuntime JSRuntime
+
 <Router AppAssembly="@typeof(App).Assembly" AdditionalAssemblies="@AdditionalAssemblies">
     <Found Context="routeData">
         @if (!AuthorizationIsDisabled)
         {
             <CascadingAuthenticationState>
                 <AuthorizeRouteView RouteData="routeData" DefaultLayout="@typeof(MainLayout)">
                     <Authorizing>
-                        <Well>
-                            <MudText Typo="Typo.body2">Authorizing</MudText>
-                        </Well>
+                        <div style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #f5f5f5; display: flex; justify-content: center; align-items: center; z-index: 9998;">
+                            <div style="text-align: center;">
+                                <div style="width: 40px; height: 40px; border: 4px solid #e0e0e0; border-top: 4px solid #1976d2; border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 20px;"></div>
+                                <MudText Typo="Typo.body1">Checking authentication...</MudText>
+                            </div>
+                        </div>
                     </Authorizing>
                     <NotAuthorized>
                         @UnauthorizedComponentProvider.GetUnauthorizedComponent()
@@ -30,3 +35,32 @@
         </LayoutView>
     </NotFound>
 </Router>
+
+<style>
+    @@keyframes spin {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+    }
+</style>
+
+@code {
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            // Hide the initial loading screen after the first render
+            try
+            {
+                await Task.Delay(300); // Small delay to ensure smooth transition
+
+                // Try both Server and WASM hiding functions (one will work, one will be ignored)
+                await JSRuntime.InvokeVoidAsync("hideAuthLoading");  // Server
+                await JSRuntime.InvokeVoidAsync("hideWasmLoading");   // WASM
+            }
+            catch (Exception ex)
+            {
+                Console.WriteLine($"Failed to call loading screen hide functions: {ex.Message}");
+            }
+        }
+    }
+}
diff --git a/src/framework/Elsa.Studio.Shell/Components/AuthenticationWrapper.razor b/src/framework/Elsa.Studio.Shell/Components/AuthenticationWrapper.razor
diff --git a/src/hosts/Elsa.Studio.Host.HostedWasm/Pages/_Host.cshtml b/src/hosts/Elsa.Studio.Host.HostedWasm/Pages/_Host.cshtml
@@ -1,4 +1,4 @@
-@page "/"
+        @page "/"
 @using Elsa.Studio.Branding
 @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
 @inject IConfiguration Configuration;
@@ -18,7 +18,7 @@
 <head>
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
-    <title>Elsa Studio 3</title>
+    <title>Elsa Studio</title>
     <base href="@baseRef"/>
     <link rel="apple-touch-icon" sizes="180x180" href="@BrandingProvider.AppleTouchIconUrl">
     <link rel="icon" type="image/png" sizes="32x32" href="@BrandingProvider.Favicon32Url">
@@ -31,45 +31,122 @@
 </head>
 
 <body>
-<div id="app">
-    <div class="loading-splash mud-container mud-container-maxwidth-false">
-        <h5 class="mud-typography mud-typography-h5 mud-primary-text my-6">Loading...</h5>
+
+<!-- Initial loading screen for HostedWasm -->
+<div id="hosted-wasm-loading" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #f5f5f5; display: flex; justify-content: center; align-items: center; z-index: 9999;">
+    <div style="text-align: center;">
+        <div style="width: 40px; height: 40px; border: 4px solid #e0e0e0; border-top: 4px solid #1976d2; border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 20px;"></div>
+        <div id="hosted-loading-text" style="color: #666; font-family: 'Roboto', sans-serif;">Initializing...</div>
     </div>
 </div>
 
+<div id="app"></div>
+
 <div id="blazor-error-ui">
     An unhandled error has occurred.
     <a href="" class="reload">Reload</a>
     <a class="dismiss">🗙</a>
 </div>
+
+<style>
+    @@keyframes spin {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+    }
+
+    .blazor-ready #hosted-wasm-loading {
+        display: none !important;
+    }
+</style>
+
 <script src="_content/BlazorMonaco/jsInterop.js"></script>
 <script src="_content/BlazorMonaco/lib/monaco-editor/min/vs/loader.js"></script>
 <script src="_content/BlazorMonaco/lib/monaco-editor/min/vs/editor/editor.main.js"></script>
 <script src="_content/MudBlazor/MudBlazor.min.js"></script>
 <script src="_content/CodeBeam.MudBlazor.Extensions/MudExtensions.min.js"></script>
 <script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script>
+
 <script>
     window.getClientConfig = function() { return {
         "apiUrl": "@apiUrl"
      } };
 </script>
+
 <script src="_framework/blazor.webassembly.js" autostart="false"></script>
 
-<script type="application/javascript">
-    document.addEventListener('DOMContentLoaded', function () {
-        Blazor.start({
-            loadBootResource: function (type, name, defaultUri, integrity) {
-                if (defaultUri.startsWith('http'))
-                    return defaultUri;
+<script>
+    let hostedWasmLoadingHidden = false;
+    let blazorStartAttempted = false;
+
+    function hideHostedWasmLoadingScreen() {
+        if (!hostedWasmLoadingHidden) {
+            hostedWasmLoadingHidden = true;
+            document.body.classList.add('blazor-ready');
+        }
+    }
 
-                if (!defaultUri.startsWith('/'))
-                    return `/${defaultUri}`;
+    function updateHostedLoadingText(text) {
+        const loadingTextEl = document.getElementById('hosted-loading-text');
+        if (loadingTextEl) {
+            loadingTextEl.textContent = text;
+        }
+    }
 
-                return defaultUri;
-            }
-        });
+    // Expose functions for Blazor components
+    window.hideAuthLoading = function () {
+        hideHostedWasmLoadingScreen();
+    };
+
+    window.hideWasmLoading = function () {
+        hideHostedWasmLoadingScreen();
+    };
+
+    window.updateLoadingStatus = function (status) {
+        updateHostedLoadingText(status);
+    };
+
+    // Initialize Blazor with custom configuration
+    function initializeBlazor() {
+        if (!blazorStartAttempted) {
+            blazorStartAttempted = true;
+            updateHostedLoadingText('Starting Blazor WASM...');
+
+            Blazor.start({
+                loadBootResource: function (type, name, defaultUri, integrity) {
+                    if (defaultUri.startsWith('http'))
+                        return defaultUri;
+
+                    if (!defaultUri.startsWith('/'))
+                        return `/${defaultUri}`;
+
+                    return defaultUri;
+                }
+            }).then(() => {
+                updateHostedLoadingText('Loading application...');
+            }).catch((error) => {
+                if (error.message && error.message.includes('already started')) {
+                    setTimeout(hideHostedWasmLoadingScreen, 100);
+                } else {
+                    updateHostedLoadingText('Startup failed');
+                    setTimeout(hideHostedWasmLoadingScreen, 2000);
+                }
+            });
+        }
+    }
+
+    // Initialize when DOM is ready
+    document.addEventListener('DOMContentLoaded', function () {
+        initializeBlazor();
     });
+
+    // Safety timeout
+    setTimeout(() => {
+        if (!hostedWasmLoadingHidden) {
+            hideHostedWasmLoadingScreen();
+        }
+    }, 5000);
 </script>
+
 </body>
 
 </html>
diff --git a/src/hosts/Elsa.Studio.Host.Server/Pages/_Host.cshtml b/src/hosts/Elsa.Studio.Host.Server/Pages/_Host.cshtml
@@ -2,50 +2,83 @@
 @using Elsa.Studio.Branding
 @using Elsa.Studio.Shell
 @using Microsoft.AspNetCore.Components.Web
+@using Microsoft.AspNetCore.Authorization
 @namespace Elsa.Studio.Host.Server.Pages
 @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
 @inject IBrandingProvider BrandingProvider
+@attribute [AllowAnonymous]
 
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-    <base href="~/"/>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <base href="~/" />
     <title>Elsa Studio</title>
     <link rel="apple-touch-icon" sizes="180x180" href="@BrandingProvider.AppleTouchIconUrl">
     <link rel="icon" type="image/png" sizes="32x32" href="@BrandingProvider.Favicon32Url">
     <link rel="icon" type="image/png" sizes="16x16" href="@BrandingProvider.Favicon16Url">
     <link rel="manifest" href="_content/Elsa.Studio.Shell/site.webmanifest">
-    <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet"/>
-    <link href="_content/CodeBeam.MudBlazor.Extensions/MudExtensions.min.css" rel="stylesheet"/>
+    <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
+    <link href="_content/CodeBeam.MudBlazor.Extensions/MudExtensions.min.css" rel="stylesheet" />
     <link href="_content/Radzen.Blazor/css/material-base.css" rel="stylesheet">
     <link href="_content/Elsa.Studio.Shell/css/shell.css" rel="stylesheet">
     <link href="_content/Elsa.Studio.Workflows.Designer/designer.css" rel="stylesheet">
-
-    @* Use designer.v1.css for the old designer (and comment out the previous designer.css style reference).*@
-    @* <link href="_content/Elsa.Studio.Workflows.Designer/designer.css" rel="stylesheet"> *@
-    <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered"/>
+
+    <component type="typeof(HeadOutlet)" render-mode="Server" />
 </head>
 <body>
-<component type="typeof(App)" render-mode="ServerPrerendered" />
-
-<div id="blazor-error-ui">
-    <environment include="Staging,Production">
-        An error has occurred. This application may no longer respond until reloaded.
-    </environment>
-    <environment include="Development">
-        An unhandled exception has occurred. See browser dev tools for details.
-    </environment>
-    <a href="" class="reload">Reload</a>
-    <a class="dismiss">🗙</a>
-</div>
-<script src="_content/BlazorMonaco/jsInterop.js"></script>
-<script src="_content/BlazorMonaco/lib/monaco-editor/min/vs/loader.js"></script>
-<script src="_content/BlazorMonaco/lib/monaco-editor/min/vs/editor/editor.main.js"></script>
-<script src="_content/MudBlazor/MudBlazor.min.js"></script>
-<script src="_content/CodeBeam.MudBlazor.Extensions/MudExtensions.min.js"></script>
-<script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script>
-<script src="_framework/blazor.server.js"></script>
+
+    @* Show loading screen initially *@
+    <div id="auth-loading" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #f5f5f5; display: flex; justify-content: center; align-items: center; z-index: 9999;">
+        <div style="text-align: center;">
+            <div style="width: 40px; height: 40px; border: 4px solid #e0e0e0; border-top: 4px solid #1976d2; border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 20px;"></div>
+            <div style="color: #666; font-family: 'Roboto', sans-serif;">Initializing...</div>
+        </div>
+    </div>
+
+    <component type="typeof(App)" render-mode="Server" />
+
+    <div id="blazor-error-ui">
+        <environment include="Staging,Production">
+            An error has occurred. This application may no longer respond until reloaded.
+        </environment>
+        <environment include="Development">
+            An unhandled exception has occurred. See browser dev tools for details.
+        </environment>
+        <a href="" class="reload">Reload</a>
+        <a class="dismiss">🗙</a>
+    </div>
+
+    <style>
+        @@keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+
+        .blazor-ready #auth-loading {
+            display: none !important;
+        }
+    </style>
+
+    <script src="_content/BlazorMonaco/jsInterop.js"></script>
+    <script src="_content/BlazorMonaco/lib/monaco-editor/min/vs/loader.js"></script>
+    <script src="_content/BlazorMonaco/lib/monaco-editor/min/vs/editor/editor.main.js"></script>
+    <script src="_content/MudBlazor/MudBlazor.min.js"></script>
+    <script src="_content/CodeBeam.MudBlazor.Extensions/MudExtensions.min.js"></script>
+    <script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script>
+    <script src="_framework/blazor.server.js"></script>
+
+    <script>
+        window.hideAuthLoading = function() {
+            document.body.classList.add('blazor-ready');
+        };
+
+        // Fallback: Hide after maximum wait time
+        setTimeout(function() {
+            window.hideAuthLoading();
+        }, 10000); // 10 second maximum wait
+    </script>
+
 </body>
 </html>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<MudIconButton Icon="@Icons.Material.Outlined.Logout" Color="Color.Inherit" Href="/login" Target="_self" Title="Logout"/>