From a697baf97389c9f1b1d8f45130cfa138ad8ef14e Mon Sep 17 00:00:00 2001 From: Just van Rossum Date: Mon, 11 Sep 2023 10:34:54 +0200 Subject: [PATCH 1/2] Cache SVG data for icons, so that we don't get flickering when changing icons dynamically --- src/fontra/client/web-components/inline-svg.js | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/src/fontra/client/web-components/inline-svg.js b/src/fontra/client/web-components/inline-svg.js index fd2de8d545..9d43d9e462 100644 --- a/src/fontra/client/web-components/inline-svg.js +++ b/src/fontra/client/web-components/inline-svg.js @@ -33,8 +33,7 @@ export class InlineSVG extends HTMLElement { } async fetchSVG(svgSRC) { - const response = await fetch(svgSRC); - const svgElement = htmlToElement(await response.text()); + const svgElement = htmlToElement(await cachedSVGData(svgSRC)); svgElement.removeAttribute("width"); svgElement.removeAttribute("height"); this.innerHTML = ""; @@ -42,4 +41,16 @@ export class InlineSVG extends HTMLElement { } } +const svgCache = new Map(); + +async function cachedSVGData(svgSRC) { + let svgData = svgCache.get(svgSRC); + if (!svgData) { + const response = await fetch(svgSRC); + svgData = await response.text(); + svgCache.set(svgSRC, svgData); + } + return svgData; +} + customElements.define("inline-svg", InlineSVG); From 99b589f95e11a29995d68107bf84fb5455c1199b Mon Sep 17 00:00:00 2001 From: Just van Rossum Date: Mon, 11 Sep 2023 10:36:14 +0200 Subject: [PATCH 2/2] Rename variable --- src/fontra/client/web-components/inline-svg.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/fontra/client/web-components/inline-svg.js b/src/fontra/client/web-components/inline-svg.js index 9d43d9e462..4b46a0c7cf 100644 --- a/src/fontra/client/web-components/inline-svg.js +++ b/src/fontra/client/web-components/inline-svg.js @@ -41,14 +41,14 @@ export class InlineSVG extends HTMLElement { } } -const svgCache = new Map(); +const svgDataCache = new Map(); async function cachedSVGData(svgSRC) { - let svgData = svgCache.get(svgSRC); + let svgData = svgDataCache.get(svgSRC); if (!svgData) { const response = await fetch(svgSRC); svgData = await response.text(); - svgCache.set(svgSRC, svgData); + svgDataCache.set(svgSRC, svgData); } return svgData; }