dash-startup-loading-plugin 1.0.1__tar.gz → 1.0.2__tar.gz
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- {dash_startup_loading_plugin-1.0.1/src/dash_startup_loading_plugin.egg-info → dash_startup_loading_plugin-1.0.2}/PKG-INFO +4 -3
- {dash_startup_loading_plugin-1.0.1 → dash_startup_loading_plugin-1.0.2}/README.md +3 -2
- {dash_startup_loading_plugin-1.0.1 → dash_startup_loading_plugin-1.0.2}/README.zh-CN.md +3 -2
- {dash_startup_loading_plugin-1.0.1 → dash_startup_loading_plugin-1.0.2}/pyproject.toml +7 -2
- dash_startup_loading_plugin-1.0.2/src/dash_startup_loading_plugin/README.md +261 -0
- dash_startup_loading_plugin-1.0.2/src/dash_startup_loading_plugin/README.zh-CN.md +250 -0
- {dash_startup_loading_plugin-1.0.1 → dash_startup_loading_plugin-1.0.2}/src/dash_startup_loading_plugin/__init__.py +1 -1
- {dash_startup_loading_plugin-1.0.1 → dash_startup_loading_plugin-1.0.2/src/dash_startup_loading_plugin.egg-info}/PKG-INFO +4 -3
- {dash_startup_loading_plugin-1.0.1 → dash_startup_loading_plugin-1.0.2}/src/dash_startup_loading_plugin.egg-info/SOURCES.txt +2 -0
- dash_startup_loading_plugin-1.0.2/tests/test_documentation.py +72 -0
- dash_startup_loading_plugin-1.0.1/tests/test_documentation.py +0 -28
- {dash_startup_loading_plugin-1.0.1 → dash_startup_loading_plugin-1.0.2}/LICENSE +0 -0
- {dash_startup_loading_plugin-1.0.1 → dash_startup_loading_plugin-1.0.2}/MANIFEST.in +0 -0
- {dash_startup_loading_plugin-1.0.1 → dash_startup_loading_plugin-1.0.2}/setup.cfg +0 -0
- {dash_startup_loading_plugin-1.0.1 → dash_startup_loading_plugin-1.0.2}/src/dash_startup_loading_plugin/examples/__init__.py +0 -0
- {dash_startup_loading_plugin-1.0.1 → dash_startup_loading_plugin-1.0.2}/src/dash_startup_loading_plugin/examples/__main__.py +0 -0
- {dash_startup_loading_plugin-1.0.1 → dash_startup_loading_plugin-1.0.2}/src/dash_startup_loading_plugin/examples/antd.py +0 -0
- {dash_startup_loading_plugin-1.0.1 → dash_startup_loading_plugin-1.0.2}/src/dash_startup_loading_plugin/examples/basic.py +0 -0
- {dash_startup_loading_plugin-1.0.1 → dash_startup_loading_plugin-1.0.2}/src/dash_startup_loading_plugin/examples/cli.py +0 -0
- {dash_startup_loading_plugin-1.0.1 → dash_startup_loading_plugin-1.0.2}/src/dash_startup_loading_plugin/examples/fac.py +0 -0
- {dash_startup_loading_plugin-1.0.1 → dash_startup_loading_plugin-1.0.2}/src/dash_startup_loading_plugin/examples/mantine.py +0 -0
- {dash_startup_loading_plugin-1.0.1 → dash_startup_loading_plugin-1.0.2}/src/dash_startup_loading_plugin/examples/shared.py +0 -0
- {dash_startup_loading_plugin-1.0.1 → dash_startup_loading_plugin-1.0.2}/src/dash_startup_loading_plugin/plugin.py +0 -0
- {dash_startup_loading_plugin-1.0.1 → dash_startup_loading_plugin-1.0.2}/src/dash_startup_loading_plugin/resources/loading.css +0 -0
- {dash_startup_loading_plugin-1.0.1 → dash_startup_loading_plugin-1.0.2}/src/dash_startup_loading_plugin/resources/loading.js +0 -0
- {dash_startup_loading_plugin-1.0.1 → dash_startup_loading_plugin-1.0.2}/src/dash_startup_loading_plugin/resources/theme.js +0 -0
- {dash_startup_loading_plugin-1.0.1 → dash_startup_loading_plugin-1.0.2}/src/dash_startup_loading_plugin.egg-info/dependency_links.txt +0 -0
- {dash_startup_loading_plugin-1.0.1 → dash_startup_loading_plugin-1.0.2}/src/dash_startup_loading_plugin.egg-info/entry_points.txt +0 -0
- {dash_startup_loading_plugin-1.0.1 → dash_startup_loading_plugin-1.0.2}/src/dash_startup_loading_plugin.egg-info/requires.txt +0 -0
- {dash_startup_loading_plugin-1.0.1 → dash_startup_loading_plugin-1.0.2}/src/dash_startup_loading_plugin.egg-info/top_level.txt +0 -0
- {dash_startup_loading_plugin-1.0.1 → dash_startup_loading_plugin-1.0.2}/tests/test_examples.py +0 -0
- {dash_startup_loading_plugin-1.0.1 → dash_startup_loading_plugin-1.0.2}/tests/test_plugin.py +0 -0
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
Metadata-Version: 2.4
|
|
2
2
|
Name: dash-startup-loading-plugin
|
|
3
|
-
Version: 1.0.
|
|
3
|
+
Version: 1.0.2
|
|
4
4
|
Summary: A configurable full-screen startup loading overlay for Dash apps, packaged as a Dash Hooks plugin.
|
|
5
5
|
Author-email: Ethan Zhang <ethan.zhang2016@gmail.com>
|
|
6
6
|
License-Expression: MIT
|
|
@@ -14,7 +14,8 @@ Dynamic: license-file
|
|
|
14
14
|
|
|
15
15
|
# dash-startup-loading-plugin
|
|
16
16
|
|
|
17
|
-
[English](README.md) |
|
|
17
|
+
[English](https://github.com/C0deBeez/dash-startup-loading-plugin/blob/master/README.md) |
|
|
18
|
+
[简体中文](https://github.com/C0deBeez/dash-startup-loading-plugin/blob/master/README.zh-CN.md)
|
|
18
19
|
|
|
19
20
|
An installable [Dash Hooks plugin](https://dash.plotly.com/dash-plugins-using-hooks)
|
|
20
21
|
that replaces Dash's initial loading presentation with a configurable
|
|
@@ -33,7 +34,7 @@ document.
|
|
|
33
34
|
## Installation
|
|
34
35
|
|
|
35
36
|
```bash
|
|
36
|
-
pip install "dash-startup-loading-plugin>=1.0.
|
|
37
|
+
pip install "dash-startup-loading-plugin>=1.0.2"
|
|
37
38
|
```
|
|
38
39
|
|
|
39
40
|
Dash discovers the plugin through its `dash_hooks` entry point. Installing the
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
# dash-startup-loading-plugin
|
|
2
2
|
|
|
3
|
-
[English](README.md) |
|
|
3
|
+
[English](https://github.com/C0deBeez/dash-startup-loading-plugin/blob/master/README.md) |
|
|
4
|
+
[简体中文](https://github.com/C0deBeez/dash-startup-loading-plugin/blob/master/README.zh-CN.md)
|
|
4
5
|
|
|
5
6
|
An installable [Dash Hooks plugin](https://dash.plotly.com/dash-plugins-using-hooks)
|
|
6
7
|
that replaces Dash's initial loading presentation with a configurable
|
|
@@ -19,7 +20,7 @@ document.
|
|
|
19
20
|
## Installation
|
|
20
21
|
|
|
21
22
|
```bash
|
|
22
|
-
pip install "dash-startup-loading-plugin>=1.0.
|
|
23
|
+
pip install "dash-startup-loading-plugin>=1.0.2"
|
|
23
24
|
```
|
|
24
25
|
|
|
25
26
|
Dash discovers the plugin through its `dash_hooks` entry point. Installing the
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
# dash-startup-loading-plugin
|
|
2
2
|
|
|
3
|
-
[English](README.md) |
|
|
3
|
+
[English](https://github.com/C0deBeez/dash-startup-loading-plugin/blob/master/README.md) |
|
|
4
|
+
[简体中文](https://github.com/C0deBeez/dash-startup-loading-plugin/blob/master/README.zh-CN.md)
|
|
4
5
|
|
|
5
6
|
一个基于 [Dash Hooks 插件规范](https://dash.plotly.com/dash-plugins-using-hooks)
|
|
6
7
|
的可安装插件,用于将 Dash 初始加载提示替换为可配置的全屏 loading 遮罩。
|
|
@@ -17,7 +18,7 @@
|
|
|
17
18
|
## 安装
|
|
18
19
|
|
|
19
20
|
```bash
|
|
20
|
-
pip install "dash-startup-loading-plugin>=1.0.
|
|
21
|
+
pip install "dash-startup-loading-plugin>=1.0.2"
|
|
21
22
|
```
|
|
22
23
|
|
|
23
24
|
Dash 会通过 `dash_hooks` entry point 自动发现插件。安装后,默认 loading
|
|
@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
|
|
|
4
4
|
|
|
5
5
|
[project]
|
|
6
6
|
name = "dash-startup-loading-plugin"
|
|
7
|
-
version = "1.0.
|
|
7
|
+
version = "1.0.2"
|
|
8
8
|
description = "A configurable full-screen startup loading overlay for Dash apps, packaged as a Dash Hooks plugin."
|
|
9
9
|
readme = "README.md"
|
|
10
10
|
requires-python = ">=3.9"
|
|
@@ -38,7 +38,12 @@ include-package-data = true
|
|
|
38
38
|
where = ["src"]
|
|
39
39
|
|
|
40
40
|
[tool.setuptools.package-data]
|
|
41
|
-
dash_startup_loading_plugin = [
|
|
41
|
+
dash_startup_loading_plugin = [
|
|
42
|
+
"README.md",
|
|
43
|
+
"README.zh-CN.md",
|
|
44
|
+
"resources/*.css",
|
|
45
|
+
"resources/*.js",
|
|
46
|
+
]
|
|
42
47
|
|
|
43
48
|
[tool.pytest.ini_options]
|
|
44
49
|
addopts = "-q -p no:cacheprovider"
|
|
@@ -0,0 +1,261 @@
|
|
|
1
|
+
# dash-startup-loading-plugin
|
|
2
|
+
|
|
3
|
+
[English](https://github.com/C0deBeez/dash-startup-loading-plugin/blob/master/README.md) |
|
|
4
|
+
[简体中文](https://github.com/C0deBeez/dash-startup-loading-plugin/blob/master/README.zh-CN.md)
|
|
5
|
+
|
|
6
|
+
An installable [Dash Hooks plugin](https://dash.plotly.com/dash-plugins-using-hooks)
|
|
7
|
+
that replaces Dash's initial loading presentation with a configurable
|
|
8
|
+
full-screen overlay.
|
|
9
|
+
|
|
10
|
+
The plugin injects its CSS and JavaScript into Dash's normal index document
|
|
11
|
+
before React mounts. Applications do not need to copy assets or replace
|
|
12
|
+
`index_string`, and Dash's built-in `<div class="_dash-loading">` remains in the
|
|
13
|
+
document.
|
|
14
|
+
|
|
15
|
+
## Requirements
|
|
16
|
+
|
|
17
|
+
- Python 3.9 or later
|
|
18
|
+
- Dash 3.0.3 or later
|
|
19
|
+
|
|
20
|
+
## Installation
|
|
21
|
+
|
|
22
|
+
```bash
|
|
23
|
+
pip install "dash-startup-loading-plugin>=1.0.2"
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
Dash discovers the plugin through its `dash_hooks` entry point. Installing the
|
|
27
|
+
package enables the default loading overlay without an explicit import.
|
|
28
|
+
|
|
29
|
+
When Dash Ant Design (`dash_antd_components`) is installed, the plugin detects
|
|
30
|
+
it automatically and applies matching light and dark loading backgrounds.
|
|
31
|
+
|
|
32
|
+
## Quick start
|
|
33
|
+
|
|
34
|
+
The default configuration requires no plugin-specific code:
|
|
35
|
+
|
|
36
|
+
```python
|
|
37
|
+
from dash import Dash, html
|
|
38
|
+
|
|
39
|
+
app = Dash(__name__)
|
|
40
|
+
app.layout = html.Main(
|
|
41
|
+
[
|
|
42
|
+
html.H1("My Dash app"),
|
|
43
|
+
html.P("The overlay closes after this layout is ready."),
|
|
44
|
+
]
|
|
45
|
+
)
|
|
46
|
+
|
|
47
|
+
if __name__ == "__main__":
|
|
48
|
+
app.run(debug=True)
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
Call `configure()` before creating `Dash` when custom behavior is needed:
|
|
52
|
+
|
|
53
|
+
```python
|
|
54
|
+
from dash import Dash, html
|
|
55
|
+
from dash_startup_loading_plugin import configure
|
|
56
|
+
|
|
57
|
+
configure(
|
|
58
|
+
required_selectors=["#header", "#sidebar-menu"],
|
|
59
|
+
pending_selector="[data-async-placeholder]",
|
|
60
|
+
timeout_ms=6000,
|
|
61
|
+
minimum_display_ms=250,
|
|
62
|
+
fade_duration_ms=180,
|
|
63
|
+
)
|
|
64
|
+
|
|
65
|
+
app = Dash(__name__)
|
|
66
|
+
app.layout = html.Main(
|
|
67
|
+
[
|
|
68
|
+
html.Header("Header", id="header"),
|
|
69
|
+
html.Nav("Sidebar", id="sidebar-menu"),
|
|
70
|
+
]
|
|
71
|
+
)
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
## Component-library integrations
|
|
75
|
+
|
|
76
|
+
Component libraries are not dependencies of this package. Install only the
|
|
77
|
+
libraries used by the application.
|
|
78
|
+
|
|
79
|
+
### Dash Ant Design
|
|
80
|
+
|
|
81
|
+
Dash Ant Design is detected automatically. `configure_dac()` is only required
|
|
82
|
+
to override its defaults:
|
|
83
|
+
|
|
84
|
+
```bash
|
|
85
|
+
pip install dash-ant-design
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
The plugin does not impose a Dash Ant Design version constraint. Use the
|
|
89
|
+
version compatible with the application's Python and Dash versions.
|
|
90
|
+
|
|
91
|
+
```python
|
|
92
|
+
from dash_startup_loading_plugin import configure_dac
|
|
93
|
+
|
|
94
|
+
configure_dac(
|
|
95
|
+
background="#f5f5f5",
|
|
96
|
+
dark_background="#202020",
|
|
97
|
+
)
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
### Dash Mantine Components
|
|
101
|
+
|
|
102
|
+
`configure_dmc()` uses Mantine's active default theme and registers its
|
|
103
|
+
pre-render color-scheme hook:
|
|
104
|
+
|
|
105
|
+
```bash
|
|
106
|
+
pip install dash-mantine-components
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
```python
|
|
110
|
+
from dash_startup_loading_plugin import configure_dmc
|
|
111
|
+
|
|
112
|
+
configure_dmc()
|
|
113
|
+
```
|
|
114
|
+
|
|
115
|
+
### feffery-antd-components
|
|
116
|
+
|
|
117
|
+
Use `configure_fac()` to match the loading overlay to
|
|
118
|
+
`AntdConfigProvider`:
|
|
119
|
+
|
|
120
|
+
```bash
|
|
121
|
+
pip install feffery-antd-components
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
The plugin does not pin a feffery-antd-components version. Compatibility is
|
|
125
|
+
determined by the installed component library.
|
|
126
|
+
|
|
127
|
+
```python
|
|
128
|
+
from dash_startup_loading_plugin import configure_fac
|
|
129
|
+
|
|
130
|
+
configure_fac(required_selectors=["#fac-app-ready"])
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
## Installed examples
|
|
134
|
+
|
|
135
|
+
The package includes four runnable examples:
|
|
136
|
+
|
|
137
|
+
```bash
|
|
138
|
+
# Dash
|
|
139
|
+
dash-startup-loading-plugin examples.dash
|
|
140
|
+
|
|
141
|
+
# Dash Mantine Components
|
|
142
|
+
dash-startup-loading-plugin examples.dash-mantine-components
|
|
143
|
+
|
|
144
|
+
# Dash Ant Design
|
|
145
|
+
dash-startup-loading-plugin examples.dash-ant-design
|
|
146
|
+
|
|
147
|
+
# feffery-antd-components
|
|
148
|
+
dash-startup-loading-plugin examples.feffery-antd-components
|
|
149
|
+
```
|
|
150
|
+
|
|
151
|
+
Install the selected example's component library separately. If it cannot be
|
|
152
|
+
imported, the command reports the failed module and the corresponding
|
|
153
|
+
installation command.
|
|
154
|
+
|
|
155
|
+
Server options are available on every example:
|
|
156
|
+
|
|
157
|
+
```bash
|
|
158
|
+
dash-startup-loading-plugin examples.dash \
|
|
159
|
+
--host 127.0.0.1 --port 8050 --debug
|
|
160
|
+
```
|
|
161
|
+
|
|
162
|
+
## Readiness behavior
|
|
163
|
+
|
|
164
|
+
The overlay closes when:
|
|
165
|
+
|
|
166
|
+
1. `root_selector` exists and no longer contains `._dash-loading`.
|
|
167
|
+
2. The root contains rendered content.
|
|
168
|
+
3. Every `required_selectors` entry exists.
|
|
169
|
+
4. No `pending_selector` node remains under the root.
|
|
170
|
+
5. The conditions remain true for two animation frames.
|
|
171
|
+
|
|
172
|
+
`timeout_ms` is a forced-dismiss fallback. `minimum_display_ms` applies to
|
|
173
|
+
ready and manual dismissal, but does not delay a timeout.
|
|
174
|
+
|
|
175
|
+
`pending_selector` delays dismissal while any matching element remains inside
|
|
176
|
+
`root_selector`. It is useful for lazy or asynchronous placeholders that are
|
|
177
|
+
mounted before the real content. Set it to an application-specific CSS
|
|
178
|
+
selector, or use `None` when no pending-node check is needed:
|
|
179
|
+
|
|
180
|
+
```python
|
|
181
|
+
configure(pending_selector="[data-async-placeholder]")
|
|
182
|
+
configure(pending_selector=None)
|
|
183
|
+
```
|
|
184
|
+
|
|
185
|
+
## Configuration
|
|
186
|
+
|
|
187
|
+
`configure(**changes)` updates the process-wide immutable
|
|
188
|
+
`StartupLoadingConfig`.
|
|
189
|
+
|
|
190
|
+
| Option | Default | Description |
|
|
191
|
+
|---|---:|---|
|
|
192
|
+
| `enabled` | `True` | Enable index injection. |
|
|
193
|
+
| `overlay_id` | `"dash-loading"` | Injected overlay ID. |
|
|
194
|
+
| `aria_label` | `"Loading"` | Accessible status label. |
|
|
195
|
+
| `root_selector` | `"#react-entry-point"` | Root observed for rendered content. |
|
|
196
|
+
| `required_selectors` | `("#react-entry-point",)` | Selectors that must exist before dismissal. |
|
|
197
|
+
| `pending_selector` | `"[data-dac-async-placeholder]"` | Selector checked under `root_selector`; dismissal waits until all matches disappear. Use `None` to disable. |
|
|
198
|
+
| `timeout_ms` | `6000` | Forced-dismiss timeout; use `None` to disable. |
|
|
199
|
+
| `minimum_display_ms` | `0` | Minimum display time. |
|
|
200
|
+
| `fade_duration_ms` | `160` | Fade-out duration. |
|
|
201
|
+
| `z_index` | `9999` | Overlay stacking order. |
|
|
202
|
+
| `background` | `"#ffffff"` | Light background. |
|
|
203
|
+
| `dark_background` | `"#0f0f0f"` | Dark background. |
|
|
204
|
+
| `color` | `"#1677ff"` | Light spinner color. |
|
|
205
|
+
| `dark_color` | `"#4096ff"` | Dark spinner color. |
|
|
206
|
+
| `theme_mode` | `"auto"` | `"auto"`, `"light"`, or `"dark"`. |
|
|
207
|
+
| `dash_theme_component_id` | `None` | Preferred persisted Dash theme component. |
|
|
208
|
+
| `spinner_size_px` | `28` | Spinner width and height. |
|
|
209
|
+
| `spinner_stroke_px` | `3` | Spinner stroke width. |
|
|
210
|
+
| `hide_default_loading` | `True` | Hide the visual `._dash-loading` indicator while the overlay exists. |
|
|
211
|
+
| `custom_loader_html` | `None` | Trusted HTML replacing the default spinner. |
|
|
212
|
+
|
|
213
|
+
`custom_loader_html` is inserted verbatim and must never contain untrusted
|
|
214
|
+
user input.
|
|
215
|
+
|
|
216
|
+
## Python API
|
|
217
|
+
|
|
218
|
+
```python
|
|
219
|
+
from dash_startup_loading_plugin import (
|
|
220
|
+
StartupLoadingConfig,
|
|
221
|
+
configure,
|
|
222
|
+
configure_dac,
|
|
223
|
+
configure_fac,
|
|
224
|
+
configure_dmc,
|
|
225
|
+
get_config,
|
|
226
|
+
reset_config,
|
|
227
|
+
)
|
|
228
|
+
```
|
|
229
|
+
|
|
230
|
+
## Browser API
|
|
231
|
+
|
|
232
|
+
```javascript
|
|
233
|
+
// Recheck readiness.
|
|
234
|
+
window.dashLoading.check();
|
|
235
|
+
|
|
236
|
+
// Dismiss the default or a custom overlay.
|
|
237
|
+
window.dashLoading.finish();
|
|
238
|
+
window.dashLoading.finish("my-loading-overlay");
|
|
239
|
+
```
|
|
240
|
+
|
|
241
|
+
Before fading out, the overlay emits a bubbling `dash-loading:ready` event.
|
|
242
|
+
`event.detail.reason` is `"ready"`, `"timeout"`, or `"manual"`.
|
|
243
|
+
|
|
244
|
+
```javascript
|
|
245
|
+
document.addEventListener("dash-loading:ready", function (event) {
|
|
246
|
+
console.log(event.detail.reason);
|
|
247
|
+
});
|
|
248
|
+
```
|
|
249
|
+
|
|
250
|
+
## Notes
|
|
251
|
+
|
|
252
|
+
- Dash's hook and plugin configuration is process-wide. Use one configuration
|
|
253
|
+
per process.
|
|
254
|
+
- Resources are inlined, so strict Content Security Policy deployments must
|
|
255
|
+
allow the injected style and script.
|
|
256
|
+
- The overlay is only for initial application startup. Use `dcc.Loading` or
|
|
257
|
+
another callback-specific pattern for later callback execution.
|
|
258
|
+
|
|
259
|
+
## License
|
|
260
|
+
|
|
261
|
+
MIT
|
|
@@ -0,0 +1,250 @@
|
|
|
1
|
+
# dash-startup-loading-plugin
|
|
2
|
+
|
|
3
|
+
[English](https://github.com/C0deBeez/dash-startup-loading-plugin/blob/master/README.md) |
|
|
4
|
+
[简体中文](https://github.com/C0deBeez/dash-startup-loading-plugin/blob/master/README.zh-CN.md)
|
|
5
|
+
|
|
6
|
+
一个基于 [Dash Hooks 插件规范](https://dash.plotly.com/dash-plugins-using-hooks)
|
|
7
|
+
的可安装插件,用于将 Dash 初始加载提示替换为可配置的全屏 loading 遮罩。
|
|
8
|
+
|
|
9
|
+
插件会在 React 挂载前,将 CSS 和 JavaScript 注入 Dash 的标准 index
|
|
10
|
+
文档。应用无需复制 assets,也无需替换 `index_string`。Dash 自带的
|
|
11
|
+
`<div class="_dash-loading">` 节点仍会保留。
|
|
12
|
+
|
|
13
|
+
## 环境要求
|
|
14
|
+
|
|
15
|
+
- Python 3.9 或更高版本
|
|
16
|
+
- Dash 3.0.3 或更高版本
|
|
17
|
+
|
|
18
|
+
## 安装
|
|
19
|
+
|
|
20
|
+
```bash
|
|
21
|
+
pip install "dash-startup-loading-plugin>=1.0.2"
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
Dash 会通过 `dash_hooks` entry point 自动发现插件。安装后,默认 loading
|
|
25
|
+
效果会自动启用,无需在应用中显式导入。
|
|
26
|
+
|
|
27
|
+
如果环境中安装了 Dash Ant Design(`dash_antd_components`),插件会自动
|
|
28
|
+
识别并应用与其亮色、暗色主题匹配的 loading 背景。
|
|
29
|
+
|
|
30
|
+
## 快速开始
|
|
31
|
+
|
|
32
|
+
默认配置无需编写插件相关代码:
|
|
33
|
+
|
|
34
|
+
```python
|
|
35
|
+
from dash import Dash, html
|
|
36
|
+
|
|
37
|
+
app = Dash(__name__)
|
|
38
|
+
app.layout = html.Main(
|
|
39
|
+
[
|
|
40
|
+
html.H1("My Dash app"),
|
|
41
|
+
html.P("The overlay closes after this layout is ready."),
|
|
42
|
+
]
|
|
43
|
+
)
|
|
44
|
+
|
|
45
|
+
if __name__ == "__main__":
|
|
46
|
+
app.run(debug=True)
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
如需自定义行为,请在创建 `Dash` 实例前调用 `configure()`:
|
|
50
|
+
|
|
51
|
+
```python
|
|
52
|
+
from dash import Dash, html
|
|
53
|
+
from dash_startup_loading_plugin import configure
|
|
54
|
+
|
|
55
|
+
configure(
|
|
56
|
+
required_selectors=["#header", "#sidebar-menu"],
|
|
57
|
+
pending_selector="[data-async-placeholder]",
|
|
58
|
+
timeout_ms=6000,
|
|
59
|
+
minimum_display_ms=250,
|
|
60
|
+
fade_duration_ms=180,
|
|
61
|
+
)
|
|
62
|
+
|
|
63
|
+
app = Dash(__name__)
|
|
64
|
+
app.layout = html.Main(
|
|
65
|
+
[
|
|
66
|
+
html.Header("Header", id="header"),
|
|
67
|
+
html.Nav("Sidebar", id="sidebar-menu"),
|
|
68
|
+
]
|
|
69
|
+
)
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
## 组件库集成
|
|
73
|
+
|
|
74
|
+
各组件库不是本插件的依赖。应用只需单独安装实际使用的组件库。
|
|
75
|
+
|
|
76
|
+
### Dash Ant Design
|
|
77
|
+
|
|
78
|
+
插件会自动识别 Dash Ant Design。只有需要覆盖默认配置时,才需要调用
|
|
79
|
+
`configure_dac()`:
|
|
80
|
+
|
|
81
|
+
```bash
|
|
82
|
+
pip install dash-ant-design
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
本插件不限制 Dash Ant Design 的版本。请安装与应用所用 Python 和 Dash
|
|
86
|
+
版本兼容的版本。
|
|
87
|
+
|
|
88
|
+
```python
|
|
89
|
+
from dash_startup_loading_plugin import configure_dac
|
|
90
|
+
|
|
91
|
+
configure_dac(
|
|
92
|
+
background="#f5f5f5",
|
|
93
|
+
dark_background="#202020",
|
|
94
|
+
)
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
### Dash Mantine Components
|
|
98
|
+
|
|
99
|
+
`configure_dmc()` 会读取 Mantine 的当前默认主题,并注册其预渲染配色
|
|
100
|
+
hook:
|
|
101
|
+
|
|
102
|
+
```bash
|
|
103
|
+
pip install dash-mantine-components
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
```python
|
|
107
|
+
from dash_startup_loading_plugin import configure_dmc
|
|
108
|
+
|
|
109
|
+
configure_dmc()
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
### feffery-antd-components
|
|
113
|
+
|
|
114
|
+
使用 `configure_fac()` 使 loading 遮罩与 `AntdConfigProvider` 匹配:
|
|
115
|
+
|
|
116
|
+
```bash
|
|
117
|
+
pip install feffery-antd-components
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
本插件不固定 feffery-antd-components 的版本,兼容性由已安装的组件库决定。
|
|
121
|
+
|
|
122
|
+
```python
|
|
123
|
+
from dash_startup_loading_plugin import configure_fac
|
|
124
|
+
|
|
125
|
+
configure_fac(required_selectors=["#fac-app-ready"])
|
|
126
|
+
```
|
|
127
|
+
|
|
128
|
+
## 内置示例
|
|
129
|
+
|
|
130
|
+
安装包中包含四个可直接运行的示例:
|
|
131
|
+
|
|
132
|
+
```bash
|
|
133
|
+
# Dash
|
|
134
|
+
dash-startup-loading-plugin examples.dash
|
|
135
|
+
|
|
136
|
+
# Dash Mantine Components
|
|
137
|
+
dash-startup-loading-plugin examples.dash-mantine-components
|
|
138
|
+
|
|
139
|
+
# Dash Ant Design
|
|
140
|
+
dash-startup-loading-plugin examples.dash-ant-design
|
|
141
|
+
|
|
142
|
+
# feffery-antd-components
|
|
143
|
+
dash-startup-loading-plugin examples.feffery-antd-components
|
|
144
|
+
```
|
|
145
|
+
|
|
146
|
+
组件库需要单独安装。如果所选示例无法导入对应组件库,命令会显示导入失败的
|
|
147
|
+
模块和安装命令。
|
|
148
|
+
|
|
149
|
+
所有示例都支持服务器参数:
|
|
150
|
+
|
|
151
|
+
```bash
|
|
152
|
+
dash-startup-loading-plugin examples.dash \
|
|
153
|
+
--host 127.0.0.1 --port 8050 --debug
|
|
154
|
+
```
|
|
155
|
+
|
|
156
|
+
## 就绪判断
|
|
157
|
+
|
|
158
|
+
满足以下条件后,遮罩会关闭:
|
|
159
|
+
|
|
160
|
+
1. `root_selector` 已存在,且内部不再包含 `._dash-loading`。
|
|
161
|
+
2. 根节点中已有实际渲染内容。
|
|
162
|
+
3. `required_selectors` 中的所有选择器都已匹配到节点。
|
|
163
|
+
4. 根节点中已不存在匹配 `pending_selector` 的节点。
|
|
164
|
+
5. 上述状态连续保持两个动画帧。
|
|
165
|
+
|
|
166
|
+
`timeout_ms` 是强制关闭的安全兜底。`minimum_display_ms` 适用于正常就绪和
|
|
167
|
+
手动关闭,但不会延迟 timeout。
|
|
168
|
+
|
|
169
|
+
`pending_selector` 用于在异步或懒加载占位节点仍存在时延迟关闭遮罩。它只会
|
|
170
|
+
在 `root_selector` 内查找匹配节点。可以设置为应用自己的 CSS 选择器;如果
|
|
171
|
+
不需要检查占位节点,请设置为 `None`:
|
|
172
|
+
|
|
173
|
+
```python
|
|
174
|
+
configure(pending_selector="[data-async-placeholder]")
|
|
175
|
+
configure(pending_selector=None)
|
|
176
|
+
```
|
|
177
|
+
|
|
178
|
+
## 配置项
|
|
179
|
+
|
|
180
|
+
`configure(**changes)` 会更新进程级、不可变的 `StartupLoadingConfig`。
|
|
181
|
+
|
|
182
|
+
| 参数 | 默认值 | 说明 |
|
|
183
|
+
|---|---:|---|
|
|
184
|
+
| `enabled` | `True` | 是否启用 index 注入。 |
|
|
185
|
+
| `overlay_id` | `"dash-loading"` | 注入遮罩的 ID。 |
|
|
186
|
+
| `aria_label` | `"Loading"` | 无障碍状态标签。 |
|
|
187
|
+
| `root_selector` | `"#react-entry-point"` | 用于观察渲染内容的根节点。 |
|
|
188
|
+
| `required_selectors` | `("#react-entry-point",)` | 关闭遮罩前必须存在的节点选择器。 |
|
|
189
|
+
| `pending_selector` | `"[data-dac-async-placeholder]"` | 在 `root_selector` 内检查;所有匹配节点消失后才允许关闭。设置为 `None` 可禁用。 |
|
|
190
|
+
| `timeout_ms` | `6000` | 强制关闭超时;设置为 `None` 可禁用。 |
|
|
191
|
+
| `minimum_display_ms` | `0` | 最短显示时间。 |
|
|
192
|
+
| `fade_duration_ms` | `160` | 淡出时长。 |
|
|
193
|
+
| `z_index` | `9999` | 遮罩层级。 |
|
|
194
|
+
| `background` | `"#ffffff"` | 亮色背景。 |
|
|
195
|
+
| `dark_background` | `"#0f0f0f"` | 暗色背景。 |
|
|
196
|
+
| `color` | `"#1677ff"` | 亮色 spinner 颜色。 |
|
|
197
|
+
| `dark_color` | `"#4096ff"` | 暗色 spinner 颜色。 |
|
|
198
|
+
| `theme_mode` | `"auto"` | 可选 `"auto"`、`"light"` 或 `"dark"`。 |
|
|
199
|
+
| `dash_theme_component_id` | `None` | 优先读取主题状态的 Dash 持久化组件 ID。 |
|
|
200
|
+
| `spinner_size_px` | `28` | Spinner 宽度和高度。 |
|
|
201
|
+
| `spinner_stroke_px` | `3` | Spinner 描边宽度。 |
|
|
202
|
+
| `hide_default_loading` | `True` | 遮罩存在时隐藏 `._dash-loading` 的视觉效果。 |
|
|
203
|
+
| `custom_loader_html` | `None` | 替换默认 spinner 的可信 HTML。 |
|
|
204
|
+
|
|
205
|
+
`custom_loader_html` 会原样插入页面,禁止传入任何不可信的用户输入。
|
|
206
|
+
|
|
207
|
+
## Python API
|
|
208
|
+
|
|
209
|
+
```python
|
|
210
|
+
from dash_startup_loading_plugin import (
|
|
211
|
+
StartupLoadingConfig,
|
|
212
|
+
configure,
|
|
213
|
+
configure_dac,
|
|
214
|
+
configure_fac,
|
|
215
|
+
configure_dmc,
|
|
216
|
+
get_config,
|
|
217
|
+
reset_config,
|
|
218
|
+
)
|
|
219
|
+
```
|
|
220
|
+
|
|
221
|
+
## 浏览器 API
|
|
222
|
+
|
|
223
|
+
```javascript
|
|
224
|
+
// 重新检查就绪条件。
|
|
225
|
+
window.dashLoading.check();
|
|
226
|
+
|
|
227
|
+
// 关闭默认或指定遮罩。
|
|
228
|
+
window.dashLoading.finish();
|
|
229
|
+
window.dashLoading.finish("my-loading-overlay");
|
|
230
|
+
```
|
|
231
|
+
|
|
232
|
+
淡出前,遮罩会触发可冒泡的 `dash-loading:ready` 事件。
|
|
233
|
+
`event.detail.reason` 为 `"ready"`、`"timeout"` 或 `"manual"`。
|
|
234
|
+
|
|
235
|
+
```javascript
|
|
236
|
+
document.addEventListener("dash-loading:ready", function (event) {
|
|
237
|
+
console.log(event.detail.reason);
|
|
238
|
+
});
|
|
239
|
+
```
|
|
240
|
+
|
|
241
|
+
## 注意事项
|
|
242
|
+
|
|
243
|
+
- Dash hooks 和插件配置是进程级的,同一进程应共用一套配置。
|
|
244
|
+
- 资源以内联方式注入;严格 CSP 部署需要允许相应的 style 和 script。
|
|
245
|
+
- 本插件只处理应用初始启动。后续 callback loading 请使用 `dcc.Loading`
|
|
246
|
+
或其他针对 callback 的方案。
|
|
247
|
+
|
|
248
|
+
## License
|
|
249
|
+
|
|
250
|
+
MIT
|
|
@@ -5,7 +5,7 @@ from importlib.metadata import PackageNotFoundError, version
|
|
|
5
5
|
try:
|
|
6
6
|
__version__ = version("dash-startup-loading-plugin")
|
|
7
7
|
except PackageNotFoundError: # pragma: no cover - source tree fallback
|
|
8
|
-
__version__ = "1.0.
|
|
8
|
+
__version__ = "1.0.2"
|
|
9
9
|
|
|
10
10
|
from .plugin import (
|
|
11
11
|
StartupLoadingConfig,
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
Metadata-Version: 2.4
|
|
2
2
|
Name: dash-startup-loading-plugin
|
|
3
|
-
Version: 1.0.
|
|
3
|
+
Version: 1.0.2
|
|
4
4
|
Summary: A configurable full-screen startup loading overlay for Dash apps, packaged as a Dash Hooks plugin.
|
|
5
5
|
Author-email: Ethan Zhang <ethan.zhang2016@gmail.com>
|
|
6
6
|
License-Expression: MIT
|
|
@@ -14,7 +14,8 @@ Dynamic: license-file
|
|
|
14
14
|
|
|
15
15
|
# dash-startup-loading-plugin
|
|
16
16
|
|
|
17
|
-
[English](README.md) |
|
|
17
|
+
[English](https://github.com/C0deBeez/dash-startup-loading-plugin/blob/master/README.md) |
|
|
18
|
+
[简体中文](https://github.com/C0deBeez/dash-startup-loading-plugin/blob/master/README.zh-CN.md)
|
|
18
19
|
|
|
19
20
|
An installable [Dash Hooks plugin](https://dash.plotly.com/dash-plugins-using-hooks)
|
|
20
21
|
that replaces Dash's initial loading presentation with a configurable
|
|
@@ -33,7 +34,7 @@ document.
|
|
|
33
34
|
## Installation
|
|
34
35
|
|
|
35
36
|
```bash
|
|
36
|
-
pip install "dash-startup-loading-plugin>=1.0.
|
|
37
|
+
pip install "dash-startup-loading-plugin>=1.0.2"
|
|
37
38
|
```
|
|
38
39
|
|
|
39
40
|
Dash discovers the plugin through its `dash_hooks` entry point. Installing the
|
|
@@ -3,6 +3,8 @@ MANIFEST.in
|
|
|
3
3
|
README.md
|
|
4
4
|
README.zh-CN.md
|
|
5
5
|
pyproject.toml
|
|
6
|
+
src/dash_startup_loading_plugin/README.md
|
|
7
|
+
src/dash_startup_loading_plugin/README.zh-CN.md
|
|
6
8
|
src/dash_startup_loading_plugin/__init__.py
|
|
7
9
|
src/dash_startup_loading_plugin/plugin.py
|
|
8
10
|
src/dash_startup_loading_plugin.egg-info/PKG-INFO
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
from pathlib import Path
|
|
2
|
+
import tomllib
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
PROJECT_ROOT = Path(__file__).resolve().parents[1]
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
def test_pypi_description_uses_english_readme():
|
|
9
|
+
pyproject = tomllib.loads(
|
|
10
|
+
(PROJECT_ROOT / "pyproject.toml").read_text(encoding="utf-8")
|
|
11
|
+
)
|
|
12
|
+
|
|
13
|
+
assert pyproject["project"]["readme"] == "README.md"
|
|
14
|
+
assert "An installable" in (PROJECT_ROOT / "README.md").read_text(encoding="utf-8")
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
def test_readmes_use_current_selector_and_installation_examples():
|
|
18
|
+
english = (PROJECT_ROOT / "README.md").read_text(encoding="utf-8")
|
|
19
|
+
chinese = (PROJECT_ROOT / "README.zh-CN.md").read_text(encoding="utf-8")
|
|
20
|
+
|
|
21
|
+
for readme in (english, chinese):
|
|
22
|
+
assert "#header" in readme
|
|
23
|
+
assert "#sidebar-menu" in readme
|
|
24
|
+
assert "pending_selector" in readme
|
|
25
|
+
assert "pip install dash-ant-design" in readme
|
|
26
|
+
assert "pip install feffery-antd-components" in readme
|
|
27
|
+
assert "usage-header" not in readme
|
|
28
|
+
assert "usage-sidebar-menu" not in readme
|
|
29
|
+
assert "dash-ant-design # Python 3.10+" not in readme
|
|
30
|
+
assert "feffery-antd-components>=0.4.0" not in readme
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
def test_readmes_link_to_each_other():
|
|
34
|
+
english = (PROJECT_ROOT / "README.md").read_text(encoding="utf-8")
|
|
35
|
+
chinese = (PROJECT_ROOT / "README.zh-CN.md").read_text(encoding="utf-8")
|
|
36
|
+
|
|
37
|
+
chinese_link = (
|
|
38
|
+
"[简体中文](https://github.com/C0deBeez/"
|
|
39
|
+
"dash-startup-loading-plugin/blob/master/README.zh-CN.md)"
|
|
40
|
+
)
|
|
41
|
+
english_link = (
|
|
42
|
+
"[English](https://github.com/C0deBeez/"
|
|
43
|
+
"dash-startup-loading-plugin/blob/master/README.md)"
|
|
44
|
+
)
|
|
45
|
+
|
|
46
|
+
for readme in (english, chinese):
|
|
47
|
+
assert chinese_link in readme
|
|
48
|
+
assert english_link in readme
|
|
49
|
+
|
|
50
|
+
|
|
51
|
+
def test_packaged_chinese_readme_matches_project_readme():
|
|
52
|
+
project_readme = (PROJECT_ROOT / "README.zh-CN.md").read_text(encoding="utf-8")
|
|
53
|
+
packaged_readme = (
|
|
54
|
+
PROJECT_ROOT
|
|
55
|
+
/ "src"
|
|
56
|
+
/ "dash_startup_loading_plugin"
|
|
57
|
+
/ "README.zh-CN.md"
|
|
58
|
+
).read_text(encoding="utf-8")
|
|
59
|
+
|
|
60
|
+
assert packaged_readme == project_readme
|
|
61
|
+
|
|
62
|
+
|
|
63
|
+
def test_packaged_english_readme_matches_project_readme():
|
|
64
|
+
project_readme = (PROJECT_ROOT / "README.md").read_text(encoding="utf-8")
|
|
65
|
+
packaged_readme = (
|
|
66
|
+
PROJECT_ROOT
|
|
67
|
+
/ "src"
|
|
68
|
+
/ "dash_startup_loading_plugin"
|
|
69
|
+
/ "README.md"
|
|
70
|
+
).read_text(encoding="utf-8")
|
|
71
|
+
|
|
72
|
+
assert packaged_readme == project_readme
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
from pathlib import Path
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
PROJECT_ROOT = Path(__file__).resolve().parents[1]
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
def test_readmes_use_current_selector_and_installation_examples():
|
|
8
|
-
english = (PROJECT_ROOT / "README.md").read_text(encoding="utf-8")
|
|
9
|
-
chinese = (PROJECT_ROOT / "README.zh-CN.md").read_text(encoding="utf-8")
|
|
10
|
-
|
|
11
|
-
for readme in (english, chinese):
|
|
12
|
-
assert "#header" in readme
|
|
13
|
-
assert "#sidebar-menu" in readme
|
|
14
|
-
assert "pending_selector" in readme
|
|
15
|
-
assert "pip install dash-ant-design" in readme
|
|
16
|
-
assert "pip install feffery-antd-components" in readme
|
|
17
|
-
assert "usage-header" not in readme
|
|
18
|
-
assert "usage-sidebar-menu" not in readme
|
|
19
|
-
assert "dash-ant-design # Python 3.10+" not in readme
|
|
20
|
-
assert "feffery-antd-components>=0.4.0" not in readme
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
def test_readmes_link_to_each_other():
|
|
24
|
-
english = (PROJECT_ROOT / "README.md").read_text(encoding="utf-8")
|
|
25
|
-
chinese = (PROJECT_ROOT / "README.zh-CN.md").read_text(encoding="utf-8")
|
|
26
|
-
|
|
27
|
-
assert "[简体中文](README.zh-CN.md)" in english
|
|
28
|
-
assert "[English](README.md)" in chinese
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
{dash_startup_loading_plugin-1.0.1 → dash_startup_loading_plugin-1.0.2}/tests/test_examples.py
RENAMED
|
File without changes
|
{dash_startup_loading_plugin-1.0.1 → dash_startup_loading_plugin-1.0.2}/tests/test_plugin.py
RENAMED
|
File without changes
|