Border spinner while loading

[ekdahl]

trafficstars

Would it be possible to replace the GIF loading symbol from the supplied themes with a border spinner instead?

Bootstrap has a rotating border spinner included which use currentColor as border. https://getbootstrap.com/docs/5.3/components/spinners/ This would enable easy styling for different color schemes.

I did a small try myself but failed, as the whole content started spinning :). Maybe it's more work than what is worth, just wanted to raise the idea.

[fisharebest]

The spinner is created using the following CSS:

.wt-ajax-load:empty {
    height: 32px;
    width: 32px;
    background: url(images/loading-32x32.gif) no-repeat;
}

Google provides several examples of using CSS to create spinners. I would have thought it was pretty straightforward.

[ekdahl]

Sure, I understand that. I don't think I was clear enough with what I meant. What I was after was to replace the spinner with an inline SVG (or the bootstrap alternative), which gives the advantage that the same image can be used for different palettes (light and dark). Because with inline SVG CSS variables for colors can be used to style the image. This is not possible with external images, and then different images has to be used for each palette. I'm not sure how to accomplish this in webtrees, so that everywhere, where the class wt-ajax-load is used an inline SVG should be used, when loading. Found a good source of SVG spinners here: https://github.com/n3r4zzurr0/svg-spinners

[ekdahl]

For example, replacing this row with the following code will produce nice looking spinners:

Bootstrap:

<div class="wt-page-content wt-chart wt-chart-relationships" data-wt-ajax-url="<?= e($ajax_url) ?>">
    <div class="spinner-border position-absolute top-50 start-50" role="status">
        <span class="visually-hidden">Loading...</span>
    </div>
</div>

Fontawesome:

<div class="wt-page-content wt-chart wt-chart-relationships" data-wt-ajax-url="<?= e($ajax_url) ?>">
    <i class="fa-solid fa-spinner fa-spin fa-3x position-absolute top-50 start-50 translate-middle"></i>
</div>

But there would be a lot of places to change and is much more code than today. Can you think of a neater way to utilize one of the bootstrap or fontawesome spinners?

[fisharebest]

I think I prefer the font-awesome icon to the bootstrap icon.

We could create it as an icon file - the same as our other icons.

This would also allow themes to provide their own spinner - as themes can replace any of our "view" files.

There are about 15-20 places in the code where we would need to add it. e.g.

<div data-wt-ajax-load="...">
  <?= view('icons/spinner') ?>
</div>

[fisharebest]

I think I prefer the font-awesome icon to the bootstrap icon.

We could create it as an icon file - the same as our other icons.

This would also allow themes to provide their own spinner - as themes can replace any of our "view" files.

There are about 15-20 places in the code where we would need to add it. e.g.

<div data-wt-ajax-url="...">
  <?= view('icons/spinner') ?>
</div>

But there's also some code that requires an empty <div> in order to work. This will need rewriting.

There are also smaller versions of the same GIF icon. e.g. the interactive tree uses one when it is loading.

[ekdahl]

I started on a branch here and did the easy ones. But as you mention, some cases are not as simple.