fix: Ensure paired server warning is removed (#47)

Author: gadenbuie

CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to `shinyswatch` will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [UNRELEASED]
+
+### Bug fixes
+
+* The theme picker's message warning users to include `shinyswatch.theme_picker_server()` is now correctly hidden if the app takes longer than expected to start up. (#47)
+
 ## [0.7.0] - 2024-07-18
 
 ### Breaking changes

shinyswatch/_theme_picker.py

@@ -63,13 +63,23 @@ def theme_picker_ui(default: DEPRECATED_PARAM = DEPRECATED) -> ui.TagChild:
         "Please use the `theme` argument of a Shiny page function to set the initial theme.",
     )
 
-    return ui.tags.div(
+    return ui.TagList(
         # Have a div that is hidden by default and is shown if the server does not
         # disable it. This is nice as the warning will be displayed if the server method
         # is not run.
         ui.div(
-            "!! Please include `shinyswatch.theme_picker_server()` in your server function !!",
-            style="color: var(--bs-danger); background-color: var(--bs-light); display: none;",
+            ui.div(
+                ui.HTML("&#9888;<br>"),  # warning triangle
+                "Please include ",
+                ui.code(
+                    "shinyswatch.theme_picker_server()",
+                    style="overflow-wrap: anywhere;",
+                ),
+                " in your server function.",
+            ),
+            style="display: none;",
+            class_="alert alert-danger align-items-center",
+            role="alert",
             id="shinyswatch_picker_warning",
         ),
         ui.input_select(
@@ -124,9 +134,14 @@ def server(input):
     session = require_active_session(None)
     input = session.input
 
+    async def remove_theme_picker_warning():
+        await session.send_custom_message("shinyswatch-hide-warning", {})
+
     @reactive.effect
     @reactive.event(input.__shinyswatch_initial_theme)
-    def _():
+    async def _():
+        await remove_theme_picker_warning()
+
         init_theme_name = input.__shinyswatch_initial_theme()["name"]
         last_theme = input.__shinyswatch_initial_theme()["saved"]
 
@@ -171,4 +186,4 @@ async def _():
 
     @reactive.effect
     async def _():
-        await session.send_custom_message("shinyswatch-hide-warning", {})
+        await remove_theme_picker_warning()

shinyswatch/picker/theme_picker.js

@@ -1,4 +1,4 @@
-/* globals Shiny */
+/* globals Shiny,$ */
 (function () {
   // Stores the default theme links, if not one of the shinyswatch themes
   // Is always an array, even if there is only one link
@@ -211,13 +211,28 @@
     window.Shiny.setInputValue('__shinyswatch_initial_theme', initTheme)
   }
 
-  const displayWarning = setTimeout(function () {
-    window.document.querySelector('#shinyswatch_picker_warning').style.display =
-      'block'
-  }, 1000)
+  function removeWarning() {
+    const warning = document.getElementById("shinyswatch_picker_warning")
+    if (warning) {
+      warning.remove()
+    }
+  }
+
+  function showWarning() {
+    const warning = document.getElementById('shinyswatch_picker_warning')
+    if (warning) {
+      warning.style.display = null
+    }
+  }
+
+  if (typeof window.Shiny.setInputValue === "function") {
+    setTimeout(showWarning, 1000)
+  } else {
+    $(window).one("shiny:idle", showWarning)
+  }
 
   Shiny.addCustomMessageHandler('shinyswatch-hide-warning', function (_) {
-    window.clearTimeout(displayWarning)
+    removeWarning()
   })
 
   Shiny.addCustomMessageHandler('shinyswatch-pick-theme', replaceShinyswatchCSS)