Move reconnection delay mechanism into framework code (#24566)

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

@@ -29,6 +29,7 @@ export class DefaultReconnectDisplay implements ReconnectDisplay {
       'opacity: 0.8',
       'text-align: center',
       'font-weight: bold',
+      'transition: visibility 0s linear 500ms',
     ];
 
     this.modal.style.cssText = modalStyles.join(';');
@@ -64,15 +65,21 @@ export class DefaultReconnectDisplay implements ReconnectDisplay {
       this.document.body.appendChild(this.modal);
     }
     this.modal.style.display = 'block';
-    this.modal.classList.add('show');
     this.button.style.display = 'none';
     this.reloadParagraph.style.display = 'none';
     this.message.textContent = 'Attempting to reconnect to the server...';
+
+    // The visibility property has a transition so it takes effect after a delay.
+    // This is to prevent it appearing momentarily when navigating away. For the
+    // transition to take effect, we have to apply the visibility asynchronously.
+    this.modal.style.visibility = 'hidden';
+    setTimeout(() => {
+      this.modal.style.visibility = 'visible';
+    }, 0);
   }
 
   hide(): void {
     this.modal.style.display = 'none';
-    this.modal.classList.remove('show');
   }
 
   failed(): void {

src/Components/Web.JS/tests/DefaultReconnectDisplay.test.ts

@@ -1,6 +1,6 @@
 import { DefaultReconnectDisplay } from "../src/Platform/Circuits/DefaultReconnectDisplay";
-import {JSDOM} from 'jsdom';
-import { NullLogger} from '../src/Platform/Logging/Loggers';
+import { JSDOM } from 'jsdom';
+import { NullLogger } from '../src/Platform/Logging/Loggers';
 
 describe('DefaultReconnectDisplay', () => {
 
@@ -14,10 +14,16 @@ describe('DefaultReconnectDisplay', () => {
         expect(element).toBeDefined();
         expect(element!.id).toBe('test-dialog-id');
         expect(element!.style.display).toBe('block');
-        expect(element!.classList).toContain('show');
+        expect(element!.style.visibility).toBe('hidden');
 
         expect(display.message.textContent).toBe('Attempting to reconnect to the server...');
         expect(display.button.style.display).toBe('none');
+
+        // Visibility changes asynchronously to allow animation
+        return new Promise(resolve => setTimeout(() => {
+            expect(element!.style.visibility).toBe('visible');
+            resolve();
+        }, 1));
     });
 
     it ('does not add element to the body multiple times', () => {
@@ -37,7 +43,6 @@ describe('DefaultReconnectDisplay', () => {
         display.hide();
 
         expect(display.modal.style.display).toBe('none');
-        expect(display.modal.classList).not.toContain('show');
     });
 
     it ('updates message on fail', () => {
@@ -48,7 +53,6 @@ describe('DefaultReconnectDisplay', () => {
         display.failed();
 
         expect(display.modal.style.display).toBe('block');
-        expect(display.modal.classList).toContain('show');
         expect(display.message.innerHTML).toBe('Reconnection failed. Try <a href=\"\">reloading</a> the page if you\'re unable to reconnect.');
         expect(display.button.style.display).toBe('block');
     });
@@ -61,7 +65,6 @@ describe('DefaultReconnectDisplay', () => {
         display.rejected();
 
         expect(display.modal.style.display).toBe('block');
-        expect(display.modal.classList).toContain('show');
         expect(display.message.innerHTML).toBe('Could not reconnect to the server. <a href=\"\">Reload</a> the page to restore functionality.');
         expect(display.button.style.display).toBe('none');
     });

src/ProjectTemplates/Web.ProjectTemplates/content/BlazorServerWeb-CSharp/wwwroot/css/site.css

@@ -48,12 +48,3 @@ a, .btn-link {
         right: 0.75rem;
         top: 0.5rem;
     }
-
-#components-reconnect-modal.show {
-    animation: VISIBILITY 500ms linear;
-}
-
-@keyframes VISIBILITY {
-    0%,99% { visibility: hidden; }
-    100% { visibility: visible; }
-}