Superset Embedded SDK加载仪表盘前出现黑屏及进度GIF，如何隐藏或修改？

方法1：自定义CSS覆盖样式 #

Superset的加载黑屏由内置加载组件的样式控制，你可以通过嵌入页面的自定义CSS修改或隐藏它：

• 直接隐藏黑屏：定位加载层DOM元素，强制隐藏

  /* 针对Superset嵌入的加载遮罩层 */
  .superset-loading-overlay {
    display: none !important;
  }
  /* 若上述类名不生效，尝试通用选择器 */
  .loading-container {
    display: none !important;
  }
  

• 修改黑屏颜色：替换背景色，可选隐藏默认进度GIF

  .superset-loading-overlay {
    background-color: #f5f5f5 !important; /* 替换为与自有应用匹配的颜色 */
  }
  /* 隐藏默认进度GIF（可选） */
  .superset-loading-overlay img {
    display: none !important;
  }
  

  注意：确保这段CSS在Superset嵌入的iframe加载后生效，或有权限的话直接注入到Superset静态资源中。

方法2：调整Superset配置（需权限） #

若能修改Superset的前端或后端配置，可从源头控制加载遮罩：

• 修改前端加载组件：找到superset-frontend/src/components/Loading/LoadingOverlay.jsx（对应版本路径可能有差异），调整组件样式或逻辑，比如默认隐藏遮罩、修改背景色。
• 测试嵌入参数：部分Superset版本支持在嵌入URL中添加?hide_loading_overlay=true参数，尝试控制加载遮罩显示。

方法3：通过iframe加载时机控制 #

在自有应用中先隐藏iframe，待仪表盘加载完成后再显示，用自有应用的加载状态替代Superset默认黑屏：

const supersetIframe = document.getElementById('superset-embed-iframe');
// 初始隐藏iframe
supersetIframe.style.display = 'none';
// 监听加载完成事件
supersetIframe.onload = function() {
  supersetIframe.style.display = 'block';
  // 移除自有应用的自定义加载遮罩（如有）
  document.getElementById('app-custom-loader').style.display = 'none';
};

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