fix app freeze

app/javascript/application.js

@@ -1,9 +1,9 @@
 // Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
 import '@hotwired/turbo-rails'
 
-import 'stimulus-controllers-index'
-import * as functions from 'helpers/functions'
 import AOS from 'aos'
+import * as functions from 'helpers/functions'
+import 'stimulus-controllers-index'
 
 // Note: Don't import map js here for faster frontpage load times
 
@@ -21,7 +21,6 @@ window.addEventListener('turbo:load', function () {
   }
 })
 
-
 if ('serviceWorker' in navigator) {
   // Register the service worker
   window.addEventListener('load', () => {

app/javascript/channels/map_channel.js

@@ -46,16 +46,17 @@ export function initializeSocket () {
       if (channelStatus === 'off') {
         reloadMapProperties().then(() => {
           initializeMaplibreProperties()
-          loadLayerDefinitions().then(() => {
+          loadLayerDefinitions().then(async () => {
             // If basemap actually changed, setBackgroundMapLayer() will trigger
             // initializeStyles() via style.load (which re-initializes layer sources/styles).
             // If not, we re-initialize them directly to catch up on any missed updates.
             if (!setBackgroundMapLayer()) {
               initializeLayerSources()
-              initializeLayerStyles()
+              await initializeLayerStyles()
             }
             map.fire('load', { detail: { message: 'Map re-loaded by map_channel' } })
           })
+          // status('Connection to server re-established')
         })
       }
       consumer.connection.webSocket.onerror = function (_event) {

app/javascript/maplibre/controls/buttons/select.js

@@ -1,13 +1,11 @@
 import { resetEditControls } from 'maplibre/controls/edit';
 import { resetControls } from 'maplibre/controls/shared';
-import { recoverHandlers } from 'maplibre/map';
 
 export class MapSelectControl {
   constructor (_options) {
     this._container = document.createElement('div')
     this._container.innerHTML = '<button class="maplibregl-ctrl-btn maplibregl-ctrl-select" type="button" title="Select mode" aria-label="Select mode" aria-pressed="false"><b><i class="bi bi-hand-index"></i></b></button>'
     this._container.onclick = function (e) {
-      recoverHandlers()
       resetControls()
       resetEditControls()
       e.target.closest('button').classList.add('active')

app/javascript/maplibre/map.js

@@ -6,10 +6,10 @@ import * as functions from 'helpers/functions';
 import { status } from 'helpers/status';
 import { AnimateLineAnimation, AnimatePointAnimation, AnimatePolygonAnimation, animateViewFromProperties } from 'maplibre/animations';
 import { hideContextMenu, initContextMenu } from 'maplibre/controls/context_menu';
-import { isGeolocateCompassModeActive, isGeolocateFollowModeActive } from 'maplibre/controls/geolocate';
+import { isGeolocateFollowModeActive } from 'maplibre/controls/geolocate';
 import { initCtrlTooltips, initializeDefaultControls, initSettingsModal, resetControls } from 'maplibre/controls/shared';
 import { initializeViewControls } from 'maplibre/controls/view';
-import { draw, resetEditMode } from 'maplibre/edit';
+import { resetEditMode } from 'maplibre/edit';
 import { highlightFeature, resetHighlightedFeature } from 'maplibre/feature';
 import { getFeature, initializeLayers, initializeLayerSources, initializeLayerStyles, layers, renderLayers } from 'maplibre/layers/layers';
 import { basemaps, defaultFont, demSource, elevationSource } from 'maplibre/styles/basemaps';
@@ -26,38 +26,6 @@ let backgroundHillshade
 let backgroundGlobe
 let backgroundContours
 
-// Cycle handler enable state and dispatch synthetic pointer-up events to clear
-// any wedged interaction state. Idempotent — safe to call any time. Triggered
-// automatically on first idle after visibility resume, and manually via the
-// select-mode button click.
-export function recoverHandlers () {
-  status("Recovering handlers")
-  const opts = { bubbles: true, cancelable: true }
-  window.dispatchEvent(new MouseEvent('mouseup', opts))
-  if (window.PointerEvent) {
-    window.dispatchEvent(new PointerEvent('pointerup', { ...opts, pointerType: 'mouse' }))
-  }
-  const cycle = (h) => { h.disable(); h.enable() }
-  cycle(map.scrollZoom)
-  cycle(map.doubleClickZoom)
-  cycle(map.keyboard)
-  cycle(map.boxZoom)
-  cycle(map.touchPitch)
-  if (!isGeolocateCompassModeActive()) {
-    cycle(map.dragRotate)
-    cycle(map.touchZoomRotate)
-    if (!draw || draw.getMode() !== 'draw_paint_mode') cycle(map.dragPan)
-  }
-}
-
-// Module-scope visibilitychange listener — registered once. Inside initializeMap
-// would re-register on every Stimulus reconnect (Turbo navigation), accumulating
-// stale closures. Guard with `!map` since this can fire before initializeMap runs.
-document.addEventListener('visibilitychange', () => {
-  if (document.visibilityState !== 'visible' || !map) return
-  // map.once('idle', recoverHandlers)
-})
-
 // Workflow of map loading:
 //
 // initializeMap()
@@ -171,7 +139,7 @@ export async function initializeMap (divId = 'maplibre-map') {
   map.on('touchend', (e) => { updateCursorPosition(e) })
   map.on('drag', () => {
     mapInteracted = true
-    if (layers.filter(l => (l.type === 'overpass' || l.type === 'wikipedia') && l.show !== false).length) { dom.animateElement('#layer-reload', 'fade-in') }
+    if (layers && layers.filter(l => (l.type === 'overpass' || l.type === 'wikipedia') && l.show !== false).length) { dom.animateElement('#layer-reload', 'fade-in') }
   })
   map.on('zoom', (_e) => { limitZoom() })
   map.on('online', (_e) => { functions.e('#maplibre-map', e => { e.setAttribute('data-online', true) }) })
@@ -525,10 +493,10 @@ export function setBackgroundMapLayer (mapName = mapProperties.base_map, force =
     basemap = basemaps()['osmRasterTiles']
   }
   if (basemap) {
-    map.once('style.load', () => {
+    map.once('style.load', async () => {
       status('Loaded base map ' + mapName)
       // on map style change, all sources and layers are removed, so we need to re-initialize them
-      initializeStyles()
+      await initializeStyles()
       limitZoom()
     })
     backgroundMapLayer = mapName