fix(templates): resolve loading issues in Boilerplate #9224 (#9232)

.github/workflows/todo-sample.cd.yml

@@ -59,6 +59,11 @@ jobs:
     - name: Install wasm
       run:  cd src && dotnet workload install wasm-tools
 
+    - name: Configure bswup
+      run: |
+          sed -i 's/\/\/ self.noPrerenderQuery/self.noPrerenderQuery/g' TodoSample/src/Client/TodoSample.Client.Web/wwwroot/service-worker.published.js
+          sed -i 's/\/\/ self.disablePassiveFirstBoot/self.disablePassiveFirstBoot/g' TodoSample/src/Client/TodoSample.Client.Web/wwwroot/service-worker.published.js
+
     - name: Generate CSS/JS files
       run: dotnet build TodoSample/src/Client/TodoSample.Client.Core/TodoSample.Client.Core.csproj -t:BeforeBuildTasks -p:Version="${{ vars.APPLICATION_DISPLAY_VERSION}}" --no-restore -c Release
 

src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/AppComponentBase.cs

@@ -44,6 +44,11 @@ public partial class AppComponentBase : ComponentBase, IAsyncDisposable
 
     [AutoInject] protected ITelemetryContext TelemetryContext = default!;
 
+    /// <summary>
+    /// <inheritdoc cref="AbsoluteServerAddressProvider" />
+    /// </summary>
+    [AutoInject] protected AbsoluteServerAddressProvider AbsoluteServerAddress { get; set; } = default!;
+
 
     private readonly CancellationTokenSource cts = new();
     protected CancellationToken CurrentCancellationToken => cts.Token;

src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/ClientAppCoordinator.cs

@@ -132,7 +132,7 @@ private async Task ConnectSignalR()
 
         hubConnection = new HubConnectionBuilder()
             .WithAutomaticReconnect(new SignalRInfinitiesRetryPolicy())
-            .WithUrl($"{HttpClient.BaseAddress}app-hub", options =>
+            .WithUrl(new Uri(AbsoluteServerAddress, "app-hub"), options =>
             {
                 options.Transports = HttpTransportType.WebSockets;
                 options.SkipNegotiation = options.Transports is HttpTransportType.WebSockets;
@@ -205,7 +205,7 @@ private async Task HubConnectionDisconnected(Exception? exception)
         {
             if (exception is HubException && exception.Message.EndsWith(nameof(AppStrings.UnauthorizedException)))
             {
-                await AuthenticationManager.RefreshToken();
+                await AuthenticationManager.RefreshToken(CurrentCancellationToken);
             }
 
             logger.LogError(exception, "SignalR connection lost.");

src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/RootLayout.razor.scss

@@ -22,6 +22,7 @@ main {
                 width: 100%;
                 padding: 2rem;
                 padding-top: 5rem;
+                background-color: unset;
             }
         }
 

src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/UserMenu.razor.cs

@@ -42,9 +42,8 @@ protected override async Task OnInitAsync()
 
         user = (await PrerenderStateService.GetValue(() => HttpClient.GetFromJsonAsync("api/User/GetCurrentUser", JsonSerializerOptions.GetTypeInfo<UserDto>(), CurrentCancellationToken)))!;
 
-        var serverAddress = Configuration.GetServerAddress();
         var access_token = await PrerenderStateService.GetValue(AuthTokenProvider.GetAccessToken);
-        profileImageUrl = $"{serverAddress}/api/Attachment/GetProfileImage?access_token={access_token}";
+        profileImageUrl = new Uri(AbsoluteServerAddress, $"/api/Attachment/GetProfileImage?access_token={access_token}").ToString();
 
         await base.OnInitAsync();
     }

src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/LoadingComponent.razor

@@ -1,11 +1,24 @@
-<style>
-    .bit-lds-wrapper {
+@* Note: keep in mind that any changes to this file should be exactly applied to the loading implementations *@
+@* of the `index.html` files of the `Client.Web` and `Client.Maui` projects. *@
+
+<style>
+    .bit-lds-wrapper-nfs {
         top: 50%;
         left: 50%;
-        z-index: -1;
+        z-index: @zIndex;
         position: absolute;
         transform: translate(-50%, -50%);
     }
+    
+    .bit-lds-wrapper-fs {
+        inset: 0;
+        display: flex;
+        z-index: 999999;
+        position: fixed;
+        align-items: center;
+        justify-content: center;
+        background-color: var(--bit-clr-bg-pri);
+    }
 
     .bit-lds-grid div {
         background-color: @Color;
@@ -92,7 +105,7 @@
     }
 </style>
 
-<div class="bit-lds-wrapper">
+<div class="@(FullScreen ? "bit-lds-wrapper-fs" : "bit-lds-wrapper-nfs")">
     <div class="bit-lds-grid">
         <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
     </div>

src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/LoadingComponent.razor.cs

@@ -1,6 +1,38 @@
-namespace Boilerplate.Client.Core.Components;
+
+namespace Boilerplate.Client.Core.Components;
 
 public partial class LoadingComponent
 {
     [Parameter] public string Color { get; set; } = "#123456";
+
+    /// <summary>
+    /// Renders the Loading component in full-screen mode that renders over all other components.
+    /// </summary>
+    [Parameter] public bool FullScreen { get; set; }
+
+    /// <summary> 
+    /// This component is used in different parts of the application under varying conditions.
+    ///
+    /// 1. In App.razor, for non-prerendered applications, this component displays minimal content before
+    /// Blazor fully loads. Since it doesn’t automatically get removed after the app loads, the z-index is set to -1 
+    /// to ensure that once Blazor renders the main components, the loader falls behind the main content and becomes hidden.
+    /// Additionally, the z-index will not change because @rendermode in App.razor is null, which prevents the OnAfterRender 
+    /// method from being invoked.
+    ///
+    /// 2. In other parts of the project, like during Authorizing and Navigating, the component is automatically 
+    /// removed from the screen, so a negative z-index is unnecessary and could actually cause it to be invisible. 
+    /// In these cases, it needs a higher z-index to ensure it appears above other components. The new z-index value 
+    /// is applied in the OnAfterRender lifecycle method.
+    /// </summary>
+    private string zIndex = "-1";
+    protected override void OnAfterRender(bool firstRender)
+    {
+        if (firstRender)
+        {
+            zIndex = "999999";
+            StateHasChanged();
+        }
+
+        base.OnAfterRender(firstRender);
+    }
 }

src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Authorized/Offline/OfflineEditProfilePage.razor

@@ -7,7 +7,11 @@
 
 <section>
     <BitStack Alignment="BitAlignment.Center">
-        <BitText Typography="BitTypography.H6">
+        <BitText Typography="BitTypography.H3">
+            @Localizer[nameof(AppStrings.OfflineEditProfileTitle)]
+        </BitText>
+
+        <BitText Class="max-width">
             @Localizer[nameof(AppStrings.OfflineEditProfileMessage)]
         </BitText>
 
@@ -16,7 +20,7 @@
             <BitEllipsisLoading />
         }
 
-        <EditForm Model="userToEdit" OnValidSubmit="WrapHandled(DoSave)" novalidate>
+        <EditForm Model="userToEdit" OnValidSubmit="WrapHandled(DoSave)" novalidate class="max-width">
             <AppDataAnnotationsValidator />
 
             <BitStack FillContent>

src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Authorized/Offline/OfflineEditProfilePage.razor.scss

@@ -1,8 +1,2 @@
 section {
 }
-
-::deep {
-    form {
-        width: min(25rem, 100%);
-    }
-}

src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Authorized/Products/AddOrEditProductModal.razor.cs

@@ -1,5 +1,5 @@
 using Boilerplate.Shared.Controllers.Categories;
-using Boilerplate.Shared.Controllers.Product;
+using Boilerplate.Shared.Controllers.Products;
 using Boilerplate.Shared.Dtos.Products;
 
 namespace Boilerplate.Client.Core.Components.Pages.Authorized.Products;

src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Authorized/Products/ProductsPage.razor.cs

@@ -1,5 +1,5 @@
 //-:cnd:noEmit
-using Boilerplate.Shared.Controllers.Product;
+using Boilerplate.Shared.Controllers.Products;
 using Boilerplate.Shared.Dtos.Products;
 
 namespace Boilerplate.Client.Core.Components.Pages.Authorized.Products;

src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Authorized/Settings/Accordion.razor

@@ -1,6 +1,8 @@
 @inherits AppComponentBase
 
-<BitAccordion OnClick="HandleOnClick" IsExpanded="Value == Name"
+<BitAccordion NoBorder
+              OnClick="HandleOnClick"
+              IsExpanded="Value == Name"
               Classes="@(new() { Header=BitCss.Class.Color.Background.Secondary })">
 
     <HeaderTemplate>

src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Authorized/Settings/ChangeEmailSection.razor

@@ -4,7 +4,7 @@
     <BitStack HorizontalAlign="BitAlignment.Center">
         @if (showConfirmation is false)
         {
-            <EditForm Model="sendModel" OnValidSubmit="WrapHandled(SendToken)" novalidate>
+            <EditForm Model="sendModel" OnValidSubmit="WrapHandled(SendToken)" novalidate class="max-width">
                 <AppDataAnnotationsValidator />
 
                 <BitStack FillContent>

src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Authorized/Settings/ChangeEmailSection.razor.scss

@@ -1,10 +1,3 @@
 section {
     width: 100%;
 }
-
-::deep {
-    form {
-        width: 100%;
-        max-width: 27rem;
-    }
-}

src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Authorized/Settings/ChangePhoneNumberSection.razor

@@ -4,7 +4,7 @@
     <BitStack HorizontalAlign="BitAlignment.Center">
         @if (showConfirmation is false)
         {
-            <EditForm Model="sendModel" OnValidSubmit="WrapHandled(SendToken)" novalidate>
+            <EditForm Model="sendModel" OnValidSubmit="WrapHandled(SendToken)" novalidate class="max-width">
                 <AppDataAnnotationsValidator />
 
                 <BitStack FillContent>

src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Authorized/Settings/ChangePhoneNumberSection.razor.scss

@@ -1,10 +1,3 @@
 section {
     width: 100%;
 }
-
-::deep {
-    form {
-        width: 100%;
-        max-width: 27rem;
-    }
-}

src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Authorized/Settings/DeleteAccountSection.razor

@@ -1,15 +1,15 @@
 @inherits AppComponentBase
 
 <section>
-    <BitStack FillContent HorizontalAlign="BitAlignment.Center" Class="stack">
+    <BitStack FillContent HorizontalAlign="BitAlignment.Center" Class="max-width">
         <BitText Typography="BitTypography.H6" Color="BitColor.Error" Align="BitTextAlign.Center">
             @Localizer[nameof(AppStrings.DeleteAccount)]
         </BitText>
 
-        <BitText Typography="BitTypography.Body1">
+        <BitText Typography="BitTypography.Body1" Align="BitTextAlign.Center">
             @Localizer[nameof(AppStrings.DeleteAccountPrompt)]
         </BitText>
-
+        <br />
         <BitButton Color="BitColor.Error"
                    Variant="BitVariant.Outline"
                    OnClick="() => isDialogOpen = true">

src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Authorized/Settings/DeleteAccountSection.razor.scss

@@ -3,9 +3,3 @@ section {
     display: flex;
     justify-content: center;
 }
-
-::deep {
-    .stack {
-        max-width: 27rem;
-    }
-}

src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Authorized/Settings/ProfileSection.razor

@@ -54,7 +54,7 @@
                 </BitButton>
             }
             <br />
-            <EditForm Model="editUserDto" OnValidSubmit="WrapHandled(SaveProfile)" novalidate>
+            <EditForm Model="editUserDto" OnValidSubmit="WrapHandled(SaveProfile)" novalidate class="max-width">
                 <AppDataAnnotationsValidator />
 
                 <BitStack FillContent>

src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Authorized/Settings/ProfileSection.razor.cs

@@ -26,9 +26,8 @@ protected override async Task OnInitAsync()
 
         removeProfileImageHttpUrl = $"api/Attachment/RemoveProfileImage?access_token={access_token}";
 
-        var serverAddress = Configuration.GetServerAddress();
-        profileImageUrl = $"{serverAddress}/api/Attachment/GetProfileImage?access_token={access_token}";
-        profileImageUploadUrl = $"{serverAddress}/api/Attachment/UploadProfileImage?access_token={access_token}";
+        profileImageUrl = new Uri(AbsoluteServerAddress, $"/api/Attachment/GetProfileImage?access_token={access_token}").ToString();
+        profileImageUploadUrl = new Uri(AbsoluteServerAddress, $"/api/Attachment/UploadProfileImage?access_token={access_token}").ToString();
 
         await base.OnInitAsync();
     }

src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Authorized/Settings/ProfileSection.razor.scss

@@ -1,10 +1,3 @@
 section {
     width: 100%;
 }
-
-::deep {
-    form {
-        width: 100%;
-        max-width: 27rem;
-    }
-}

src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Authorized/Settings/SettingsPage.razor

@@ -12,13 +12,15 @@
 
 <section>
     <BitStack Class="stack">
-        <Accordion Name="@Urls.SettingsSections.Profile" @bind-Value="@openedAccordion"
+        <Accordion @bind-Value="@openedAccordion"
+                   Name="@Urls.SettingsSections.Profile"
                    Title="@Localizer[nameof(AppStrings.ProfileTitle)]"
                    Subtitle="@Localizer[nameof(AppStrings.ProfileSubtitle)]">
             <ProfileSection Loading="isLoading" User="user" />
         </Accordion>
 
-        <Accordion Name="@Urls.SettingsSections.Account" @bind-Value="@openedAccordion"
+        <Accordion @bind-Value="@openedAccordion"
+                   Name="@Urls.SettingsSections.Account"
                    Title="@Localizer[nameof(AppStrings.AccountTitle)]"
                    Subtitle="@Localizer[nameof(AppStrings.AccountSubtitle)]">
             <BitPivot Alignment="BitAlignment.Center">
@@ -39,13 +41,15 @@
             </BitPivot>
         </Accordion>
 
-        <Accordion Name="@Urls.SettingsSections.Tfa" @bind-Value="@openedAccordion"
+        <Accordion @bind-Value="@openedAccordion"
+                   Name="@Urls.SettingsSections.Tfa"
                    Title="@Localizer[nameof(AppStrings.TfaTitle)]"
                    Subtitle="@Localizer[nameof(AppStrings.TfaSubtitle)]">
             <TwoFactorSection />
         </Accordion>
 
-        <Accordion Name="@Urls.SettingsSections.Sessions" @bind-Value="@openedAccordion"
+        <Accordion @bind-Value="@openedAccordion"
+                   Name="@Urls.SettingsSections.Sessions"
                    Title="@Localizer[nameof(AppStrings.SessionsTitle)]"
                    Subtitle="@Localizer[nameof(AppStrings.SessionsSubtitle)]">
             <SessionsSection />

src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Authorized/Settings/SettingsPage.razor.cs

@@ -32,9 +32,8 @@ protected override async Task OnInitAsync()
         {
             user = await userController.GetCurrentUser(CurrentCancellationToken);
 
-            var serverAddress = Configuration.GetServerAddress();
             var access_token = await PrerenderStateService.GetValue(AuthTokenProvider.GetAccessToken);
-            profileImageUrl = $"{serverAddress}/api/Attachment/GetProfileImage?access_token={access_token}";
+            profileImageUrl = new Uri(AbsoluteServerAddress, $"/api/Attachment/GetProfileImage?access_token={access_token}").ToString();
         }
         finally
         {