With Panel 1.4, I don’t get one anymore with apps converted to pyodide. Is there a way to re-enable it?
1 Like
Hi @zmoon
Welcome to the community.
I just tried convert the reference example with all 3 --to options. And for me they all show the loading spinner.
Can you provide a minimum, reproducible example?
Hi @Marc thanks for the response. I will do some more experimenting and provide an example.
I will say, I did have a similar issue when updating the PyScript version in a PyScript app month or two ago. I had to implement my own Pyodide loading indicator, based on a PyScript example I found.
Here’s a basic example.
# simple-panel-app.py
import panel as pn
pn.pane.Markdown("# hi").servable()
panel convert --to pyodide simple-panel-app.py
With Panel 1.3.8, it overlays a loading spinner and greys out the page a bit while things are loading. With Panel 1.4.0, none of that. Downgrading Pyodide in the HTML file from Panel 1.4.0 didn’t seem to help, so I guess it is due to a change in the HTML template.
Here’s part of the diff (I’m not allowed to upload the files)
--- simple-panel-app_panel-1-3-8.html 2024-03-31 13:24:22.623599100 -0600
+++ simple-panel-app_panel-1-4-0.html 2024-03-31 13:19:47.144764800 -0600
@@ -14,58 +14,26 @@
</style>
<style type="text/css">
-:host(.pn-loading),
-.pn-loading {
- overflow: hidden;
-}
-
-:host(.pn-loading):before,
-.pn-loading:before {
- position: absolute;
- height: 100%;
- width: 100%;
- content: '';
- z-index: 1000;
- background-color: rgb(255, 255, 255, 0.5);
- border-color: lightgray;
- background-repeat: no-repeat;
- background-position: center;
- background-size: auto 50%;
- border-width: 1px;
- cursor: progress;
-}
-
-:host(.pn-loading) .pn-loading-msg,
-.pn-loading .pn-loading-msg {
- color: var(--panel-on-background-color, black);
- font-size: 2em;
- position: absolute;
- top: 72%;
- font-size: 2em;
- color: black;
- width: 100%;
- text-align: center;
-}
-
-:host(.pn-loading.pn-arc):before, .pn-loading.pn-arc:before {
- background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJtYXJnaW46IGF1dG87IGJhY2tncm91bmQ6IG5vbmU7IGRpc3BsYXk6IGJsb2NrOyBzaGFwZS1yZW5kZXJpbmc6IGF1dG87IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYzNjM2MzIiBzdHJva2Utd2lkdGg9IjEwIiByPSIzNSIgc3Ryb2tlLWRhc2hhcnJheT0iMTY0LjkzMzYxNDMxMzQ2NDE1IDU2Ljk3Nzg3MTQzNzgyMTM4Ij4gICAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjFzIiB2YWx1ZXM9IjAgNTAgNTA7MzYwIDUwIDUwIiBrZXlUaW1lcz0iMDsxIj48L2FuaW1hdGVUcmFuc2Zvcm0+ICA8L2NpcmNsZT48L3N2Zz4=");
- background-size: auto calc(min(50%, 400px));
+:host(.pn-loading):before, .pn-loading:before {
+ background-color: #c3c3c3;
+ mask-size: auto calc(min(50%, 400px));
+ -webkit-mask-size: auto calc(min(50%, 400px));
}
-</style><script src="https://cdn.jsdelivr.net/pyodide/v0.24.1/full/pyodide.js"></script>
-<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-3.3.4.min.js"></script>
-<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-gl-3.3.4.min.js"></script>
-<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-3.3.4.min.js"></script>
-<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-3.3.4.min.js"></script>
-<script type="text/javascript" src="https://cdn.holoviz.org/panel/1.3.8/dist/panel.min.js"></script>
+.py-error { display: none; }</style><script src="https://cdn.jsdelivr.net/pyodide/v0.25.0/full/pyodide.js"></script>
+<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-3.4.0.min.js"></script>
+<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-gl-3.4.0.min.js"></script>
+<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-3.4.0.min.js"></script>
+<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-3.4.0.min.js"></script>
+<script type="text/javascript" src="https://cdn.holoviz.org/panel/1.4.0/dist/panel.min.js"></script>
<script type="text/javascript">
Bokeh.set_log_level("info");
</script> </head>
<body class="pn-loading pn-arc">
- <div id="b35a1465-20b4-40d9-87e8-dcf7a9a5c488" data-root-id="p1006" style="display: contents;"></div>
- <div id="bf64d153-0ce5-4fd1-8aa9-2569f666ee02" data-root-id="p1007" style="display: contents;"></div>
- <div id="af573d02-e92a-4e0a-9ec0-2e6c936348fe" data-root-id="p1008" style="display: contents;"></div>
+ <div id="ce9c8f13-bc28-4548-ba3f-e0e8f144030d" data-root-id="p1006" style="display: contents;"></div>
+ <div id="a10a9a65-520e-4229-89d4-a458815d8723" data-root-id="p1007" style="display: contents;"></div>
+ <div id="e10e0391-cba7-46b5-9b30-6c70a2e7e337" data-root-id="p1008" style="display: contents;"></div>
<script type="text/javascript">
async function main() {
@@ -73,27 +41,15 @@
await pyodide.loadPackage("micropip");
await pyodide.runPythonAsync(`
import micropip
- await micropip.install(['https://cdn.holoviz.org/panel/wheels/bokeh-3.3.4-py3-none-any.whl', 'https://cdn.holoviz.org/panel/1.3.8/dist/wheels/panel-1.3.8-py3-none-any.whl', 'pyodide-http==0.2.1']);
+ await micropip.install(['https://cdn.holoviz.org/panel/wheels/bokeh-3.4.0-py3-none-any.whl', 'https://cdn.holoviz.org/panel/1.4.0/dist/wheels/panel-1.4.0-py3-none-any.whl', 'pyodide-http==0.2.1']);
`);