[main] [Blazor] Updated Blazor Server reconnect UI (#55951)

* Basic prototype

* Updates

* Styling improvements

* Cleanup

* Small change

* Updates

* Some small improvements

* Remove custom CSS property

* Allow retrying after `maxRetries`

* Update comment

---------

Co-authored-by: Mackinnon Buck <[email protected]>

Author: github-actions[bot]

src/Components/Components.slnf

@@ -75,6 +75,7 @@
       "src\\Hosting\\Abstractions\\src\\Microsoft.AspNetCore.Hosting.Abstractions.csproj",
       "src\\Hosting\\Hosting\\src\\Microsoft.AspNetCore.Hosting.csproj",
       "src\\Hosting\\Server.Abstractions\\src\\Microsoft.AspNetCore.Hosting.Server.Abstractions.csproj",
+      "src\\Hosting\\TestHost\\src\\Microsoft.AspNetCore.TestHost.csproj",
       "src\\Html.Abstractions\\src\\Microsoft.AspNetCore.Html.Abstractions.csproj",
       "src\\Http\\Authentication.Abstractions\\src\\Microsoft.AspNetCore.Authentication.Abstractions.csproj",
       "src\\Http\\Authentication.Core\\src\\Microsoft.AspNetCore.Authentication.Core.csproj",

src/Components/Web.JS/src/Platform/Circuits/CircuitStartOptions.ts

@@ -34,8 +34,8 @@ export function resolveOptions(userOptions?: Partial<CircuitStartOptions>): Circ
 }
 
 export interface ReconnectionOptions {
-  maxRetries: number;
-  retryIntervalMilliseconds: number;
+  maxRetries?: number;
+  retryIntervalMilliseconds: number | ((previousAttempts: number, maxRetries?: number) => number | undefined | null);
   dialogId: string;
 }
 
@@ -49,15 +49,34 @@ export interface ReconnectionHandler {
   onConnectionUp(): void;
 }
 
+function computeDefaultRetryInterval(previousAttempts: number, maxRetries?: number): number | null {
+  if (maxRetries && previousAttempts >= maxRetries) {
+    return null;
+  }
+
+  if (previousAttempts < 10) {
+    // Retry as quickly as possible for the first 10 tries
+    return 0;
+  }
+
+  if (previousAttempts < 20) {
+    // Retry every 5 seconds for the next 10 tries
+    return 5000;
+  }
+
+  // Then retry every 30 seconds indefinitely
+  return 30000;
+}
+
 const defaultOptions: CircuitStartOptions = {
   // eslint-disable-next-line @typescript-eslint/no-empty-function
   configureSignalR: (_) => { },
   logLevel: LogLevel.Warning,
   initializers: undefined!,
   circuitHandlers: [],
   reconnectionOptions: {
-    maxRetries: 8,
-    retryIntervalMilliseconds: 20000,
+    maxRetries: 30,
+    retryIntervalMilliseconds: computeDefaultRetryInterval,
     dialogId: 'components-reconnect-modal',
   },
 };