如何用pywebview实现Dash应用加载完成后切换加载动画？

问题背景 #

使用pywebview 5.3.2展示Dash应用时，希望用自定义加载动画作为启动界面，但当前加载HTML会一直显示，无法自动切换到Dash应用内容。

核心问题分析 #

在webview.create_window()中同时传入url和html时，html的优先级更高，导致Dash应用的URL不会被加载，只会持续显示加载动画的静态HTML。

解决方案 #

1. 先创建窗口并加载加载动画的HTML，不指定目标URL
2. 在后台启动Flask/Dash服务器，避免阻塞pywebview的UI线程
3. 服务器就绪后，通过pywebview的API将窗口导航到Dash应用地址，自动替换加载动画

修改后的完整代码 #

from dash import Dash, html
from flask import Flask
import webview
import threading
import time

server = Flask(__name__)
app = Dash(__name__, server=server)

app.layout = html.Div("THIS IS TEXT!")

# 加载动画HTML
html_load = """
<style>
    body {
        background-color: #333;
        color: white;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    }

    .main-container {
        width: 100%;
        height: 90vh;
        display: flex;
        display: -webkit-flex;
        align-items: center;
        -webkit-align-items: center;
        justify-content: center;
        -webkit-justify-content: center;
        overflow: hidden;
    }

    .loader {
      font-size: 10px;
      margin: 50px auto;
      text-indent: -9999em;
      width: 3rem;
      height: 3rem;
      border-radius: 50%;
      background: #ffffff;
      background: -moz-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
      background: -webkit-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
      background: -o-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
      background: -ms-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
      background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
      position: relative;
      -webkit-animation: load3 1.4s infinite linear;
      animation: load3 1.4s infinite linear;
      -webkit-transform: translateZ(0);
      -ms-transform: translateZ(0);
      transform: translateZ(0);
    }
    .loader:before {
      width: 50%;
      height: 50%;
      background: #ffffff;
      border-radius: 100% 0 0 0;
      position: absolute;
      top: 0;
      left: 0;
      content: '';
    }
    .loader:after {
      background: #333;
      width: 75%;
      height: 75%;
      border-radius: 50%;
      content: '';
      margin: auto;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
    }
    @-webkit-keyframes load3 {
      0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
      }
      100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }
    @keyframes load3 {
      0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
      }
      100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }
</style>
<body>
  <div class="main-container">
      <div class="loader">Loading...</div>
  </div>
</body>
"""

def run_server():
    # 启动Flask服务器，端口可自定义
    server.run(port=8050, debug=False)

if __name__ == '__main__':
    # 创建窗口，仅加载加载动画HTML
    webview.create_window("App Name", html=html_load)
    
    # 在后台线程启动服务器，避免阻塞UI
    threading.Thread(target=run_server, daemon=True).start()
    
    # 等待服务器启动（可根据实际情况调整时长）
    time.sleep(1)
    
    # 导航到Dash应用地址，替换加载动画
    webview.windows[0].load_url("http://localhost:8050")
    
    webview.start()

关键说明 #

• 移除原代码中create_window的url参数，确保优先加载动画HTML
• 使用后台线程启动Flask服务器，避免阻塞pywebview的UI渲染
• 服务器启动后调用load_url()切换到Dash应用，自动替换加载界面
• 可根据服务器启动速度调整time.sleep()时长，或添加服务可用性检测逻辑提升可靠性

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