python - 使用 plot.ly Dash 在等待结果时显示加载符号

Question

在我的Dash基于 -based 的应用程序，一个按钮触发一个长时间运行的计算。在结果尚未出现时显示加载动画并使按钮处于非事件状态以便在计算完成之前不会再次单击它不是很好吗？

我正在使用 Bulma用于 UI 设计，并希望为此目的使用 button is-loading CSS 类。

我的第一个想法是有两个回调:一个由按钮点击触发以将按钮设置为 is-loading，另一个由输出更改触发以将其设置回正常状态。

@app.callback(
    Output('enter-button', 'className'),
    [
        Input('graph', 'figure')
    ],
)
def set_trend_enter_button_loading(figure_changed):
    return "button is-large is-primary is-outlined"


@app.callback(
    Output('enter-button', 'className'),
    [
        Input('enter-button', 'n_clicks')
    ],
)
def set_trend_enter_button_loading(n_clicks):
    return "button is-large is-primary is-outlined is-loading"

显然它不能那样工作:

dash.exceptions.CantHaveMultipleOutputs:
You have already assigned a callback to the output
with ID "enter-button" and property "className". An output can only have
a single callback function. Try combining your inputs and
callback functions together into one function.

有什么想法可以实现吗？

Answer 1

上周我遇到了同样的问题，甚至尝试使用 Javascript 实现禁用按钮的行为，但最终放弃了。我在 plotly forums 上看到过这个讨论，并且显然需要此类功能，但我认为在当前版本中无法轻松实现。

是可能的一件事，并且被 Dash 开发人员提到为临时解决方案，是添加一个全局加载屏幕。简而言之，您需要将以下 CSS 添加到您的样式表中:

@keyframes fadein {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 0.5;
    }
}

._dash-loading-callback {
  font-family: sans-serif;
  padding-top: 50px;
  color: rgb(90, 90, 90);
  
  /* The banner */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  cursor: progress;

  opacity: 0;
  background-color: rgb(250, 250, 250);
  /* Delay animation by 1s to prevent flashing 
     and smoothly transition the animation over 0.5s 
   */
  -moz-animation: fadein 0.5s ease-in 1s forwards; /* Firefox */
  -webkit-animation: fadein 0.5s ease-in 1s forwards; /* Safari and Chrome */
  -o-animation: fadein 0.5s ease-in 1s forwards; /* Opera */
    animation: fadein 0.5s ease-in 1s forwards;
}

一些说明:

1. _dash-loading-callback 选择器选择一个 div，每次回调时添加到 body 元素的末尾，完成后移除。
2. 您可以通过为 _dash-loading-callback 定义背景 GIF 添加加载动画。
3. 上述 CSS 中定义的动画旨在防止加载屏幕在短回调时闪烁。它设置为在一秒钟后淡入，因此它只会在长时间加载操作时出现。您当然可以使用这些设置。

2022 年更新

1. 评论中提到，在较新的版本中，类名已从 _dash-loading-callback 更改为 _dash-loading。我还没有机会对此进行测试。
2. 现在似乎有更简单、更现代的方法可以实现此行为，无需自定义 CSS。参见示例 Dash Loading Spinners .