Add delay before showing Reconnection UI (#24137)

* Add CSS delay before showing Reconnection UI

* rebuild yet again to try and get past the conflict

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

@@ -64,6 +64,7 @@ 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...';
@@ -71,6 +72,7 @@ export class DefaultReconnectDisplay implements ReconnectDisplay {
 
   hide(): void {
     this.modal.style.display = 'none';
+    this.modal.classList.remove('show');
   }
 
   failed(): void {

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

@@ -14,6 +14,7 @@ describe('DefaultReconnectDisplay', () => {
         expect(element).toBeDefined();
         expect(element!.id).toBe('test-dialog-id');
         expect(element!.style.display).toBe('block');
+        expect(element!.classList).toContain('show');
 
         expect(display.message.textContent).toBe('Attempting to reconnect to the server...');
         expect(display.button.style.display).toBe('none');
@@ -36,6 +37,7 @@ describe('DefaultReconnectDisplay', () => {
         display.hide();
 
         expect(display.modal.style.display).toBe('none');
+        expect(display.modal.classList).not.toContain('show');
     });
 
     it ('updates message on fail', () => {
@@ -46,6 +48,7 @@ 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');
     });
@@ -58,6 +61,7 @@ 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,3 +48,12 @@ 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; }
+}