Conversation
- Introduce a custom authentication loading overlay with spinner for improved user experience during auth checks. (server not wasm) - Add LogoutButton component to app bar, linking to /login. - Refactor App.razor to use AuthenticationWrapper and custom loading UI. (server not wasm) - Inject IJSRuntime to hide loading overlay after auth completes. (server not wasm) - Update _Host.cshtml: add [AllowAnonymous], switch to Server render mode, and implement JS/CSS for loading overlay. (server not wasm) - Add new LogoutButton.razor component. - Add AuthenticationWrapper.razor (contents not shown).
Refactored initial loading splash in index.html to use a new #wasm-loading div with spinner and status text, managed via JavaScript. Added robust JS functions to hide the loading screen and update status, exposed to Blazor for both server and WASM scenarios. Removed <AuthenticationWrapper> from App.razor and updated router logic for clarity. Loading screen is now reliably hidden after authentication. Also updated app title and cleaned up formatting. These changes enhance the user experience during app initialization and authentication.
Replaced basic loading splash with a styled spinner and status message. Added JS functions for controlling loading state and exposed them to Blazor components. Refactored Blazor startup script for better error handling and status updates, including a safety timeout. Updated page title to "Elsa Studio".
Modified the CSS animation declaration for "spin" from @Keyframes to @@Keyframes in _Host.cshtml. Note that @@Keyframes is not valid in standard CSS and may cause issues unless processed by a specific tool.
sfmskywalker
left a comment
There was a problem hiding this comment.
There's a lot of repetitive code that is not transferrable to any other Elsa Studio host application out there. These updated host applications are workbench projects, which are not used anywhere, not even by the Docker images being built (which are built from elsa-apps).
The only way to carry this over, as it stands, is for integrators to copy and paste all of this work.
Is there any way we can package the JS plumbing in html files and cshtml files such that it is reusable? Perhaps from Elsa.Studio.Login for Elsa 3.6, and Elsa.Authentication.Identity as of Elsa 3.7 (main branch atm).
Co-authored-by: FransVanEk <9162886+FransVanEk@users.noreply.github.com>
Co-authored-by: FransVanEk <9162886+FransVanEk@users.noreply.github.com>
…hared JS Co-authored-by: FransVanEk <9162886+FransVanEk@users.noreply.github.com>
Co-authored-by: FransVanEk <9162886+FransVanEk@users.noreply.github.com>
Co-authored-by: FransVanEk <9162886+FransVanEk@users.noreply.github.com>
Co-authored-by: FransVanEk <9162886+FransVanEk@users.noreply.github.com>
Standardize loading message to "Starting..." across WASM and Server. Enhance Blazor Server loader with robust readiness detection using DOM observation, console monitoring, and render stability checks. Reduce fallback timeout to 8s and expose new ElsaStudio API methods for manual loading control. Improves accuracy and responsiveness of loading screen removal.
|
@FransVanEk Did you want to split this PR into two separate ones, or can we merge this as-is? |
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.
…ub.com/elsa-workflows/elsa-studio into feature/remove-rendering-before--login
Refactor loader scripts to use a shared core for consistent loading, progress, and error handling across Blazor Server, WASM, and Hosted WASM. Load critical CSS and JS earlier for faster, more reliable startup. Enhance readiness detection and loading screen logic, especially for authentication and MudBlazor JS. Improve backend HTTP client resilience with Polly, better timeouts, and logging. Tune SignalR and Blazor Server options for stability and performance. Update HTML and Razor files to use the new modular loader approach. These changes improve reliability, performance, and maintainability of Elsa Studio initialization.
Improve unauthorized UI: show error for logged-in users instead of login modal, add "Refresh Page" button, and track authentication state changes for better user experience. Unsubscribe events on disposal to prevent memory leaks.
Introduced ILogoutService for provider-specific logout logic, ensuring proper cleanup of authentication state before redirecting. Updated LogoutButton to use the new service. Service registrations now inject the correct logout implementation per authentication module. Optimized App.razor and _Host.cshtml to conditionally load heavy assets/scripts only for non-login routes, improving login page load times. Program.cs updated for lazy module loading on non-login routes.
Refactor login page to load app name, tagline, logo, and version info from a new Branding section in appsettings.json, supporting environment-specific customization. Add LoginBrandingOptions model for config structure and defaults. Update UI and logic to use config values, removing magic constants and heavy pre-auth dependencies. Add LOGIN_CONFIGURATION.md for usage and migration guidance.
Refactored logout services to use configuration for navigation routes and authentication storage keys, replacing hardcoded strings. Added strongly-typed options models for routes and storage keys. Updated appsettings files with new sections for environment-specific customization. Improved branding configuration and made LoginBrandingOptions overrideable via IBrandingProvider. Login page now resolves branding values and logo paths more intelligently.
|
@copilot do a pr review |
|
@FransVanEk I've opened a new pull request, #749, to work on those changes. Once the pull request is ready, I'll request review from you. |
PR Classification
Design and UX improvement for application loading and authentication states.
PR Summary
This pull request enhances the loading and authentication experience for both Blazor Server and WASM hosting modes, updates branding, and adds a logout button to the app bar.