[Overlay] Add a timed example

examples/Demo/Shared/Pages/Overlay/Examples/OverlayTimed.razor

@@ -0,0 +1,43 @@
+<FluentSelect Items=@(Enum.GetValues<JustifyContent>())
+              OptionValue="@(c => c.ToAttributeValue())"
+              TOption="JustifyContent"
+              Position="SelectPosition.Below"
+@bind-SelectedOption="@justification" />
+
+<FluentSelect Items=@(Enum.GetValues<Align>())
+              OptionValue="@(c => c.ToAttributeValue())"
+              TOption="Align"
+              Position="SelectPosition.Below"
+@bind-SelectedOption="@alignment" />
+<br />
+<br />
+
+
+<FluentButton Appearance="Appearance.Accent" @onclick="HandleOnOpen">Show Overlay</FluentButton>
+
+<FluentOverlay @bind-Visible=@visible
+               Opacity="0.4"
+               Alignment="@alignment"
+               Justification="@justification"
+               OnClose="HandleOnClose">
+    <FluentProgressRing />
+</FluentOverlay>
+
+@code {
+    bool visible = false;
+    JustifyContent justification = JustifyContent.Center;
+    Align alignment = Align.Center;
+
+    protected void HandleOnClose()
+    {
+        DemoLogger.WriteLine("Overlay closed");
+    }
+
+    protected async Task HandleOnOpen()
+    {
+        visible = true;
+        DemoLogger.WriteLine("Overlay opened");
+        await Task.Delay(3000);
+        visible = false;
+    }
+}

examples/Demo/Shared/Pages/Overlay/OverlayPage.razor

@@ -12,6 +12,10 @@
     <Description>Overlay with a default white background</Description>
 </DemoSection>
 
+<DemoSection Title="Timed" Component="typeof(OverlayTimed)">
+    <Description>A timed overlay that hides after being shown for 3 seconds</Description>
+</DemoSection>
+
 <DemoSection Title="Transparent overlay" Component="typeof(OverlayTransparent)">
     <Description>Overlay with a transparent background</Description>
 </DemoSection>