Display a modal during reboot

js/serial_backend.js

@@ -22,8 +22,19 @@ $(document).ready(function () {
 
     GUI.handleReconnect = function ($tabElement) {
 
+        let modal;
+
         if (BOARD.hasVcp(CONFIG.boardIdentifier)) { // VCP-based flight controls may crash old drivers, we catch and reconnect
 
+            modal = new jBox('Modal', {
+                width: 400,
+                height: 100,
+                animation: false,
+                closeOnClick: false,
+                closeOnEsc: false,
+                content: $('#modal-reconnect')
+            }).open();
+
             /*
              Disconnect
              */
@@ -35,6 +46,7 @@ $(document).ready(function () {
              Connect again
              */
             setTimeout(function start_connection() {
+                modal.close();
                 $('a.connect').click();
 
                 /*

main.css

@@ -2076,3 +2076,13 @@ select {
     padding: 1em;
     clear: both;
 }
+
+#modal-reconnect {
+    /* width: 100%; */
+    height: 90px;
+    background: url(../images/loading-bars.svg) no-repeat center 100%;
+}
+
+#modal-reconnect div {
+    text-align: center;
+}

main.html

@@ -259,5 +259,10 @@
         </div>
     </div>
 </div>
+<div id="modal-reconnect" class="is-hidden">
+    <!-- <div class="data-loading"> -->
+        <div data-i18n="deviceRebooting"></div>
+    <!-- </div> -->
+</div>
 </body>
 </html>