[openstreetmap/openstreetmap-website] Replace searching.gif images with Bootstrap spinners (PR #3779)

[Anton Khorev]

> > Why should they be written outside of javascript?
> 
> Because there is html involved, and there are CSS style rules applied to that html. So if I want to make changes to that html, or the layout of where the spinner appears,

You know that one of the various methods of placing these spinners is having a hidden spinner stashed somewhere then copying it to the place where it needs to appear with javascript. You are not controlling *where* with html in this case.

> or add an extra div or add padding or anything like that, then I should be looking in the `app/views` directory to find the html code and css classes.

Make a spinner template, embed it in `osm.js.erb`, use it when you need a spinner to appear. This file already had some spinner-related code (https://github.com/openstreetmap/openstreetmap-website/commit/8bc7793d4233b9836e0d3513583ec76762128dd9).

Here's the template:

```
  <div class="text-center">
    <div class="spinner-border" role="status">
      <span class="visually-hidden"><%= t("browse.start_rjs.loading") %></span>
    </div>
  </div>
```

> We can by all means use JavaScript to implement the interactivity, but we shouldn't be using it for constructing html layouts or managing CSS classes.

Are you saying that we shouldn't remove spinners with javascript? Or removing them is ok because it's somehow not constructing/managing but placing them is not ok?

Continuing https://github.com/openstreetmap/openstreetmap-website/issues/647#issuecomment-1308694592, where would you put loading indicators on a page that works without javascript? Where would you put loading indicators on pages that work with turbo?

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

Message ID: <openstreetmap/openstreetmap-website/pull/3779/c1319818750 at github.com>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20221118/5e914972/attachment.htm>