Load theme JavaScript module earlier from HTML (dotnet#4888)

Author: JamesNK

src/Aspire.Dashboard/Components/App.razor

@@ -28,5 +28,13 @@
     <Routes @rendermode="@(new InteractiveServerRenderMode(prerender: false))" />
     <script src="_framework/blazor.web.js"></script>
     <script src="js/app.js"></script>
+
+    @*
+        Directly reference theme and dependencies from HTML so they load quickly.
+        It's much faster to load them here than wait for module load from Blazor interop.
+        Load time is important here because the theme should be applied ASAP.
+    *@
+    <script src="js/app-theme.js" type="module"></script>
+    <script src="_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lib.module.js" type="module"></script>
 </body>
 </html>

src/Aspire.Dashboard/Components/Dialogs/SettingsDialog.razor.cs

@@ -40,7 +40,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
     {
         if (firstRender)
         {
-            _jsModule = await JS.InvokeAsync<IJSObjectReference>("import", "/js/theme.js");
+            _jsModule = await JS.InvokeAsync<IJSObjectReference>("import", "/js/app-theme.js");
             _currentSetting = await _jsModule.InvokeAsync<string>("getThemeCookieValue");
             StateHasChanged();
         }

src/Aspire.Dashboard/Components/Layout/MainLayout.razor.cs

@@ -113,7 +113,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
     {
         if (firstRender)
         {
-            _jsModule = await JS.InvokeAsync<IJSObjectReference>("import", "/js/theme.js");
+            _jsModule = await JS.InvokeAsync<IJSObjectReference>("import", "/js/app-theme.js");
             _shortcutManagerReference = DotNetObjectReference.Create(ShortcutManager);
             _keyboardHandlers = await JS.InvokeAsync<IJSObjectReference>("window.registerGlobalKeydownListener", _shortcutManagerReference);
             ShortcutManager.AddGlobalKeydownListener(this);