From 07414e99cbd18543a5e84b416007b22fdd9186b9 Mon Sep 17 00:00:00 2001 From: Philipp Rudiger Date: Fri, 22 Dec 2023 16:27:52 +0100 Subject: [PATCH] Load loading indicator from file instead of inlining (#6112) * Load loading indicator from file instead of inlining * Small tweaks * Fix arcs SVG --- panel/assets/arcs_spinner.svg | 5 -- panel/assets/bar_spinner.svg | 16 ------ panel/assets/dots_spinner.svg | 66 ------------------------- panel/assets/petal_spinner.svg | 62 ----------------------- panel/{ => dist}/assets/arc_spinner.svg | 2 +- panel/dist/assets/arcs_spinner.svg | 1 + panel/dist/assets/bar_spinner.svg | 1 + panel/dist/assets/dots_spinner.svg | 1 + panel/dist/assets/petal_spinner.svg | 1 + panel/dist/css/loading.css | 58 +++++++++++++++++----- panel/io/convert.py | 3 +- panel/io/resources.py | 9 +--- panel/template/base.py | 4 +- 13 files changed, 58 insertions(+), 171 deletions(-) delete mode 100644 panel/assets/arcs_spinner.svg delete mode 100644 panel/assets/bar_spinner.svg delete mode 100644 panel/assets/dots_spinner.svg delete mode 100644 panel/assets/petal_spinner.svg rename panel/{ => dist}/assets/arc_spinner.svg (71%) create mode 100644 panel/dist/assets/arcs_spinner.svg create mode 100644 panel/dist/assets/bar_spinner.svg create mode 100644 panel/dist/assets/dots_spinner.svg create mode 100644 panel/dist/assets/petal_spinner.svg diff --git a/panel/assets/arcs_spinner.svg b/panel/assets/arcs_spinner.svg deleted file mode 100644 index 912e667ba8..0000000000 --- a/panel/assets/arcs_spinner.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/panel/assets/bar_spinner.svg b/panel/assets/bar_spinner.svg deleted file mode 100644 index 435c20b8de..0000000000 --- a/panel/assets/bar_spinner.svg +++ /dev/null @@ -1,16 +0,0 @@ - - - - - - - - - - - - - - - - diff --git a/panel/assets/dots_spinner.svg b/panel/assets/dots_spinner.svg deleted file mode 100644 index f23de2d863..0000000000 --- a/panel/assets/dots_spinner.svg +++ /dev/null @@ -1,66 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/panel/assets/petal_spinner.svg b/panel/assets/petal_spinner.svg deleted file mode 100644 index 660a793721..0000000000 --- a/panel/assets/petal_spinner.svg +++ /dev/null @@ -1,62 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/panel/assets/arc_spinner.svg b/panel/dist/assets/arc_spinner.svg similarity index 71% rename from panel/assets/arc_spinner.svg rename to panel/dist/assets/arc_spinner.svg index 8774fc35a9..9192fd94c3 100644 --- a/panel/assets/arc_spinner.svg +++ b/panel/dist/assets/arc_spinner.svg @@ -1,5 +1,5 @@ - + diff --git a/panel/dist/assets/arcs_spinner.svg b/panel/dist/assets/arcs_spinner.svg new file mode 100644 index 0000000000..3e4e1ff4dd --- /dev/null +++ b/panel/dist/assets/arcs_spinner.svg @@ -0,0 +1 @@ + diff --git a/panel/dist/assets/bar_spinner.svg b/panel/dist/assets/bar_spinner.svg new file mode 100644 index 0000000000..4a753fcd32 --- /dev/null +++ b/panel/dist/assets/bar_spinner.svg @@ -0,0 +1 @@ + diff --git a/panel/dist/assets/dots_spinner.svg b/panel/dist/assets/dots_spinner.svg new file mode 100644 index 0000000000..cd41dc924a --- /dev/null +++ b/panel/dist/assets/dots_spinner.svg @@ -0,0 +1 @@ + diff --git a/panel/dist/assets/petal_spinner.svg b/panel/dist/assets/petal_spinner.svg new file mode 100644 index 0000000000..b7a2e9cafb --- /dev/null +++ b/panel/dist/assets/petal_spinner.svg @@ -0,0 +1 @@ + diff --git a/panel/dist/css/loading.css b/panel/dist/css/loading.css index 80294a3bf7..77f6dd2014 100644 --- a/panel/dist/css/loading.css +++ b/panel/dist/css/loading.css @@ -3,28 +3,64 @@ overflow: hidden; } +:host(.pn-loading) > *, +.pn-loading > * { + filter: blur(1px) opacity(0.5); +} + :host(.pn-loading):before, .pn-loading:before { - position: absolute; + -webkit-mask-position: center; + -webkit-mask-repeat: no-repeat; + content: ''; + cursor: progress; height: 100%; width: 100%; - content: ''; + position: absolute; 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; +} + +:host(.pn-loading):after, +.pn-loading:after { + content: ''; cursor: progress; + height: 100%; + width: 100%; + position: absolute; + z-index: 1000; } :host(.pn-loading) .pn-loading-msg, .pn-loading .pn-loading-msg { + color: black; + font-size: 2em; position: absolute; top: 72%; - font-size: 2em; - color: black; - width: 100%; text-align: center; + width: 100%; +} + +:host(.pn-loading.pn-arc):before, +.pn-loading.pn-arc:before { + -webkit-mask-image: url('../assets/arc_spinner.svg'); +} + +:host(.pn-loading.pn-arcs):before, +.pn-loading.pn-arcs:before { + -webkit-mask-image: url('../assets/arcs_spinner.svg'); +} + +:host(.pn-loading.pn-petal):before, +.pn-loading.pn-petal:before { + -webkit-mask-image: url('../assets/petal_spinner.svg'); +} + +:host(.pn-loading.pn-bar):before, +.pn-loading.pn-bar:before { + -webkit-mask-image: url('../assets/bar_spinner.svg'); +} + +:host(.pn-loading.pn-dots):before, +.pn-loading.pn-dots:before { + -webkit-mask-image: url('../assets/dots_spinner.svg'); } diff --git a/panel/io/convert.py b/panel/io/convert.py index bf82a4f93d..c93150a02c 100644 --- a/panel/io/convert.py +++ b/panel/io/convert.py @@ -329,12 +329,11 @@ def script_to_html( # Collect resources resources = Resources(mode='inline' if inline else 'cdn') - loading_base = (DIST_DIR / "css" / "loading.css").read_text(encoding='utf-8') spinner_css = loading_css( config.loading_spinner, config.loading_color, config.loading_max_height ) css_resources.append( - f'' + f'' ) with set_curdoc(document): bokeh_js, bokeh_css = bundle_resources(document.roots, resources) diff --git a/panel/io/resources.py b/panel/io/resources.py index f80382e0ea..ede8199bdf 100644 --- a/panel/io/resources.py +++ b/panel/io/resources.py @@ -14,7 +14,6 @@ import re import textwrap -from base64 import b64encode from collections import OrderedDict from contextlib import contextmanager from functools import lru_cache @@ -39,7 +38,6 @@ from ..config import config, panel_extension as extension from ..util import isurl, url_path -from .loading import LOADING_INDICATOR_CSS_CLASS from .state import state if TYPE_CHECKING: @@ -182,12 +180,9 @@ def process_raw_css(raw_css): @lru_cache(maxsize=None) def loading_css(loading_spinner, color, max_height): - with open(ASSETS_DIR / f'{loading_spinner}_spinner.svg', encoding='utf-8') as f: - svg = f.read().replace('\n', '').format(color=color) - b64 = b64encode(svg.encode('utf-8')).decode('utf-8') return textwrap.dedent(f""" - :host(.{LOADING_INDICATOR_CSS_CLASS}.pn-{loading_spinner}):before, .pn-loading.pn-{loading_spinner}:before {{ - background-image: url("data:image/svg+xml;base64,{b64}"); + :host(.pn-loading):before, .pn-loading:before {{ + background-color: {color}; background-size: auto calc(min(50%, {max_height}px)); }}""") diff --git a/panel/template/base.py b/panel/template/base.py index dfdf269303..520623f59d 100644 --- a/panel/template/base.py +++ b/panel/template/base.py @@ -30,7 +30,7 @@ from ..io.notifications import NotificationArea from ..io.resources import ( BUNDLE_DIR, CDN_DIST, ResourceComponent, _env, component_resource_path, - get_dist_path, loading_css, parse_template, resolve_custom_path, + get_dist_path, loading_css, parse_template, resolve_custom_path, use_cdn, ) from ..io.save import save from ..io.state import curdoc_locked, state @@ -340,8 +340,10 @@ def resolve_resources(self, cdn: bool | Literal['auto'] = 'auto') -> ResourcesTy clsname = cls.__name__ name = clsname.lower() + cdn = use_cdn() if cdn == 'auto' else cdn dist_path = get_dist_path(cdn=cdn) + resource_types['css']['loading'] = f'{dist_path}css/loading.css' raw_css.extend(list(self.config.raw_css) + [loading_css( config.loading_spinner, config.loading_color, config.loading_max_height )])