fix: Can't show fluent toasts or fluent messages in SSR with server interactivity

[skillmaker-dev]

🐛 Bug Report

I can't make toast or dialog services work in SSR mode even when using render mode of type InteractiveServer

💻 Repro or Code Sample

I put the providers in my main layout, i called mine AdminLayout.razor

@inherits LayoutComponentBase
<FluentLayout>
    <FluentHeader>
        Blogify.Web
    </FluentHeader>
    <FluentStack Class="main" Orientation="Orientation.Horizontal" Width="100%">
        <NavMenu />
        <FluentDivider  Role="DividerRole.Presentation" Orientation="Orientation.Vertical"/>
        <FluentBodyContent>
            <div class="content">
                @Body
            </div>
            <FluentDialogProvider />
            <FluentToastProvider MaxToastCount="5" Position="ToastPosition.BottomRight" Timeout="3000" />

        </FluentBodyContent>
    </FluentStack>
</FluentLayout>

<FluentTooltipProvider />
<FluentMessageBarProvider />

I tried to change the number of line in which i put the providers but still the same error occurs. This is how i inject the services:

 [Inject]
 public IToastService ToastService { get; set; }

 [Inject]
 public IDialogService DialogService { get; set; }

This is how i call the method to show a message :

 await DialogService.ShowErrorAsync("error");

🤔 Expected Behavior

It should show a nice looking message or toast

😯 Current Behavior

this is what shows in console:

System.ArgumentNullException: <FluentDialogProvider /> needs to be added to the main layout of your application/site. (Parameter 'OnShowAsync')

And btw, when i call the sync version of ShowToast or ShowError nothing happens even the error doesn't show up

🔦 Context

I'm trying to figure out how to make this work

🌍 Your Environment

• OS & Device: Windows on PC
• Browser Microsoft Edge
• .NET 8

[skillmaker-dev]

I had to add

<FluentDialogProvider />
<FluentToastProvider MaxToastCount="5" Position="ToastPosition.BottomRight" Timeout="3000" />

Inside the component i'm trying to show the dialog inside

[chumbleuk]

I had to add

<FluentDialogProvider />
<FluentToastProvider MaxToastCount="5" Position="ToastPosition.BottomRight" Timeout="3000" />

Inside the component i'm trying to show the dialog inside

Just as I was about to reinstate PNotify I came across your message! Thanks! The docs specifically say to enter the above in the Layout file so good call !