introduce loadResource()

nicegui/elements/leaflet.js

@@ -1,14 +1,16 @@
+import { loadResource } from "../../static/utils/resources.js";
+
 export default {
   template: "<div></div>",
   props: {
     map_options: Object,
   },
   async mounted() {
-    await this.load_resource("https://unpkg.com/leaflet@1.6.0/dist/leaflet.css");
-    await this.load_resource("https://unpkg.com/leaflet@1.6.0/dist/leaflet.js");
+    await loadResource("https://unpkg.com/leaflet@1.6.0/dist/leaflet.css");
+    await loadResource("https://unpkg.com/leaflet@1.6.0/dist/leaflet.js");
     if (this.map_options.drawControl) {
-      await this.load_resource("https://unpkg.com/leaflet-draw@1.0.4/dist/leaflet.draw.css");
-      await this.load_resource("https://unpkg.com/leaflet-draw@1.0.4/dist/leaflet.draw.js");
+      await loadResource("https://unpkg.com/leaflet-draw@1.0.4/dist/leaflet.draw.css");
+      await loadResource("https://unpkg.com/leaflet-draw@1.0.4/dist/leaflet.draw.js");
     }
     this.map = L.map(this.$el, this.map_options);
     this.map.on("moveend", (e) => this.$emit("moveend", e.target.getCenter()));
@@ -27,28 +29,6 @@ export default {
     this.map.setView(L.latLng(this.map_options.center.lat, this.map_options.center.lng), this.map_options.zoom);
   },
   methods: {
-    load_resource(url) {
-      return new Promise((resolve, reject) => {
-        const dataAttribute = `data-${url.split("/").pop().replace(/\./g, "-")}`;
-        if (document.querySelector(`[${dataAttribute}]`)) {
-          resolve();
-          return;
-        }
-        let element;
-        if (url.endsWith(".css")) {
-          element = document.createElement("link");
-          element.setAttribute("rel", "stylesheet");
-          element.setAttribute("href", url);
-        } else if (url.endsWith(".js")) {
-          element = document.createElement("script");
-          element.setAttribute("src", url);
-        }
-        element.setAttribute(dataAttribute, "");
-        document.head.appendChild(element);
-        element.onload = resolve;
-        element.onerror = reject;
-      });
-    },
     add_layer(layer) {
       L[layer.type](...layer.args).addTo(this.map);
     },

nicegui/static/utils/resources.js

@@ -0,0 +1,27 @@
+const resourceLoadPromises = {};
+
+export function loadResource(url) {
+  if (resourceLoadPromises[url]) return resourceLoadPromises[url];
+  const loadPromise = new Promise((resolve, reject) => {
+    const dataAttribute = `data-${url.split("/").pop().replace(/\./g, "-")}`;
+    if (document.querySelector(`[${dataAttribute}]`)) {
+      resolve();
+      return;
+    }
+    let element;
+    if (url.endsWith(".css")) {
+      element = document.createElement("link");
+      element.setAttribute("rel", "stylesheet");
+      element.setAttribute("href", url);
+    } else if (url.endsWith(".js")) {
+      element = document.createElement("script");
+      element.setAttribute("src", url);
+    }
+    element.setAttribute(dataAttribute, "");
+    document.head.appendChild(element);
+    element.onload = resolve;
+    element.onerror = reject;
+  });
+  resourceLoadPromises[url] = loadPromise;
+  return loadPromise;
+}