Replace "attempting to reconnect" with non-modal

[Vroo]

The "attempting to reconnect" modal is extremely annoying on mobile where you get disconnected all the time. You can't even scroll to see parts of the page while waiting for it to reconnect. I suggest replacing with:

(1) non-modal fully transparent overlay that prevents interacting with the page. The overlay should be the full height of the page so they can scroll.
(2) add a floating hourglass badge in the upper left corner.
(3) using cursor: wait so that there is a visual indication (this won't be visible on mobile but the badge will be).

Here's the badge:

<style>
.connection-badge {
    display: none;
    position: fixed;
    top: 1px;
    left: 1px;
    height: 32px;
    width: 32px;
    margin: 4px;
    text-align: center;
    background: #010101;
    border: none;
    border-radius: 100px;
}
.connection-badge.active {
    display: block;
}
.connection-badge svg {
    height:22px; 
    width: 22px; 
    margin-top: 5px;
}
</style>
<div class="connection-badge active">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="#fefefe" d="M0 24C0 10.7 10.7 0 24 0L360 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-8 0 0 19c0 40.3-16 79-44.5 107.5L225.9 256l81.5 81.5C336 366 352 404.7 352 445l0 19 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24L24 512c-13.3 0-24-10.7-24-24s10.7-24 24-24l8 0 0-19c0-40.3 16-79 44.5-107.5L158.1 256 76.5 174.5C48 146 32 107.3 32 67l0-19-8 0C10.7 48 0 37.3 0 24zM110.5 371.5c-3.9 3.9-7.5 8.1-10.7 12.5l184.4 0c-3.2-4.4-6.8-8.6-10.7-12.5L192 289.9l-81.5 81.5zM284.2 128C297 110.4 304 89 304 67l0-19L80 48l0 19c0 22.1 7 43.4 19.8 61l184.4 0z"/></svg>
</svg>
</div>