Add busy indicators (aka spinners)

docs/_quartodoc-core.yml

@@ -108,6 +108,8 @@ quartodoc:
         - ui.include_js
         - ui.insert_ui
         - ui.remove_ui
+        - ui.busy_indicators.use
+        - ui.busy_indicators.options
         - ui.fill.as_fillable_container
         - ui.fill.as_fill_item
         - ui.fill.remove_all_fill

docs/_quartodoc-express.yml

@@ -160,6 +160,8 @@ quartodoc:
         - name: express.ui.tags       # uses tags.rst template
           children: embedded
         - express.ui.TagList    # uses class.rst template
+        - express.ui.busy_indicators.use
+        - express.ui.busy_indicators.options
         # TODO: should these be included?
         # - express.ui.fill.as_fillable_container
         # - express.ui.fill.as_fill_item

examples/busy_indicators/app.py

@@ -0,0 +1,110 @@
+# pyright:basic
+import asyncio
+import concurrent.futures
+import time
+
+import matplotlib.pyplot as mpl
+import numpy as np
+import seaborn as sns
+from faicons import icon_svg
+
+from shiny import App, module, reactive, render, ui
+
+# Execute each extended task on a different thread.
+pool = concurrent.futures.ThreadPoolExecutor()
+
+# Use Agg backend for matplotlib so that it doesn't try to open a window.
+mpl.switch_backend("Agg")
+
+
+# -- Reusable card module --
+@module.ui
+def card_ui():
+    return ui.card(
+        ui.card_header(
+            "A plot",
+            ui.input_task_button("simulate", "Simulate", icon=icon_svg("shuffle")),
+            class_="d-flex justify-content-between align-items-center",
+        ),
+        ui.output_plot("plot"),
+    )
+
+
+@module.server
+def card_server(input, output, session, length, simulate_all):
+
+    def do_plot(wait_time=0.5):
+        time.sleep(wait_time)
+
+        # Without ax, seaborn works through side effects, so supply the ax to avoid
+        # one figure from affecting another.
+        fig, ax = mpl.subplots(1, 1)
+        sns.lineplot(x=np.arange(100), y=np.random.randn(100), ax=ax)
+        return fig
+
+    @ui.bind_task_button(button_id="simulate")
+    @reactive.extended_task
+    async def plot_task(wait_time=1):
+        loop = asyncio.get_event_loop()
+        return await loop.run_in_executor(pool, do_plot, wait_time)
+
+    @reactive.effect
+    @reactive.event(input.simulate, ignore_none=False)
+    def _():
+        plot_task(1 if input.simulate() == 0 else length())
+
+    @reactive.effect
+    @reactive.event(simulate_all)
+    def _():
+        plot_task(length())
+
+    @render.plot
+    def plot():
+        return plot_task.result()
+
+
+# -- Main app --
+app_ui = ui.page_sidebar(
+    ui.sidebar(
+        ui.input_task_button("simulate_all", "Simulate all", icon=icon_svg("shuffle")),
+        ui.input_selectize(
+            "indicator_types",
+            "Busy indicator types",
+            ["spinners", "pulse"],
+            multiple=True,
+            selected=["spinners", "pulse"],
+        ),
+        ui.input_slider("length", "Simulation length", 0, 500, 5),
+    ),
+    ui.layout_columns(
+        card_ui("a"),
+        card_ui("b"),
+        card_ui("c"),
+        card_ui("d"),
+        col_widths=[6, 6],
+    ),
+    card_ui("e"),
+    ui.output_ui("indicator_types_ui"),
+    fillable=True,
+    title="Busy indicators + extended tasks = ❤️",
+)
+
+
+def server(input, output, session):
+
+    @render.ui
+    def indicator_types_ui():
+        return ui.busy_indicators.use(
+            spinners="spinners" in input.indicator_types(),
+            pulse="pulse" in input.indicator_types(),
+        )
+
+    card_server("a", length=input.length, simulate_all=input.simulate_all)
+    card_server("b", length=input.length, simulate_all=input.simulate_all)
+    card_server("c", length=input.length, simulate_all=input.simulate_all)
+    card_server("d", length=input.length, simulate_all=input.simulate_all)
+    card_server("e", length=input.length, simulate_all=input.simulate_all)
+
+
+app = App(app_ui, server)
+app.on_shutdown(pool.shutdown)

scripts/htmlDependencies.R

@@ -19,7 +19,7 @@ withr::local_temp_libpaths()
 ignore <- capture.output({
   pak::pkg_install(c(
     "rstudio/bslib@main",
-    "rstudio/shiny@main",
+    "rstudio/shiny@busy-indicators",
     "rstudio/sass@main",
     "rstudio/htmltools@main"
   ))

shiny/_versions.py

@@ -1,4 +1,4 @@
-shiny_html_deps = "1.8.1.9000"
+shiny_html_deps = "1.8.1.9001"
 bslib = "0.7.0.9000"
 htmltools = "0.5.8.9000"
 bootstrap = "5.3.1"

shiny/api-examples/busy_indicators/app-core.py

@@ -0,0 +1,56 @@
+import os
+import time
+
+import numpy as np
+import seaborn as sns
+
+from shiny import App, render, ui
+
+app_ui = ui.page_sidebar(
+    ui.sidebar(
+        ui.input_selectize(
+            "indicator_types",
+            "Busy indicator types",
+            ["spinners", "pulse"],
+            multiple=True,
+            selected=["spinners", "pulse"],
+        ),
+        ui.busy_indicators.options(spinner_color="orange"),
+        ui.download_button("download", "Download source"),
+    ),
+    ui.card(
+        ui.card_header(
+            "Plot that takes a few seconds to render",
+            ui.input_task_button("simulate", "Simulate"),
+            class_="d-flex justify-content-between align-items-center",
+        ),
+        ui.output_plot("plot"),
+    ),
+    ui.output_ui("indicator_types_ui"),
+    title="Busy indicators demo",
+)
+
+
+def server(input):
+
+    @render.plot
+    def plot():
+        input.simulate()
+        time.sleep(3)
+        sns.lineplot(x=np.arange(100), y=np.random.randn(100))
+
+    @render.ui
+    def indicator_types_ui():
+        return ui.busy_indicators.use(
+            spinners="spinners" in input.indicator_types(),
+            pulse="pulse" in input.indicator_types(),
+        )
+
+    @render.download
+    def download():
+        time.sleep(3)
+        path = os.path.join(os.path.dirname(__file__), "app-core.py")
+        return path
+
+
+app = App(app_ui, server)

shiny/api-examples/busy_indicators/app-express.py

@@ -0,0 +1,47 @@
+import os
+import time
+
+import numpy as np
+import seaborn as sns
+
+from shiny.express import input, render, ui
+
+ui.page_opts(title="Busy spinner demo")
+
+with ui.sidebar():
+    ui.input_selectize(
+        "indicator_types",
+        "Busy indicator types",
+        ["spinners", "pulse"],
+        multiple=True,
+        selected=["spinners", "pulse"],
+    )
+    ui.busy_indicators.spinner_options(color="orange")
+
+    @render.download
+    def download():
+        time.sleep(3)
+        path = os.path.join(os.path.dirname(__file__), "app-express.py")
+        return path
+
+
+with ui.card():
+    ui.card_header(
+        "Plot that takes a few seconds to render",
+        ui.input_task_button("simulate", "Simulate"),
+        class_="d-flex justify-content-between align-items-center",
+    )
+
+    @render.plot
+    def plot():
+        input.simulate()
+        time.sleep(3)
+        sns.lineplot(x=np.arange(100), y=np.random.randn(100))
+
+
+@render.ui
+def indicator_types_ui():
+    return ui.busy_indicators.use(
+        spinners="spinners" in input.indicator_types(),
+        pulse="pulse" in input.indicator_types(),
+    )

shiny/express/ui/__init__.py

@@ -33,6 +33,10 @@
     fill,
 )
 
+from ...ui import (
+    busy_indicators,
+)
+
 from ...ui import (
     AccordionPanel,
     AnimationOptions,
@@ -176,6 +180,7 @@
     "strong",
     "tags",
     # Submodules
+    "busy_indicators",
     "fill",
     # Imports from ...ui
     "AccordionPanel",

shiny/html_dependencies.py

@@ -4,22 +4,26 @@
 
 from htmltools import HTMLDependency
 
+from . import __version__
+from .ui._html_deps_py_shiny import busy_indicators_dep
+
 
 def shiny_deps() -> list[HTMLDependency]:
     deps = [
         HTMLDependency(
             name="shiny",
-            version="0.0.1",
+            version=__version__,
             source={"package": "shiny", "subdir": "www/shared/"},
             script={"src": "shiny.js"},
             stylesheet={"href": "shiny.min.css"},
-        )
+        ),
+        busy_indicators_dep(),
     ]
     if os.getenv("SHINY_DEV_MODE") == "1":
         deps.append(
             HTMLDependency(
                 "shiny-devmode",
-                version="0.0.1",
+                version=__version__,
                 head="<script>window.__SHINY_DEV_MODE__ = true;</script>",
             )
         )

shiny/session/_session.py

@@ -784,6 +784,15 @@ async def uploadEnd(job_id: str, input_id: str) -> None:
     # ==========================================================================
     async def _handle_request(
         self, request: Request, action: str, subpath: Optional[str]
+    ) -> ASGIApp:
+        self._send_message_sync({"busy": "busy"})
+        try:
+            return await self._handle_request_impl(request, action, subpath)
+        finally:
+            self._send_message_sync({"busy": "idle"})
+
+    async def _handle_request_impl(
+        self, request: Request, action: str, subpath: Optional[str]
     ) -> ASGIApp:
         if action == "upload" and request.method == "POST":
             if subpath is None or subpath == "":

shiny/ui/__init__.py

@@ -37,6 +37,9 @@
 # Expose the fill module for extended usage: ex: ui.fill.as_fill_item(x).
 from . import fill
 
+# Export busy_indicators module
+from . import busy_indicators
+
 from ._accordion import (
     AccordionPanel,
     accordion,
@@ -355,6 +358,7 @@
     "em",
     "hr",
     # Submodules
+    "busy_indicators",
     "fill",
     # utils
     "js_eval",

shiny/ui/_html_deps_py_shiny.py

@@ -3,6 +3,7 @@
 from htmltools import HTMLDependency
 
 from .. import __version__
+from . import busy_indicators
 
 """
 HTML dependencies for internal dependencies such as dataframe or text area's autoresize.
@@ -52,3 +53,14 @@ def spin_dependency() -> HTMLDependency:
         source={"package": "shiny", "subdir": "www/shared/py-shiny/spin"},
         stylesheet={"href": "spin.css"},
     )
+
+
+def busy_indicators_dep() -> HTMLDependency:
+    return HTMLDependency(
+        "shiny-busy-indicators",
+        __version__,
+        source={"package": "shiny", "subdir": "www/shared/busy-indicators"},
+        stylesheet={"href": "busy-indicators.css"},
+        script={"src": "busy-indicators.js"},
+        head=busy_indicators.use(),  # Enable busy indicators by default.
+    )