<h3 dir="auto">Description</h3>
<p dir="auto">This is <span class="issue-keyword tooltipped tooltipped-se" aria-label="This pull request closes issue #5466.">fix</span> <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2768974083" data-permission-text="Title is private" data-url="https://github.com/openstreetmap/openstreetmap-website/issues/5466" data-hovercard-type="issue" data-hovercard-url="/openstreetmap/openstreetmap-website/issues/5466/hovercard" href="https://github.com/openstreetmap/openstreetmap-website/issues/5466">#5466</a> After merging <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2769341490" data-permission-text="Title is private" data-url="https://github.com/openstreetmap/leaflet-osm/issues/43" data-hovercard-type="pull_request" data-hovercard-url="/openstreetmap/leaflet-osm/pull/43/hovercard" href="https://github.com/openstreetmap/leaflet-osm/pull/43">openstreetmap/leaflet-osm#43</a> flame graph looks like this:</p>
<a href="https://github.com/user-attachments/assets/435540a1-ebe4-40e6-8051-2d881e3ed28e">2025-01-06.15.48.22.png (view on web)</a>
<p dir="auto"><a href="https://share.firefox.dev/4a2Wc9Z" rel="nofollow">https://share.firefox.dev/4a2Wc9Z</a></p>
<p dir="auto">Most of the time is spent on two handlers that update information about the current location and elements in the right sidebar.</p>
<p dir="auto">Unfortunately, replacing <code class="notranslate">layeradd layerremove</code> with <code class="notranslate">baselayerchange overlaylayerchange</code> (<a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2768974083" data-permission-text="Title is private" data-url="https://github.com/openstreetmap/openstreetmap-website/issues/5466" data-hovercard-type="issue" data-hovercard-url="/openstreetmap/openstreetmap-website/issues/5466/hovercard?comment_id=2571570472&comment_type=issue_comment" href="https://github.com/openstreetmap/openstreetmap-website/issues/5466#issuecomment-2571570472">#5466 (comment)</a>) is difficult, since in addition to the Map Data layer, other elements may be displayed on the map. For example, the currently selected object on the map. It is not clear how to separate changes to Map Data objects and changes to the selected element. It is necessary to track changes in the active element, otherwise at least the Edit button will break.</p>
<p dir="auto">Therefore, I implemented a little ugly, but safer in terms of breaking business logic. When adding the Map Data layer, I set the pause flag in the slowdown handlers. While the Map Data is rendering, the user cannot interact with the interface, so it seems safe to pause the event handlers.</p>
<p dir="auto">Total 15s vs 0.5s when rendering 5000 elements.</p>
<a href="https://github.com/user-attachments/assets/13a099d0-0918-4c32-840d-24faf5a1cb8c">2025-01-06.16.07.32.png (view on web)</a>
<p dir="auto"><a href="https://share.firefox.dev/4h4IK7C" rel="nofollow">https://share.firefox.dev/4h4IK7C</a></p>
<hr>
<h4>You can view, comment on, or merge this pull request online at:</h4>
<p> <a href='https://github.com/openstreetmap/openstreetmap-website/pull/5474'>https://github.com/openstreetmap/openstreetmap-website/pull/5474</a></p>
<h4>Commit Summary</h4>
<ul>
<li><a href="https://github.com/openstreetmap/openstreetmap-website/pull/5474/commits/49834e5c1de3b70978ff836b2a606d318b117872" class="commit-link">49834e5</a> Suspend the layer event handlers when rendering Map Data</li>
</ul>
<h4 style="display: inline-block">File Changes </h4> <p style="display: inline-block">(<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5474/files">4 files</a>)</p>
<ul>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5474/files#diff-cdc070ced1c4000efd1e28357fd26b2fd617d7fccfeae0324222231db75dd6ee">app/assets/javascripts/index.js</a>
(6)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5474/files#diff-ef1a25386d3acf1a86026dcc1edba5a3ec22fc64053d657cb1564b25129475c6">app/assets/javascripts/index/layers/data.js</a>
(4)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5474/files#diff-87e33ea7d5e625dd851a78a3192719681de20caea8edd278a10f5342585c98e7">app/assets/javascripts/leaflet.layers.js</a>
(6)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5474/files#diff-e15f8139afbbcbe98b89298674e7980a4a4500dbc54a431e1325a11adfe83f83">app/assets/javascripts/leaflet.share.js</a>
(6)
</li>
</ul>
<h4>Patch Links:</h4>
<ul>
<li><a href='https://github.com/openstreetmap/openstreetmap-website/pull/5474.patch'>https://github.com/openstreetmap/openstreetmap-website/pull/5474.patch</a></li>
<li><a href='https://github.com/openstreetmap/openstreetmap-website/pull/5474.diff'>https://github.com/openstreetmap/openstreetmap-website/pull/5474.diff</a></li>
</ul>
<p style="font-size:small;-webkit-text-size-adjust:none;color:#666;">—<br />Reply to this email directly, <a href="https://github.com/openstreetmap/openstreetmap-website/pull/5474">view it on GitHub</a>, or <a href="https://github.com/notifications/unsubscribe-auth/AAK2OLOLCPAMRQAHOIEYQAD2JJ6TPAVCNFSM6AAAAABUVSY6FWVHI2DSMVQWIX3LMV43ASLTON2WKOZSG43TANRTG42DMMA">unsubscribe</a>.<br />You are receiving this because you are subscribed to this thread.<img src="https://github.com/notifications/beacon/AAK2OLIMB5FWZ3KNGLAYHST2JJ6TPA5CNFSM6AAAAABUVSY6FWWGG33NNVSW45C7OR4XAZNFJFZXG5LFVJRW63LNMVXHIX3JMTHKKJESSQ.gif" height="1" width="1" alt="" /><span style="color: transparent; font-size: 0; display: none; visibility: hidden; overflow: hidden; opacity: 0; width: 0; height: 0; max-width: 0; max-height: 0; mso-hide: all">Message ID: <span><openstreetmap/openstreetmap-website/pull/5474</span><span>@</span><span>github</span><span>.</span><span>com></span></span></p>
<script type="application/ld+json">[
{
"@context": "http://schema.org",
"@type": "EmailMessage",
"potentialAction": {
"@type": "ViewAction",
"target": "https://github.com/openstreetmap/openstreetmap-website/pull/5474",
"url": "https://github.com/openstreetmap/openstreetmap-website/pull/5474",
"name": "View Pull Request"
},
"description": "View this Pull Request on GitHub",
"publisher": {
"@type": "Organization",
"name": "GitHub",
"url": "https://github.com"
}
}
]</script>