From 6222426ebf6fd89521c1bad252c3fd2c09082e67 Mon Sep 17 00:00:00 2001
From: Marwin Hochfelsner <50826859+hlfan@users.noreply.github.com>
Date: Tue, 29 Apr 2025 17:03:54 +0200
Subject: [PATCH] Unify directions page handler and parallelize requests

---
 app/assets/javascripts/index/directions.js | 48 +++++++++-------------
 1 file changed, 19 insertions(+), 29 deletions(-)

diff --git a/app/assets/javascripts/index/directions.js b/app/assets/javascripts/index/directions.js
index 61c646c59..87bf20330 100644
--- a/app/assets/javascripts/index/directions.js
+++ b/app/assets/javascripts/index/directions.js
@@ -8,7 +8,7 @@ OSM.Directions = function (map) {
   let lastLocation = [];
   let chosenEngine;
 
-  let scheduledRouteArguments = null;
+  let sidebarReadyPromise = null;
 
   const routeOutput = OSM.DirectionsRouteOutput(map);
 
@@ -88,15 +88,7 @@ OSM.Directions = function (map) {
     select.val(chosenEngine.provider);
   }
 
-  function getRoute(...routeArguments) {
-    if ($("#directions_content").length) {
-      getScheduledRoute(...routeArguments);
-    } else {
-      scheduledRouteArguments = routeArguments;
-    }
-  }
-
-  function getScheduledRoute(fitRoute, reportErrors) {
+  function getRoute(fitRoute, reportErrors) {
     // Cancel any route that is already in progress
     if (controller) controller.abort();
 
@@ -116,12 +108,14 @@ OSM.Directions = function (map) {
     $("#directions_content").html($(".directions_form .loader_copy").html());
     map.setSidebarOverlaid(false);
     controller = new AbortController();
-    chosenEngine.getRoute(points, controller.signal).then(function (route) {
+    chosenEngine.getRoute(points, controller.signal).then(async function (route) {
+      await sidebarLoaded();
       routeOutput.write($("#directions_content"), route);
       if (fitRoute) {
         routeOutput.fit();
       }
-    }).catch(function () {
+    }).catch(async function () {
+      await sidebarLoaded();
       routeOutput.remove($("#directions_content"));
       if (reportErrors) {
         $("#directions_content").html("<div class=\"alert alert-danger\">" + OSM.i18n.t("javascripts.directions.errors.no_route") + "</div>");
@@ -134,6 +128,7 @@ OSM.Directions = function (map) {
   function closeButtonListener(e) {
     e.stopPropagation();
     routeOutput.remove($("#directions_content"));
+    sidebarReadyPromise = null;
     map.setSidebarOverlaid(true);
     // TODO: collapse width of sidebar back to previous
   }
@@ -221,28 +216,23 @@ OSM.Directions = function (map) {
 
   const page = {};
 
-  page.pushstate = page.popstate = function () {
-    page.load();
-
-    if ($("#directions_content").length) return;
-
-    OSM.loadSidebarContent("/directions", () => {
-      if (scheduledRouteArguments) {
-        getScheduledRoute(...scheduledRouteArguments);
-        scheduledRouteArguments = null;
-      }
-    });
-
-    map.setSidebarOverlaid(!endpoints[0].latlng || !endpoints[1].latlng);
-  };
+  function sidebarLoaded() {
+    if ($("#directions_content").length) {
+      sidebarReadyPromise = null;
+      return Promise.resolve();
+    }
+    if (sidebarReadyPromise) return sidebarReadyPromise;
+    sidebarReadyPromise = new Promise(resolve => OSM.loadSidebarContent("/directions", resolve));
+    return sidebarReadyPromise;
+  }
 
-  page.load = function () {
+  page.pushstate = page.popstate = page.load = function () {
     initializeFromParams();
 
     $(".search_form").hide();
     $(".directions_form").show();
 
-    enableListeners();
+    sidebarLoaded().then(enableListeners);
 
     map.setSidebarOverlaid(!endpoints[0].latlng || !endpoints[1].latlng);
   };
@@ -263,7 +253,7 @@ OSM.Directions = function (map) {
 
     routeOutput.remove($("#directions_content"));
 
-    scheduledRouteArguments = null;
+    sidebarReadyPromise = null;
   };
 
   return page;
-- 
2.39.5