From 938212c429a159a1ceeec13b91c4ae966ef6663e Mon Sep 17 00:00:00 2001
From: Marwin Hochfelsner <50826859+hlfan@users.noreply.github.com>
Date: Sun, 15 Jun 2025 09:06:31 +0200
Subject: [PATCH] Load map key only once from sidebar-pane

---
 app/assets/javascripts/leaflet.key.js         | 22 ++++++++-----------
 .../javascripts/leaflet.sidebar-pane.js       |  6 +++++
 2 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/app/assets/javascripts/leaflet.key.js b/app/assets/javascripts/leaflet.key.js
index 735de3415..470ee6902 100644
--- a/app/assets/javascripts/leaflet.key.js
+++ b/app/assets/javascripts/leaflet.key.js
@@ -3,24 +3,20 @@ L.OSM.key = function (options) {
 
   control.onAddPane = function (map, button, $ui) {
     $ui
-      .on("show", shown)
-      .on("hide", hidden);
+      .on("show", () => {
+        map.on("zoomend", update);
+        update();
+      })
+      .on("hide", () => {
+        map.off("zoomend", update);
+      });
 
     map.on("baselayerchange", updateButton);
 
     updateButton();
 
-    function shown() {
-      map.on("zoomend baselayerchange", update);
-      fetch("/key")
-        .then(r => r.text())
-        .then(html => { $ui.html(html); })
-        .then(update);
-    }
-
-    function hidden() {
-      map.off("zoomend baselayerchange", update);
-    }
+    control.onContentLoaded = update;
+    $ui.one("show", control.loadContent);
 
     function updateButton() {
       const disabled = !map.getMapBaseLayer().options.hasLegend;
diff --git a/app/assets/javascripts/leaflet.sidebar-pane.js b/app/assets/javascripts/leaflet.sidebar-pane.js
index 9d2af2a25..acd4b17a1 100644
--- a/app/assets/javascripts/leaflet.sidebar-pane.js
+++ b/app/assets/javascripts/leaflet.sidebar-pane.js
@@ -27,6 +27,12 @@ L.OSM.sidebarPane = function (options, uiClass, buttonTitle, paneTitle) {
 
     options.sidebar.addPane($ui);
 
+    this.loadContent = () =>
+      fetch("/" + uiClass)
+        .then(r => r.text())
+        .then(html => { $(html).appendTo($ui); })
+        .then(this.onContentLoaded);
+
     this.onAddPane(map, button, $ui, toggle);
 
     function toggle(e) {
-- 
2.39.5