如何在Vaadin 8的按钮点击事件中设置LoadingIndicatorConfiguration实现加载指示器即时显示

核心矛盾说明 #

默认全局LoadingIndicator配置为：

• 第一阶段延迟：300ms
• 第二阶段延迟：600ms
• 第三阶段延迟：Integer.MAX
  由于服务端修改LoadingIndicatorConfiguration的配置需要等待当前RPC请求处理完成才会同步到前端，无法满足点击按钮立即触发加载指示器的需求，直接前端调用原生展示方法也会被全局延迟配置拦截。

原生API实现方案（无需自定义CSS，无额外DOM开销） #

通过给按钮添加客户端侧点击监听，在触发服务端请求前直接修改前端LoadingIndicator的运行时配置，请求完成后自动恢复默认值即可：

1. 先给需要即时触发加载的按钮设置唯一ID

button.setId("immediate-loading-btn-" + UUID.randomUUID().toString().replace("-", ""));

2. 绑定客户端预处理逻辑和服务端业务逻辑

// 客户端侧点击预处理，直接修改前端加载延迟配置
JavaScript.getCurrent().execute(
    "document.getElementById('" + button.getId() + "').addEventListener('click', function() {" +
    // 保存原配置
    "  var originalFirstDelay = vaadin.loadingIndicator.getFirstDelay();" +
    // 临时修改为无延迟
    "  vaadin.loadingIndicator.setFirstDelay(0);" +
    // 100ms后自动恢复原配置，不影响其他场景的加载逻辑
    "  setTimeout(function() {" +
    "    vaadin.loadingIndicator.setFirstDelay(originalFirstDelay);" +
    "  }, 100);" +
    "});"
);

// 原有服务端点击逻辑不变
button.addClickListener(event -> {
    // 你的业务处理代码
});

自定义加载层方案优化 #

如果倾向使用自定义加载层，可优化原有方案的冗余问题，无需逐个按钮绑定事件：

1. 页面初始化时执行一次全局JS注入，提前创建加载层DOM并绑定全局事件

JavaScript.getCurrent().execute(
    // 提前创建自定义加载层，默认隐藏
    "var customLoadingOverlay = document.createElement('div');" +
    "customLoadingOverlay.className = 'v-loading-indicator';" +
    "customLoadingOverlay.style.display = 'none';" +
    "document.body.prepend(customLoadingOverlay);" +
    // 全局监听带指定样式类的按钮点击
    "document.addEventListener('click', function(e) {" +
    "  if (e.target.closest('.immediate-loading')) {" +
    "    customLoadingOverlay.style.display = 'block';" +
    "  }" +
    "});" +
    // 监听Vaadin UI更新事件，请求结束后自动隐藏加载层
    "vaadin.registerListener('uiUpdated', function() {" +
    "  customLoadingOverlay.style.display = 'none';" +
    "});"
);

2. 给需要即时加载的按钮添加对应样式类即可

button.addStyleName("immediate-loading");

内容的提问来源于stack exchange，提问作者Michael Kročka