Skip to content

Commit 1be16fb

Browse files
Add delay before showing Reconnection UI (#24137)
* Add CSS delay before showing Reconnection UI * rebuild yet again to try and get past the conflict
1 parent 4ef5e10 commit 1be16fb

File tree

4 files changed

+16
-1
lines changed

4 files changed

+16
-1
lines changed

src/Components/Web.JS/dist/Release/blazor.server.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,13 +64,15 @@ export class DefaultReconnectDisplay implements ReconnectDisplay {
6464
this.document.body.appendChild(this.modal);
6565
}
6666
this.modal.style.display = 'block';
67+
this.modal.classList.add('show');
6768
this.button.style.display = 'none';
6869
this.reloadParagraph.style.display = 'none';
6970
this.message.textContent = 'Attempting to reconnect to the server...';
7071
}
7172

7273
hide(): void {
7374
this.modal.style.display = 'none';
75+
this.modal.classList.remove('show');
7476
}
7577

7678
failed(): void {

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ describe('DefaultReconnectDisplay', () => {
1414
expect(element).toBeDefined();
1515
expect(element!.id).toBe('test-dialog-id');
1616
expect(element!.style.display).toBe('block');
17+
expect(element!.classList).toContain('show');
1718

1819
expect(display.message.textContent).toBe('Attempting to reconnect to the server...');
1920
expect(display.button.style.display).toBe('none');
@@ -36,6 +37,7 @@ describe('DefaultReconnectDisplay', () => {
3637
display.hide();
3738

3839
expect(display.modal.style.display).toBe('none');
40+
expect(display.modal.classList).not.toContain('show');
3941
});
4042

4143
it ('updates message on fail', () => {
@@ -46,6 +48,7 @@ describe('DefaultReconnectDisplay', () => {
4648
display.failed();
4749

4850
expect(display.modal.style.display).toBe('block');
51+
expect(display.modal.classList).toContain('show');
4952
expect(display.message.innerHTML).toBe('Reconnection failed. Try <a href=\"\">reloading</a> the page if you\'re unable to reconnect.');
5053
expect(display.button.style.display).toBe('block');
5154
});
@@ -58,6 +61,7 @@ describe('DefaultReconnectDisplay', () => {
5861
display.rejected();
5962

6063
expect(display.modal.style.display).toBe('block');
64+
expect(display.modal.classList).toContain('show');
6165
expect(display.message.innerHTML).toBe('Could not reconnect to the server. <a href=\"\">Reload</a> the page to restore functionality.');
6266
expect(display.button.style.display).toBe('none');
6367
});

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,3 +48,12 @@ a, .btn-link {
4848
right: 0.75rem;
4949
top: 0.5rem;
5050
}
51+
52+
#components-reconnect-modal.show {
53+
animation: VISIBILITY 500ms linear;
54+
}
55+
56+
@keyframes VISIBILITY {
57+
0%,99% { visibility: hidden; }
58+
100% { visibility: visible; }
59+
}

0 commit comments

Comments
 (0)