如何在加载JavaScript文件之前显示旋转器?

huangapple go评论84阅读模式
英文:

How to display a spinner before a JavaScript file is loaded?

问题

我有一个Shiny应用程序,加载了一个巨大的JavaScript文件(>17Mo)。我想要在JavaScript文件加载完成之前显示一个旋转器。这在shinybusy中无法实现:旋转器只会在JS文件加载完成后出现。

英文:

I have a Shiny app which load a huge JavaScript file (>17Mo). I'd like show a spinner until the JavaScript file is loaded. That does not work with shinybusy: the spinner only appears after the JS file has been loaded.

library(shiny)
library(shinybusy)
library(bslib)

ui <- page_sidebar(
  tags$head(
    tags$script(src = "HUGE_JAVASCRIPT_FILE.js")
  ),
  
  busy_start_up(
    loader = spin_epic("orbit", color = "#FFF"),
    text = "Loading...",
    timeout = 1500,
    color = "#FFF",
    background = "#112446"
  ),
  
  title = "Gröbner implicitization with GIAC",
  
  sidebar = sidebar(
    textInput(
      "equations",
      "Equations: ",
      value = "x = a*cost, y = b*sint"
    ),
    textInput(
      "relations",
      "Relations: ",
      value = "cost^2 + sint^2 = 1"
    ),
    textInput(
      "symbols",
      "Symbols: ",
      value = "cost, sint, a, b"
    ),
    actionButton("go", "Run", class = "btn-primary")
  )
)

server <- function(input, output, session) { }

shinyApp(ui, server)

答案1

得分: 2

我会添加defer属性,您可以使用onload属性来运行一些代码,例如Shiny.setInputValue以通知服务器关闭旋转器。我们只需要引入一个小的延迟(setTimeout),以确保Shiny框架已加载(如果有人找到不需要此解决方法的解决方案,我会非常高兴学到)。

设置

library(here)
library(data.table)

dir.create("www")
fn <- here("www", "larger.js")
fwrite(list(c(rep("console.log(1);", 2.5e4), "alert('done');")), fn)

文件夹结构

.
├── app.R
└── www
    └── larger.js

代码

library(shiny)
library(shinybusy)
library(bslib)

ui <- page_sidebar(
   tags$head(
      tags$script(HTML("function done() {
                         setTimeout(() => Shiny.setInputValue('done', true), 100)
                       }")),
      tags$script(src = "larger.js", defer = NA, onload = "done()")
   ),
   busy_start_up(
      loader = spin_epic("orbit", color = "#FFF"),
      text = "Loading...",
      mode = "manual",
      color = "#FFF",
      background = "#112446"
   ),
   
   title = "Gr&#246;bner implicitization with GIAC",
   
   sidebar = sidebar(
      textInput(
         "equations",
         "Equations: ",
         value = "x = a*cost, y = b*sint"
      ),
      textInput(
         "relations",
         "Relations: ",
         value = "cost^2 + sint^2 = 1"
      ),
      textInput(
         "symbols",
         "Symbols: ",
         value = "cost, sint, a, b"
      ),
      actionButton("go", "Run", class = "btn-primary")
   )
)

server <- function(input, output, session) {
   observeEvent(input$done, 
                remove_start_up())
}

shinyApp(ui, server)
英文:

I would add the defer property and you can use the onload property to run some code once it is loaded, for instance Shiny.setInputValue to notify the server to close the spinner. We just have to introduce a small delay (setTimeout) , to make sure the Shiny framework is loaded (if somebody finds a solution which does not require this hack, I would be very happy to learn).

Setup

library(here)
library(data.table)

dir.create(&quot;www&quot;)
fn &lt;- here(&quot;www&quot;, &quot;larger.js&quot;)
fwrite(list(c(rep(&quot;console.log(1);&quot;, 2.5e4), &quot;alert(&#39;done&#39;);&quot;)), fn)

Folder Structure

.
├── app.R
└── www
    └── larger.js

Code

library(shiny)
library(shinybusy)
library(bslib)

ui &lt;- page_sidebar(
   tags$head(
      tags$script(HTML(&quot;function done() {
                         setTimeout(() =&gt; Shiny.setInputValue(&#39;done&#39;, true), 100)
                       }&quot;)),
      tags$script(src = &quot;larger.js&quot;, defer = NA, onload = &quot;done()&quot;)
   ),
   busy_start_up(
      loader = spin_epic(&quot;orbit&quot;, color = &quot;#FFF&quot;),
      text = &quot;Loading...&quot;,
      mode = &quot;manual&quot;,
      color = &quot;#FFF&quot;,
      background = &quot;#112446&quot;
   ),
   
   title = &quot;Gr&#246;bner implicitization with GIAC&quot;,
   
   sidebar = sidebar(
      textInput(
         &quot;equations&quot;,
         &quot;Equations: &quot;,
         value = &quot;x = a*cost, y = b*sint&quot;
      ),
      textInput(
         &quot;relations&quot;,
         &quot;Relations: &quot;,
         value = &quot;cost^2 + sint^2 = 1&quot;
      ),
      textInput(
         &quot;symbols&quot;,
         &quot;Symbols: &quot;,
         value = &quot;cost, sint, a, b&quot;
      ),
      actionButton(&quot;go&quot;, &quot;Run&quot;, class = &quot;btn-primary&quot;)
   )
)

server &lt;- function(input, output, session) {
   observeEvent(input$done, 
                remove_start_up())
}

shinyApp(ui, server)

huangapple
  • 本文由 发表于 2023年7月17日 18:26:14
  • 转载请务必保留本文链接:https://go.coder-hub.com/76703544.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定