如何禁用 Vaadin 加载行（页面顶部）答案

【问题标题】：How to disable Vaadin loading line (top of the page)如何禁用 Vaadin 加载行（页面顶部）
【发布时间】：2017-03-24 14:04:04
【问题描述】：

我猜是标准 Vaadin Valo 主题。

有时，当应用程序正在处理信息和/或加载新页面时，页面顶部会出现一条蓝线。必须大约 4px 宽。如果加载时间过长，线条的宽度会增加，甚至会开始发光（从蓝色变为白色，然后不断）。

此负载指示器会分散用户的注意力，因此是不受欢迎的。

如何在视觉上完全禁用此负载指示器？我会采取任何解决方案 - 即使是 CSS hack（如果适用）也可以。

【问题讨论】：

vaadin.com/forum#!/thread/9403425 但实际上这条蓝线/指标也告诉用户他目前无法与网站互动。

标签： vaadin vaadin7

【解决方案1】：

一个简单的解决方案是更改加载指示器的时间，因为这可以在 Java 中完成。延迟以毫秒为单位设置，如果您将第一个延迟设置为 3000，如下所示，它将在 3 秒后才显示加载指示器。

UI.getCurrent().getLoadingIndicatorConfiguration().setFirstDelay(3000);
UI.getCurrent().getLoadingIndicatorConfiguration().setSecondDelay(4000);
UI.getCurrent().getLoadingIndicatorConfiguration().setThirdDelay(100000);

您只需为每个 UI 执行一次。

【讨论】：

【解决方案2】：

你可以使用下面的css：

  .v-loading-indicator {
    visibility: hidden;
  }

如果您使用的是 SCSS 主题（您提到了 Valo），您可以将其作为主题 mixin 的一部分放入您的 VAADIN/themes/mytheme/mytheme.scss 文件中：

@mixin mytheme {
  @include valo;

  // Insert here
  .v-loading-indicator {
    visibility: hidden;
  }
}

【讨论】：