[openstreetmap/openstreetmap-website] Map Data checkbox: perhaps use toggle slider instead (PR #5009)

[David Tsiklauri]

This PR addresses "Map Data checkbox: perhaps use toggle slider instead" issue mentioned in the https://github.com/openstreetmap/openstreetmap-website/issues/4931

Several changes were made to the data loading functionality:

1. Clicking "Map Data" checkbox will add "(Loading...)" suffix to the label. It will be shown until back end collects and returns all the information (see "Loading Video"). After all the information is returned, suffix will be removed.
2. After getting information and agreeing to show it on the map, rendering process will be asynchronous. Therefore, there will be no more browser or page freezes and it will have animation like visual (see "Render Video").
3. If user unchecks "Map Data" checkbox, removing process will be also asynchronous and there won't be any freezes. It will also have animation like visual (see "Remove Video").

- Checkbox state will be updated as soon as it is clicked, so changing it to the toggle one has no more benefits.
- If the user decides to uncheck "Map Data" while back end collects information, "(Loading...)" suffix will disappear.
- If the user decides to uncheck "Map Data" while objects is rendered, it won't  trigger change until the rendering process is done. After the process, application will check and if "Map Data" is unchecked, it will start removing rendered objects.

Fixes https://github.com/openstreetmap/openstreetmap-website/issues/4931

### Videos:

Loading Video

https://github.com/user-attachments/assets/7f3bc0bd-544f-4f9f-bd5c-2eca126020b9

Render Video

https://github.com/user-attachments/assets/8e11fc5f-1d9c-4458-a5a8-96479627d5ff

Remove Video

https://github.com/user-attachments/assets/0743916d-353e-4717-8600-c74937b6f2fe


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

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

-- Commit Summary --

  * Map Data checkbox: perhaps use toggle slider instead

-- File Changes --

    M app/assets/javascripts/index/browse.js (12)
    M app/assets/javascripts/leaflet.layers.js (2)
    M config/locales/en.yml (1)
    M vendor/assets/leaflet/leaflet.osm.js (59)

-- Patch Links --

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

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

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