diff --git a/program/shinyApp/ui.R b/program/shinyApp/ui.R index c987abb5..e51a826d 100644 --- a/program/shinyApp/ui.R +++ b/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( + '
' + + 'Connection lost.
You need to refresh the page to start again.
' + + 'There can be multiple reasons, such as an unstable internet connection. If you reproduce this behavior, ' + + 'please report the steps/clicks you took!
This would help all of us—developers, contributors, and users ❤️
' + + 'Report best through GitHub ' + + 'or email to cOmicsArtist@outlook.de.' + + '
' + ); + } else { + setTimeout(checkOverlay, 100); // Retry after 100ms + } + } + checkOverlay(); + }); + ")) ), ########## use_cicerone(),