Merge pull request #22357 from abpframework/AbpScripts

Avoid loading the script twice and style`flicker` problem after prerender.

framework/src/Volo.Abp.AspNetCore.Components.Web.Theming/Bundling/AbpScripts.razor

@@ -1,4 +1,6 @@
+@implements IDisposable
 @inject IComponentBundleManager BundleManager
+@inject PersistentComponentState ApplicationState
 @if (ScriptFiles != null)
 {
     foreach (var file in ScriptFiles)
@@ -8,6 +10,9 @@
 }
 
 @code {
+
+    private const string PrerenderedKey = "abp_script_prerendered";
+
     [Parameter]
     public List<string>? WebAssemblyScriptFiles { get; set; }
 
@@ -16,18 +21,33 @@
 
     private List<string>? ScriptFiles { get; set; }
 
+    private PersistingComponentStateSubscription _persistingSubscription;
+
     protected override async Task OnInitializedAsync()
     {
-        ScriptFiles = new List<string>();
+        _persistingSubscription = ApplicationState.RegisterOnPersisting(Callback);
-
+        if (!ApplicationState.TryTakeFromJson<string>(PrerenderedKey, out _))
-        if (!BundleName.IsNullOrWhiteSpace())
         {
-            ScriptFiles = (await BundleManager.GetScriptBundleFilesAsync(BundleName!)).ToList();
+            // We are in prerendering mode
+            if (!BundleName.IsNullOrWhiteSpace())
+            {
+                ScriptFiles = (await BundleManager.GetScriptBundleFilesAsync(BundleName!)).ToList();
+            }
         }
-
+        else
-        if (OperatingSystem.IsBrowser() && WebAssemblyScriptFiles != null)
         {
-            ScriptFiles.AddIfNotContains(WebAssemblyScriptFiles);
+            if (OperatingSystem.IsBrowser() && WebAssemblyScriptFiles != null)
+            {
+                ScriptFiles = WebAssemblyScriptFiles;
+            }
         }
     }
+
+    private Task Callback()
+    {
+        ApplicationState.PersistAsJson(PrerenderedKey, PrerenderedKey);
+        return Task.CompletedTask;
+    }
+
+    public void Dispose() => _persistingSubscription.Dispose();
 }

framework/src/Volo.Abp.AspNetCore.Components.Web.Theming/Bundling/AbpStyles.razor

@@ -1,4 +1,6 @@
+@implements IDisposable
 @inject IComponentBundleManager BundleManager
+@inject PersistentComponentState ApplicationState
 @if (StyleFiles != null)
 {
     foreach (var file in StyleFiles)
@@ -8,6 +10,9 @@
 }
 
 @code {
+
+    private const string PrerenderedKey = "abp_style_prerendered";
+
     [Parameter]
     public List<string>? WebAssemblyStyleFiles { get; set; }
 
@@ -16,18 +21,47 @@
 
     private List<string>? StyleFiles { get; set; }
 
+    private PersistingComponentStateSubscription _persistingSubscription;
+
     protected override async Task OnInitializedAsync()
     {
-        StyleFiles = new List<string>();
+        _persistingSubscription = ApplicationState.RegisterOnPersisting(Callback);
-
+        if (!ApplicationState.TryTakeFromJson<List<string>>(PrerenderedKey, out var scriptFiles))
-        if (!BundleName.IsNullOrWhiteSpace())
         {
-            StyleFiles = (await BundleManager.GetStyleBundleFilesAsync(BundleName!)).ToList();
+            // We are in prerendering mode
+            if (!BundleName.IsNullOrWhiteSpace())
+            {
+                StyleFiles = (await BundleManager.GetStyleBundleFilesAsync(BundleName!)).ToList();
+            }
         }
+        else
+        {
+            StyleFiles = scriptFiles;
+            if (OperatingSystem.IsBrowser() && StyleFiles != null && WebAssemblyStyleFiles != null)
+            {
+                StyleFiles.AddIfNotContains(WebAssemblyStyleFiles);
+            }
+        }
+    }
 
-        if (OperatingSystem.IsBrowser() && WebAssemblyStyleFiles != null)
+    private bool _hasRemoveServerStyle = false;
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (!_hasRemoveServerStyle && OperatingSystem.IsBrowser() && WebAssemblyStyleFiles != null)
         {
-            StyleFiles.AddIfNotContains(WebAssemblyStyleFiles);
+            _hasRemoveServerStyle = true;
+            await Task.Delay(3000);
+            StyleFiles = WebAssemblyStyleFiles;
+            StateHasChanged();
         }
     }
+
+    private Task Callback()
+    {
+        ApplicationState.PersistAsJson(PrerenderedKey, StyleFiles);
+        return Task.CompletedTask;
+    }
+
+    public void Dispose() => _persistingSubscription.Dispose();
 }