Clearer disconnect (#368)

* background not see through, but loading comic still on top

* adding distinct and clear message if connection is lost; addresses one to do in #357

* Refresh button plus issue opener and email contact

---------

Co-authored-by: PaulJonasJost <jost.pauljonas@gmail.com>

program/shinyApp/ui.R

@@ -100,6 +100,24 @@ ui <- shiny::fluidPage(
         font-size: 24px;
         color: darkred !important;
       }
+      #shiny-disconnected-overlay {
+        background-color: grey;
+        opacity: 1;
+        z-index: 99999 !important;
+        color: white;
+        font-size: 20px;
+        text-align: center;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        pointer-events: auto;  /* Allow pointer events */
+        padding: 20px;
+        line-height: 1.5;
+      }
+      #shiny-disconnected-overlay a {
+        color: #add8e6;  /* Light blue color for links */
+        text-decoration: underline;
+      }
       #sidebar_data_selection {
           background-color: #70BF4F47;
       }
@@ -188,7 +206,29 @@ ui <- shiny::fluidPage(
         background-color: #A208BA !important; /* Strong Purple */
         color: white !important;
       }
-  "))
+    ")),
+    tags$script(HTML("
+      $(document).on('shiny:disconnected', function(event) {
+        function checkOverlay() {
+          var overlay = $('#shiny-disconnected-overlay');
+          if (overlay.length) {
+            console.log('Overlay found, updating content');  // Debugging line
+            overlay.html(
+              '<div style=\"text-align: center; line-height: 1.5;\">' +
+              'Connection lost.<br>You need to <a href=\"#\" onclick=\"location.reload();\" style=\"color: #add8e6;\">refresh the page</a> to start again.<br>' +
+              'There can be multiple reasons, such as an unstable internet connection. If you reproduce this behavior, ' +
+              'please report the steps/clicks you took!<br>This would help all of us—developers, contributors, and users ❤️<br>' +
+              'Report best through <a href=\"https://github.com/ICB-DCM/cOmicsArt/issues/new/choose\" target=\"_blank\" style=\"color: #add8e6; margin: 0 5px;\">GitHub</a> ' +
+              'or email to <a href=\"mailto:cOmicsArtist@outlook.de\" style=\"color: #add8e6; margin: 0 5px;\">cOmicsArtist@outlook.de</a>.' +
+              '</div>'
+            );
+          } else {
+            setTimeout(checkOverlay, 100);  // Retry after 100ms
+          }
+        }
+        checkOverlay();
+      });
+    "))
   ),
   ##########
   use_cicerone(),