<p dir="auto">This PR addresses heavy calls and long load time of the Issues page. Problem was mentioned in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2408536272" data-permission-text="Title is private" data-url="https://github.com/openstreetmap/openstreetmap-website/issues/4990" data-hovercard-type="pull_request" data-hovercard-url="/openstreetmap/openstreetmap-website/pull/4990/hovercard" href="https://github.com/openstreetmap/openstreetmap-website/pull/4990">#4990</a> by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/AntonKhorev/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/AntonKhorev">@AntonKhorev</a>.</p>
<p dir="auto">Added infinite scroll functionality. On the first load, there will be only loader and after that, every time loader will be shown on the screen, new 50 issues will be called and displayed. In terms of performance, locally I have 1000 users and 1000 issues. First load time was decreased from ~8s to ~1s, and after that every call for the next 50 issues takes ~150ms. In real environment, it will have much better improvement, as instead of searching for 30000 issues, it will take only 50 (in theory, the difference should be 30x better in the real environment, then it is on my local machine).</p>
<p dir="auto">Video:</p>
<p dir="auto"><a href="https://github.com/user-attachments/assets/33254baf-f553-4a27-8b3e-9ce651a08c53">https://github.com/user-attachments/assets/33254baf-f553-4a27-8b3e-9ce651a08c53</a></p>
<p dir="auto">Issues not found:</p>
<p dir="auto"><a href="https://github.com/user-attachments/assets/ea28ad5e-aeb0-4ae9-aa64-e337e1c72b6f">image.png (view on web)</a></p>
<p dir="auto">User not found:</p>
<p dir="auto"><a href="https://github.com/user-attachments/assets/95695949-3136-4e41-a9c5-e91de6e8c3e5">image.png (view on web)</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/5033'>https://github.com/openstreetmap/openstreetmap-website/pull/5033</a></p>
<h4>Commit Summary</h4>
<ul>
<li><a href="https://github.com/openstreetmap/openstreetmap-website/pull/5033/commits/ac2b859a6667154797af9dc5c9c10e94af7fa657" class="commit-link">ac2b859</a> Infinite scroll issues page</li>
</ul>
<h4 style="display: inline-block">File Changes </h4> <p style="display: inline-block">(<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5033/files">8 files</a>)</p>
<ul>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5033/files#diff-debf59904131dc89a88ab44cbb1d6deaaa5a7d70c0507f674080df62f7c8e41f">app/abilities/ability.rb</a>
(4)
</li>
<li>
<strong>A</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5033/files#diff-d04a52b64e10eadcf216b773e99b3f50b2871e5e12fb38220803b486690b80c9">app/assets/javascripts/issues.js</a>
(48)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5033/files#diff-cc7acbfb990b45e6f8cb1fe65cbd081a7819b596b03e0ac2ef2e82a9537d3278">app/controllers/issues_controller.rb</a>
(11)
</li>
<li>
<strong>A</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5033/files#diff-9fc81c6fc723d81e4892b27e574ab0b2e36138253e56d3a20ef35045bfcd3605">app/views/issues/_page.html.erb</a>
(28)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5033/files#diff-ed96df420873aaa1d006204ba97c74a9ffcbe5c21c25de224b6b4c95edb8cd7a">app/views/issues/index.html.erb</a>
(52)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5033/files#diff-44438ce218f5287c58d0017f965d888715635d94280669896f75841fbd7b4cd7">config/locales/en.yml</a>
(13)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5033/files#diff-959bc9abc46a55332bb64d5155a79323afa75a50ec1a2137ddd22d926f62c6c5">config/routes.rb</a>
(3)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5033/files#diff-1937855845d794c2ab6ec4812a8b4e3230c470b69ff763285bdd810915042839">test/system/issues_test.rb</a>
(33)
</li>
</ul>
<h4>Patch Links:</h4>
<ul>
<li><a href='https://github.com/openstreetmap/openstreetmap-website/pull/5033.patch'>https://github.com/openstreetmap/openstreetmap-website/pull/5033.patch</a></li>
<li><a href='https://github.com/openstreetmap/openstreetmap-website/pull/5033.diff'>https://github.com/openstreetmap/openstreetmap-website/pull/5033.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/5033">view it on GitHub</a>, or <a href="https://github.com/notifications/unsubscribe-auth/AAK2OLNDKDCGRMWFK74H6C3ZO62HFAVCNFSM6AAAAABLWVYUOGVHI2DSMVQWIX3LMV43ASLTON2WKOZSGQZTQMJYGEZTCNI">unsubscribe</a>.<br />You are receiving this because you are subscribed to this thread.<img src="https://github.com/notifications/beacon/AAK2OLN2IP5Z3GPPKLUNNATZO62HFA5CNFSM6AAAAABLWVYUOGWGG33NNVSW45C7OR4XAZNFJFZXG5LFVJRW63LNMVXHIX3JMTHJCU5RYM.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/5033</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/5033",
"url": "https://github.com/openstreetmap/openstreetmap-website/pull/5033",
"name": "View Pull Request"
},
"description": "View this Pull Request on GitHub",
"publisher": {
"@type": "Organization",
"name": "GitHub",
"url": "https://github.com"
}
}
]</script>