From ecfaedf05110ba97652e349653cd08b840ff941e Mon Sep 17 00:00:00 2001
From: Christoph Reiter <reiter.christoph@gmail.com>
Date: Thu, 22 Aug 2019 16:24:02 +0200
Subject: [PATCH] Load the path async instead of the whole svg
This means less dom change on load
---
packages/common/vpu-icon.js | 21 +++++++++------------
1 file changed, 9 insertions(+), 12 deletions(-)
diff --git a/packages/common/vpu-icon.js b/packages/common/vpu-icon.js
index d86c61af..79865d19 100644
--- a/packages/common/vpu-icon.js
+++ b/packages/common/vpu-icon.js
@@ -30,18 +30,12 @@ class Icon extends LitElement {
}
render() {
- let svg = fetch('local/vpu-common/icons/' + this.name + '.json').then(response => {
- if (!response.ok)
- throw Error(response.statusText);
- return response.json().then(data => {
- return html`
- <svg aria-labelledby="title" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="pointer-events: none; display: block; width: 100%; height: 100%;">
- <title id="title">${this.name}</title>
- <path d=${data} />
- </svg>
- `;
+ let path = fetch('local/vpu-common/icons/' + this.name + '.json')
+ .then(response => {
+ if (!response.ok)
+ throw Error(response.statusText);
+ return response.json();
});
- });
return html`
<style>
@@ -50,7 +44,10 @@ class Icon extends LitElement {
}
</style>
- ${until(svg)}
+ <svg aria-labelledby="title" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="pointer-events: none; display: block; width: 100%; height: 100%;">
+ <title id="title">${this.name}</title>
+ <path d=${until(path)} />
+ </svg>
`;
}
}
--
GitLab