[openstreetmap/openstreetmap-website] Add pagination to Issues page (PR #5057)

[David Tsiklauri]

This PR addresses heavy calls and long load time of the Issues page. Problem was mentioned in https://github.com/openstreetmap/openstreetmap-website/pull/4990 by @AntonKhorev.

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).

To address @AntonKhorev 's [comment](https://github.com/openstreetmap/openstreetmap-website/pull/4990#issuecomment-2248072093) about browser built-in search, user now can change `?limit=50` 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 `?limit=10000` and 10000 issues will be rendered.

To address @nertc 's [comment](https://github.com/openstreetmap/openstreetmap-website/pull/5033#issuecomment-2260783731) about clicking `go back` button of the browser, now every page is added to the browser history. Therefore, `go back` button will work fine, if user enters any report and then decides to go back to the list.

Video:

https://github.com/user-attachments/assets/05036db3-70ef-41a0-b748-74c1183e89b4

Issues not found:

![image](https://github.com/user-attachments/assets/1e729e91-9b14-4c90-a43a-8fad02b9c703)

User not found:

![image](https://github.com/user-attachments/assets/814339a9-e05b-4ef0-9562-6995ba2df69a)

You can view, comment on, or merge this pull request online at:

  https://github.com/openstreetmap/openstreetmap-website/pull/5057

-- Commit Summary --

  * Add pagination to Issues page

-- File Changes --

    M app/abilities/ability.rb (4)
    A app/assets/javascripts/shared/pagination_spa.js (111)
    M app/controllers/issues_controller.rb (13)
    A app/views/issues/_page.html.erb (40)
    M app/views/issues/index.html.erb (38)
    A app/views/shared/_pagination_spa.html.erb (20)
    M config/locales/en.yml (10)
    M config/routes.rb (3)
    M test/system/issues_test.rb (62)

-- Patch Links --

https://github.com/openstreetmap/openstreetmap-website/pull/5057.patch
https://github.com/openstreetmap/openstreetmap-website/pull/5057.diff

-- 
Reply to this email directly or view it on GitHub:
https://github.com/openstreetmap/openstreetmap-website/pull/5057
You are receiving this because you are subscribed to this thread.

Message ID: <openstreetmap/openstreetmap-website/pull/5057 at github.com>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20240807/7d7ebeac/attachment-0001.htm>