fix: Error in FluentDialogProvider when displaying dialog on page load

[JamesNK]

🐛 Bug Report

💻 Repro or Code Sample

FluentDialogProvider throws an error if its module hasn't loaded:

fluentui-blazor/src/Core/Components/Dialog/FluentDialogProvider.razor.cs

Lines 64 to 67 in b77b530

	if (_module is null)
	{
	throw new InvalidOperationException("JS module is not loaded.");
	}

The problem with this is it will error if IDialogService is used to show a dialog immediately on app load. The module won't be set because the browser hasn't finished download it. And there is no way for a caller to know if the module is available or not. IDialogService is only ready to use when the private _module field has a value.

🤔 Expected Behavior

IDialogService.ShowDialog should be safe to call when a page first loads. If JavaScript is still loading, then the service waits until JS is finished loading.

😯 Current Behavior

Throws an error when showing a dialog on page load. There is no way to know whether it will throw the error.

💁 Possible Solution

Create a TaskCompletionSource that methods like ShowDialog await on instead of throwing an error. TCS is completed when this is complete (or an error is set if it throws):

fluentui-blazor/src/Core/Components/Dialog/FluentDialogProvider.razor.cs

Line 58 in b77b530

_module ??= await JSRuntime.InvokeAsync<IJSObjectReference>("import", JAVASCRIPT_FILE.FormatCollocatedUrl(LibraryConfiguration));

🔦 Context

🌍 Your Environment

• OS & Device: [e.g. MacOS, iOS, Windows, Linux] on [iPhone 7, PC]
• Browser [e.g. Microsoft Edge, Google Chrome, Apple Safari, Mozilla FireFox]
• .NET and Fluent UI Blazor library Version [e.g. 8.0.2 and 4.4.1]

[JamesNK]

Regressed here: #4095

[dvoituron]

FYI @adamint

[adamint]

Please assign this to me, I will fix today