Vaadin 24：加载指示器显示时将光标改为等待样式

在Vaadin 24中，默认顶部加载指示器激活时，<body>标签会自动被添加vaadin-loading类，你可以利用这个类全局设置等待光标：

body.vaadin-loading {
  cursor: wait;
  /* 可选：确保子元素继承光标样式，避免局部光标覆盖 */
  * {
    cursor: inherit;
  }
}

说明 #

• 将这段CSS添加到全局样式文件（比如frontend/styles/shared-styles.css），或特定视图的样式作用域内即可生效。
• 当Grid筛选触发加载时，Vaadin会自动给<body>加上vaadin-loading类，此时整个页面光标变为等待样式；加载完成后该类会被移除，光标恢复正常。
• 若需仅针对Grid区域设置等待光标，可监听Grid的loading-changed事件手动控制样式类：

// 假设你的Grid实例为grid
grid.addEventListener('loading-changed', (e) => {
  const container = grid.parentElement;
  e.detail.value ? container.classList.add('grid-loading') : container.classList.remove('grid-loading');
});

对应的CSS：

.grid-loading {
  cursor: wait;
}

内容的提问来源于stack exchange，提问作者clickguy