<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 pagination functionality. When pagination buttons will be clicked, next or previous 50 issues will be called and displayed without a page refresh (JavaScript will make a call and render returned html in the container). In terms of performance, on the local environment 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). Because of the pagination functionality, now issues are sorted according to IDs (it should be the same sort as creation time sort).</p>
<p dir="auto">To address <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> 's <a href="https://github.com/openstreetmap/openstreetmap-website/pull/4990#issuecomment-2248072093" data-hovercard-type="pull_request" data-hovercard-url="/openstreetmap/openstreetmap-website/pull/4990/hovercard">comment</a> about browser built-in search, user now can change <code class="notranslate">?limit=50</code> query parameter in the url to any number. Therefore, if any user wants to use browser built-in search, he can just change it, for example, to <code class="notranslate">?limit=10000</code> and 10000 issues will be rendered.</p>
<p dir="auto">To address <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/nertc/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/nertc">@nertc</a> 's <a href="https://github.com/openstreetmap/openstreetmap-website/pull/5033#issuecomment-2260783731" data-hovercard-type="pull_request" data-hovercard-url="/openstreetmap/openstreetmap-website/pull/5033/hovercard">comment</a> about clicking <code class="notranslate">go back</code> button of the browser, now every page is added to the browser history. Therefore, <code class="notranslate">go back</code> button will work fine, if user enters any report and then decides to go back to the list.</p>
<p dir="auto">Video:</p>
<p dir="auto"><a href="https://github.com/user-attachments/assets/05036db3-70ef-41a0-b748-74c1183e89b4">https://github.com/user-attachments/assets/05036db3-70ef-41a0-b748-74c1183e89b4</a></p>
<p dir="auto">Issues not found:</p>
<p dir="auto"><a href="https://github.com/user-attachments/assets/1e729e91-9b14-4c90-a43a-8fad02b9c703">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/814339a9-e05b-4ef0-9562-6995ba2df69a">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/5057'>https://github.com/openstreetmap/openstreetmap-website/pull/5057</a></p>
<h4>Commit Summary</h4>
<ul>
<li><a href="https://github.com/openstreetmap/openstreetmap-website/pull/5057/commits/871bf88c02b68d3f51c6e4bdc25a181c3c5f2937" class="commit-link">871bf88</a> Add pagination to 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/5057/files">9 files</a>)</p>
<ul>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5057/files#diff-debf59904131dc89a88ab44cbb1d6deaaa5a7d70c0507f674080df62f7c8e41f">app/abilities/ability.rb</a>
(4)
</li>
<li>
<strong>A</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5057/files#diff-3f16892684ee3bd2a9631e5cfec057274c0fc38aee12bc8661f4a571d678247e">app/assets/javascripts/shared/pagination_spa.js</a>
(111)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5057/files#diff-cc7acbfb990b45e6f8cb1fe65cbd081a7819b596b03e0ac2ef2e82a9537d3278">app/controllers/issues_controller.rb</a>
(13)
</li>
<li>
<strong>A</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5057/files#diff-9fc81c6fc723d81e4892b27e574ab0b2e36138253e56d3a20ef35045bfcd3605">app/views/issues/_page.html.erb</a>
(40)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5057/files#diff-ed96df420873aaa1d006204ba97c74a9ffcbe5c21c25de224b6b4c95edb8cd7a">app/views/issues/index.html.erb</a>
(38)
</li>
<li>
<strong>A</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5057/files#diff-26548f263ce7ae58a8f8e8e779a64cfd4b1eb0fcf077da168d7297f318866943">app/views/shared/_pagination_spa.html.erb</a>
(20)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5057/files#diff-44438ce218f5287c58d0017f965d888715635d94280669896f75841fbd7b4cd7">config/locales/en.yml</a>
(10)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5057/files#diff-959bc9abc46a55332bb64d5155a79323afa75a50ec1a2137ddd22d926f62c6c5">config/routes.rb</a>
(3)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5057/files#diff-1937855845d794c2ab6ec4812a8b4e3230c470b69ff763285bdd810915042839">test/system/issues_test.rb</a>
(62)
</li>
</ul>
<h4>Patch Links:</h4>
<ul>
<li><a href='https://github.com/openstreetmap/openstreetmap-website/pull/5057.patch'>https://github.com/openstreetmap/openstreetmap-website/pull/5057.patch</a></li>
<li><a href='https://github.com/openstreetmap/openstreetmap-website/pull/5057.diff'>https://github.com/openstreetmap/openstreetmap-website/pull/5057.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/5057">view it on GitHub</a>, or <a href="https://github.com/notifications/unsubscribe-auth/AAK2OLJG4WJHRGN42S2FBJLZQHSK5AVCNFSM6AAAAABMEAEFBKVHI2DSMVQWIX3LMV43ASLTON2WKOZSGQ2TGMBRG44DINQ">unsubscribe</a>.<br />You are receiving this because you are subscribed to this thread.<img src="https://github.com/notifications/beacon/AAK2OLKCG4HTMVNHTG7W3LLZQHSK5A5CNFSM6AAAAABMEAEFBKWGG33NNVSW45C7OR4XAZNFJFZXG5LFVJRW63LNMVXHIX3JMTHJENQU6Y.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/5057</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/5057",
"url": "https://github.com/openstreetmap/openstreetmap-website/pull/5057",
"name": "View Pull Request"
},
"description": "View this Pull Request on GitHub",
"publisher": {
"@type": "Organization",
"name": "GitHub",
"url": "https://github.com"
}
}
]</script>