Fix: #5044 - refactor the loading indicator for dynamically loaded content

31 files changed, 80 insertions, 60 deletions

diff --git a/resources/css/_base.css b/resources/css/_base.css
index 4c5cd267a7..ae640252d0 100644
--- a/resources/css/_base.css
+++ b/resources/css/_base.css
@@ -152,3 +152,15 @@ a:hover, .btn-link:hover, .nav-link:hover {
 .leaflet-bottom, .leaflet-top {
     z-index: 999;
 }
+
+/* Show a spinner if the page takes more than 1 second to load. */
+@keyframes spinner-fade-in {
+    to { opacity: 1; }
+}
+
+.wt-icon-spinner {
+    color: lightgrey;
+    opacity: 0;
+    animation: spinner-fade-in 0.5s ease-in forwards;
+    animation-delay: 1s;
+}
diff --git a/resources/css/administration.css b/resources/css/administration.css
index 51e239d1d4..e605a98d81 100644
--- a/resources/css/administration.css
+++ b/resources/css/administration.css
@@ -43,19 +43,6 @@ h4 {
     background: url(administration/paper_fibers.png); /* http://www.subtlepatterns.com */
 }
 
-/* Show a placeholder for slow ajax responses. */
-.wt-ajax-load:empty {
-    height: 32px;
-    width: 32px;
-    background: url(images/loading-32x32.gif) no-repeat;
-}
-
-@media (min-device-pixel-ratio: 2) {
-    ::backdrop, .wt-global {
-        background: url(administration/paper_fibers_@2X.png);
-    }
-}
-
 /* Raw GEDCOM data */
 .gedcom-data {
     white-space: pre-wrap;
diff --git a/resources/css/administration/paper_fibers_@2X.png b/resources/css/administration/paper_fibers_@2X.png
deleted file mode 100644
index 6a9fc6a6e4..0000000000
--- a/resources/css/administration/paper_fibers_@2X.png
+++ /dev/null
diff --git a/resources/css/images/loading-32x32.gif b/resources/css/images/loading-32x32.gif
deleted file mode 100644
index 5bb90fd6a4..0000000000
--- a/resources/css/images/loading-32x32.gif
+++ /dev/null
diff --git a/resources/css/minimal.css b/resources/css/minimal.css
index 3c4e62887b..4dbdd0e6d6 100755
--- a/resources/css/minimal.css
+++ b/resources/css/minimal.css
@@ -670,15 +670,6 @@ div.faq_body {
 }
 
 /*
- * Any element that is loaded dynamically has the class wt-ajax-load.
- * We can provide a "loading" placeholder for empty elements with this class.
- */
-.wt-ajax-load:empty {
-    height: 32px;
-    background: url(images/loading-32x32.gif) no-repeat 50% 50%;
-}
-
-/*
  * Default icons are provided by FontAwesome.
  */
 .wt-icon-sex-f {
diff --git a/resources/js/vendor.js b/resources/js/vendor.js
index e6996a475d..f0dabed72e 100644
--- a/resources/js/vendor.js
+++ b/resources/js/vendor.js
@@ -42,8 +42,8 @@ import {
   faGenderless, faGripHorizontal, faGripLines, faHistory, faInfoCircle, faKeyboard, faLanguage, faLink,
   faList, faLock, faMagic, faMap, faMapMarkerAlt, faMars, faMedkit, faMinusSquare, faPaintBrush, faPause,
   faPencilAlt, faPlay, faPlus, faPlusSquare, faPuzzlePiece, faQuestionCircle, faRedo, faSearch,
-  faSearchLocation, faSearchMinus, faSearchPlus, faServer, faShareAlt, faSitemap, faSortAmountDown, faStar,
-  faStepForward, faStickyNote, faStop, faSyncAlt, faTags, faThList, faThumbtack, faTimes, faTransgender,
+  faSearchLocation, faSearchMinus, faSearchPlus, faServer, faShareAlt, faSitemap, faSortAmountDown, faSpinner,
+  faStar, faStepForward, faStickyNote, faStop, faSyncAlt, faTags, faThList, faThumbtack, faTimes, faTransgender,
   faTrashAlt, faTree, faUndo, faUniversity, faUnlink, faUpload, faUser, faUsers, faVenus, faWrench,
   // For the BeautifyMarker library
   faBabyCarriage, faBullseye, faHome, faIndustry, faInfinity, faStarOfDavid, faWater
@@ -86,8 +86,8 @@ library.add(
   faGenderless, faGripHorizontal, faGripLines, faHistory, faInfoCircle, faKeyboard, faLanguage, faLink,
   faList, faLock, faMagic, faMap, faMapMarkerAlt, faMars, faMedkit, faMinusSquare, faPaintBrush, faPause,
   faPencilAlt, faPlay, faPlus, faPlusSquare, faPuzzlePiece, faQuestionCircle, faRedo, faSearch,
-  faSearchLocation, faSearchMinus, faSearchPlus, faServer, faShareAlt, faSitemap, faSortAmountDown, faStar,
-  faStepForward, faStickyNote, faStop, faSyncAlt, faTags, faThList, faThumbtack, faTimes, faTransgender,
+  faSearchLocation, faSearchMinus, faSearchPlus, faServer, faShareAlt, faSitemap, faSortAmountDown, faSpinner,
+  faStar, faStepForward, faStickyNote, faStop, faSyncAlt, faTags, faThList, faThumbtack, faTimes, faTransgender,
   faTrashAlt, faTree, faUndo, faUniversity, faUnlink, faUpload, faUser, faUsers, faVenus, faWrench,
   // For the BeautifyMarker library
   faBabyCarriage, faBullseye, faHome, faIndustry, faInfinity, faStarOfDavid, faWater
diff --git a/resources/views/admin/location-edit.phtml b/resources/views/admin/location-edit.phtml
index f6f150a360..a8ace98eda 100644
--- a/resources/views/admin/location-edit.phtml
+++ b/resources/views/admin/location-edit.phtml
@@ -27,7 +27,7 @@ use Fisharebest\Webtrees\View;
 <h1><?= $title ?></h1>
 
 <div class="row wt-location-edit-wrapper wt-fullscreen-container">
-    <div id="wt-map" class="col-sm-9 wt-ajax-load wt-map" dir="ltr"></div>
+    <div id="wt-map" class="col-sm-9 wt-map" dir="ltr"></div>
 
     <div class="col-sm-3 wt-map-sidebar">
         <form method="post" action="<?= e(route(MapDataSave::class)) ?>">
diff --git a/resources/views/admin/upgrade/steps.phtml b/resources/views/admin/upgrade/steps.phtml
index cba5aa6811..d442d4b247 100644
--- a/resources/views/admin/upgrade/steps.phtml
+++ b/resources/views/admin/upgrade/steps.phtml
@@ -24,7 +24,7 @@ use Fisharebest\Webtrees\View;
 <dl>
     <?php foreach ($steps as $url => $text) : ?>
     <dt><?= $text ?></dt>
-    <dd class="wt-ajax-load" data-url="<?= e($url) ?>"></dd>
+    <dd data-url="<?= e($url) ?>"></dd>
     <?php endforeach ?>
 </dl>
 
@@ -32,10 +32,10 @@ use Fisharebest\Webtrees\View;
 <script>
   function nextAjaxStep() {
     $("dd:empty:first").each(function(n, el) {
+      el.innerHTML=<?= json_encode(view('icons/spinner')) ?>;
       $(el).load(el.dataset.url, {}, function (responseText, textStatus, req) {
         el.innerHTML = responseText;
         if (textStatus === "error") {
-          $(".wt-ajax-load").removeClass("wt-ajax-load");
         } else {
           nextAjaxStep();
         }
diff --git a/resources/views/branches-page.phtml b/resources/views/branches-page.phtml
index 7cb8d9d08b..213d36c39f 100644
--- a/resources/views/branches-page.phtml
+++ b/resources/views/branches-page.phtml
@@ -57,5 +57,7 @@ use Fisharebest\Webtrees\Tree;
 </form>
 
 <?php if ($ajax_url !== '') : ?>
-    <div class="wt-ajax-load wt-page-content wt-chart wt-branches" data-wt-ajax-url="<?= e($ajax_url) ?>"></div>
+    <div class="wt-page-content wt-chart wt-branches" data-wt-ajax-url="<?= e($ajax_url) ?>">
+        <?= view('icons/spinner') ?>
+    </div>
 <?php endif ?>
diff --git a/resources/views/calendar-page.phtml b/resources/views/calendar-page.phtml
index 87f359706e..52f6f65eca 100644
--- a/resources/views/calendar-page.phtml
+++ b/resources/views/calendar-page.phtml
@@ -246,6 +246,8 @@ use Fisharebest\Webtrees\Tree;
     </tr>
 </table>
 
-<div class="wt-ajax-load wt-page-content" data-wt-ajax-url="<?= e(route(CalendarEvents::class, ['tree' => $tree->name(), 'cal' => $cal, 'day' => $cal_date->day(), 'month' => $cal_month, 'year' => $year, 'view' => $view, 'filterev' => $filterev, 'filterof' => $filterof, 'filtersx' => $filtersx])) ?>"></div>
+<div class="wt-page-content" data-wt-ajax-url="<?= e(route(CalendarEvents::class, ['tree' => $tree->name(), 'cal' => $cal, 'day' => $cal_date->day(), 'month' => $cal_month, 'year' => $year, 'view' => $view, 'filterev' => $filterev, 'filterof' => $filterof, 'filtersx' => $filtersx])) ?>">
+    <?= view('icons/spinner') ?>
+</div>
 
 <?= view('modals/ajax') ?>
diff --git a/resources/views/icons/spinner.phtml b/resources/views/icons/spinner.phtml
new file mode 100644
index 0000000000..125a3d3e91
--- /dev/null
+++ b/resources/views/icons/spinner.phtml
@@ -0,0 +1 @@
+<span class="wt-icon-spinner"><i class="fa-solid fa-spinner fa-spin fa-3x" aria-hidden="true"></i></span><?php
diff --git a/resources/views/individual-page-tabs.phtml b/resources/views/individual-page-tabs.phtml
index 5e74e7fbe1..bf6f457fef 100644
--- a/resources/views/individual-page-tabs.phtml
+++ b/resources/views/individual-page-tabs.phtml
@@ -26,7 +26,7 @@ use Illuminate\Support\Collection;
 
     <div class="tab-content">
         <?php foreach ($tabs as $tab) : ?>
-            <div id="<?= $tab->name() ?>" class="tab-pane mt-2 fade wt-ajax-load" role="tabpanel"><?php if (!$tab->canLoadAjax()) : ?><?= $tab->getTabContent($record) ?><?php endif ?></div>
+            <div id="<?= $tab->name() ?>" class="tab-pane mt-2 fade" role="tabpanel"><?php if (!$tab->canLoadAjax()) : ?><?= $tab->getTabContent($record) ?><?php endif ?></div>
         <?php endforeach ?>
     </div>
 </div>
diff --git a/resources/views/modules/ancestors-chart/page.phtml b/resources/views/modules/ancestors-chart/page.phtml
index 95e6dafe48..383e10d2a7 100644
--- a/resources/views/modules/ancestors-chart/page.phtml
+++ b/resources/views/modules/ancestors-chart/page.phtml
@@ -62,4 +62,6 @@ use Fisharebest\Webtrees\Tree;
     <?= csrf_field() ?>
 </form>
 
-<div class="wt-ajax-load wt-page-content wt-chart wt-chart-ancestors" data-wt-ajax-url="<?= e($ajax_url) ?>"></div>
+<div class="wt-page-content wt-chart wt-chart-ancestors" data-wt-ajax-url="<?= e($ajax_url) ?>">
+    <?= view('icons/spinner') ?>
+</div>
diff --git a/resources/views/modules/charts/chart.phtml b/resources/views/modules/charts/chart.phtml
index a11a2dff21..5980c17490 100644
--- a/resources/views/modules/charts/chart.phtml
+++ b/resources/views/modules/charts/chart.phtml
@@ -3,13 +3,11 @@
 declare(strict_types=1);
 
 /**
- * @var int $block_id
+ * @var int    $block_id
  * @var string $chart_url
  */
 
 ?>
-<div id="chart-block-<?= e($block_id) ?>"></div>
-
-<script>
-    $(<?= json_encode('#chart-block-' . $block_id, JSON_THROW_ON_ERROR) ?>).load(<?= json_encode($chart_url, JSON_THROW_ON_ERROR) ?>);
-</script>
+<div id="chart-block-<?= e($block_id) ?>" data-wt-ajax-url="<?= e($chart_url) ?>">
+    <?= view('icons/spinner') ?>
+</div>
diff --git a/resources/views/modules/compact-chart/page.phtml b/resources/views/modules/compact-chart/page.phtml
index a4860c656f..a414217c42 100644
--- a/resources/views/modules/compact-chart/page.phtml
+++ b/resources/views/modules/compact-chart/page.phtml
@@ -39,4 +39,6 @@ use Fisharebest\Webtrees\Tree;
     <?= csrf_field() ?>
 </form>
 
-<div class="wt-ajax-load wt-page-content wt-chart wt-chart-compact" data-wt-ajax-url="<?= e($ajax_url) ?>"></div>
+<div class="wt-page-content wt-chart wt-chart-compact" data-wt-ajax-url="<?= e($ajax_url) ?>">
+    <?= view('icons/spinner') ?>
+</div>
diff --git a/resources/views/modules/descendancy_chart/page.phtml b/resources/views/modules/descendancy_chart/page.phtml
index 65da388f5e..b092dc5da6 100644
--- a/resources/views/modules/descendancy_chart/page.phtml
+++ b/resources/views/modules/descendancy_chart/page.phtml
@@ -62,4 +62,6 @@ use Fisharebest\Webtrees\Tree;
     <?= csrf_field() ?>
 </form>
 
-<div class="wt-ajax-load wt-page-content wt-chart wt-chart-descendants" data-wt-ajax-url="<?= e($ajax_url) ?>"></div>
+<div class="wt-page-content wt-chart wt-chart-descendants" data-wt-ajax-url="<?= e($ajax_url) ?>">
+    <?= view('icons/spinner') ?>
+</div>
diff --git a/resources/views/modules/family-book-chart/page.phtml b/resources/views/modules/family-book-chart/page.phtml
index 472e9c52c0..44c47cc7e9 100644
--- a/resources/views/modules/family-book-chart/page.phtml
+++ b/resources/views/modules/family-book-chart/page.phtml
@@ -73,4 +73,6 @@ use Fisharebest\Webtrees\Tree;
     <?= csrf_field() ?>
 </form>
 
-<div class="wt-ajax-load wt-page-content wt-chart wt-chart-family-book" data-wt-ajax-url="<?= e($ajax_url) ?>"></div>
+<div class="wt-page-content wt-chart wt-chart-family-book" data-wt-ajax-url="<?= e($ajax_url) ?>">
+    <?= view('icons/spinner') ?>
+</div>
diff --git a/resources/views/modules/fanchart/page.phtml b/resources/views/modules/fanchart/page.phtml
index 1d0148a0ab..1bf1e587dc 100644
--- a/resources/views/modules/fanchart/page.phtml
+++ b/resources/views/modules/fanchart/page.phtml
@@ -77,4 +77,6 @@ use Fisharebest\Webtrees\Tree;
     <?= csrf_field() ?>
 </form>
 
-<div class="wt-ajax-load wt-page-content wt-chart wt-chart-fan" data-wt-ajax-url="<?= e($ajax_url) ?>"></div>
+<div class="wt-page-content wt-chart wt-chart-fan" data-wt-ajax-url="<?= e($ajax_url) ?>">
+    <?= view('icons/spinner') ?>
+</div>
diff --git a/resources/views/modules/hourglass-chart/page.phtml b/resources/views/modules/hourglass-chart/page.phtml
index c54217ae07..1b4ca76680 100644
--- a/resources/views/modules/hourglass-chart/page.phtml
+++ b/resources/views/modules/hourglass-chart/page.phtml
@@ -61,4 +61,6 @@ use Fisharebest\Webtrees\Tree;
     <?= csrf_field() ?>
 </form>
 
-<div class="wt-ajax-load wt-page-content wt-chart wt-chart-hourglass" data-wt-ajax-url="<?= e($ajax_url) ?>"></div>
+<div class="wt-page-content wt-chart wt-chart-hourglass" data-wt-ajax-url="<?= e($ajax_url) ?>">
+    <?= view('icons/spinner') ?>
+</div>
diff --git a/resources/views/modules/lifespans-chart/page.phtml b/resources/views/modules/lifespans-chart/page.phtml
index c298f1aa75..1b770689fd 100644
--- a/resources/views/modules/lifespans-chart/page.phtml
+++ b/resources/views/modules/lifespans-chart/page.phtml
@@ -84,4 +84,6 @@ use Fisharebest\Webtrees\Tree;
     <?= csrf_field() ?>
 </form>
 
-<div class="wt-ajax-load wt-page-content wt-chart wt-timeline-chart" data-wt-ajax-url="<?= e($ajax_url) ?>"></div>
+<div class="wt-page-content wt-chart wt-timeline-chart" data-wt-ajax-url="<?= e($ajax_url) ?>">
+    <?= view('icons/spinner') ?>
+</div>
diff --git a/resources/views/modules/pedigree-chart/page.phtml b/resources/views/modules/pedigree-chart/page.phtml
index cf63ef800e..6d1823ddaa 100644
--- a/resources/views/modules/pedigree-chart/page.phtml
+++ b/resources/views/modules/pedigree-chart/page.phtml
@@ -63,4 +63,6 @@ use Fisharebest\Webtrees\Tree;
     <?= csrf_field() ?>
 </form>
 
-<div class="wt-ajax-load wt-page-content wt-chart wt-chart-pedigree" data-wt-ajax-url="<?= e($ajax_url) ?>"></div>
+<div class="wt-page-content wt-chart wt-chart-pedigree" data-wt-ajax-url="<?= e($ajax_url) ?>">
+    <?= view('icons/spinner') ?>
+</div>
diff --git a/resources/views/modules/pedigree-map/chart.phtml b/resources/views/modules/pedigree-map/chart.phtml
index 9ca82ed780..a79623b2eb 100644
--- a/resources/views/modules/pedigree-map/chart.phtml
+++ b/resources/views/modules/pedigree-map/chart.phtml
@@ -12,7 +12,7 @@ use Fisharebest\Webtrees\View;
 ?>
 
 <div class="row my-4 gchart wt-pedigree-map-wrapper wt-fullscreen-container">
-    <div id="wt-map" class="col-sm-9 wt-ajax-load wt-map" dir="ltr"></div>
+    <div id="wt-map" class="col-sm-9 wt-map" dir="ltr"></div>
     <ul class="col-sm-3 wt-map-sidebar wt-page-options-value list-unstyled px-1 mb-0"></ul>
 </div>
 
diff --git a/resources/views/modules/pedigree-map/page.phtml b/resources/views/modules/pedigree-map/page.phtml
index c5dea7cd73..fe4db97a8d 100644
--- a/resources/views/modules/pedigree-map/page.phtml
+++ b/resources/views/modules/pedigree-map/page.phtml
@@ -52,6 +52,6 @@ use Fisharebest\Webtrees\Tree;
 </form>
 
 
-<div class="wt-ajax-load wt-page-content">
+<div class="wt-page-content">
     <?= $map ?>
 </div>
diff --git a/resources/views/modules/place-hierarchy/map.phtml b/resources/views/modules/place-hierarchy/map.phtml
index c97538954a..41bd503162 100644
--- a/resources/views/modules/place-hierarchy/map.phtml
+++ b/resources/views/modules/place-hierarchy/map.phtml
@@ -12,7 +12,7 @@ use Fisharebest\Webtrees\View;
 ?>
 
 <div class="row gchart wt-place-hierarchy-wrapper wt-fullscreen-container">
-    <div id="wt-map" class="col-sm-9 wt-ajax-load wt-map" dir="ltr"></div>
+    <div id="wt-map" class="col-sm-9 wt-map" dir="ltr"><?= view('icons/spinner') ?></div>
     <ul class="col-sm-3 wt-map-sidebar wt-page-options-value list-unstyled px-md-1 mb-0"></ul>
 </div>
 
diff --git a/resources/views/modules/places/tab.phtml b/resources/views/modules/places/tab.phtml
index b73666f6b4..eab2e7753c 100644
--- a/resources/views/modules/places/tab.phtml
+++ b/resources/views/modules/places/tab.phtml
@@ -13,7 +13,7 @@ use Fisharebest\Webtrees\I18N;
 
 <div class="row gx-1 wt-places-tab-wrapper wt-fullscreen-container">
     <div class="col-sm-9">
-        <div id="wt-map" class="wt-ajax-load wt-map" dir="ltr"></div>
+        <div id="wt-map" class="wt-map" dir="ltr"><?= view('icons/spinner') ?></div>
     </div>
     <div class="col-sm-3">
         <ul class="wt-map-sidebar list-unstyled mb-0"></ul>
diff --git a/resources/views/modules/relationships-chart/page.phtml b/resources/views/modules/relationships-chart/page.phtml
index ccb87f664a..f9ba93ae82 100644
--- a/resources/views/modules/relationships-chart/page.phtml
+++ b/resources/views/modules/relationships-chart/page.phtml
@@ -90,7 +90,9 @@ use Fisharebest\Webtrees\View;
 </form>
 
 <?php if ($individual1 !== null && $individual2 !== null) : ?>
-    <div class="wt-ajax-load wt-page-content wt-chart wt-chart-relationships" data-wt-ajax-url="<?= e($ajax_url) ?>"></div>
+    <div class="wt-page-content wt-chart wt-chart-relationships" data-wt-ajax-url="<?= e($ajax_url) ?>">
+        <?= view('icons/spinner') ?>
+    </div>
 <?php endif ?>
 
 <?php View::push('javascript') ?>
diff --git a/resources/views/modules/statistics-chart/custom.phtml b/resources/views/modules/statistics-chart/custom.phtml
index 381e3111e8..993604a9f8 100644
--- a/resources/views/modules/statistics-chart/custom.phtml
+++ b/resources/views/modules/statistics-chart/custom.phtml
@@ -212,9 +212,7 @@ use Fisharebest\Webtrees\View;
         <?= csrf_field() ?>
     </form>
 
-    <div id="custom-chart" class="wt-ajax-load">
-        <!-- Not initially empty, to disable spinner -->
-    </div>
+    <div id="custom-chart"></div>
 </div>
 
 <?php View::push('javascript') ?>
@@ -282,7 +280,7 @@ use Fisharebest\Webtrees\View;
     }
 
     function loadCustomChart() {
-        $("#custom-chart").html("");
+        $("#custom-chart").html(<?= json_encode(view('icons/spinner')) ?>);
         var form = $("#own-stats-form");
         jQuery.post(form.attr("action"), form.serialize())
             .done(function (data) {
diff --git a/resources/views/modules/statistics-chart/page.phtml b/resources/views/modules/statistics-chart/page.phtml
index 864ae2bb4f..c62c398c17 100644
--- a/resources/views/modules/statistics-chart/page.phtml
+++ b/resources/views/modules/statistics-chart/page.phtml
@@ -28,7 +28,9 @@ use Fisharebest\Webtrees\View;
 
     <div class="tab-content">
         <?php foreach ($tabs as $url) : ?>
-            <div class="tab-pane fade wt-ajax-load" role="tabpanel" id="tab-<?= e(md5($url)) ?>"></div>
+            <div class="tab-pane fade" role="tabpanel" id="tab-<?= e(md5($url)) ?>">
+                <?= view('icons/spinner') ?>
+            </div>
         <?php endforeach ?>
     </div>
 </div>
@@ -39,7 +41,10 @@ use Fisharebest\Webtrees\View;
 
   // Bootstrap tabs - load content dynamically using AJAX
   $('a[data-bs-toggle="tab"][data-wt-href]').on('show.bs.tab', function () {
-    $(this.getAttribute('href') + ':empty').load(this.dataset.wtHref);
+    if (this.dataset.wtHref !== '') {
+      $(this.getAttribute('href')).load(this.dataset.wtHref);
+      this.dataset.wtHref = '';
+    }
   });
 
   // If the URL contains a fragment, then activate the corresponding tab.
diff --git a/resources/views/modules/timeline-chart/page.phtml b/resources/views/modules/timeline-chart/page.phtml
index 6b10421bbf..5e644c2825 100644
--- a/resources/views/modules/timeline-chart/page.phtml
+++ b/resources/views/modules/timeline-chart/page.phtml
@@ -87,4 +87,6 @@ use Illuminate\Support\Collection;
     <?php endforeach ?>
 </div>
 
-<div class="wt-ajax-load wt-page-content wt-chart wt-timeline-chart" data-wt-ajax-url="<?= e($ajax_url) ?>"></div>
+<div class="wt-page-content wt-chart wt-timeline-chart" data-wt-ajax-url="<?= e($ajax_url) ?>">
+    <?= view('icons/spinner') ?>
+</div>
diff --git a/resources/views/tree-page-block.phtml b/resources/views/tree-page-block.phtml
index 45e57233c9..b10374802d 100644
--- a/resources/views/tree-page-block.phtml
+++ b/resources/views/tree-page-block.phtml
@@ -15,7 +15,9 @@ use Fisharebest\Webtrees\Tree;
 ?>
 
 <?php if ($block->loadAjax()) : ?>
-    <div class="wt-ajax-load" data-wt-ajax-url="<?= e(route(TreePageBlock::class, ['tree' => $tree->name(), 'block_id' => $block_id])) ?>"></div>
+    <div data-wt-ajax-url="<?= e(route(TreePageBlock::class, ['tree' => $tree->name(), 'block_id' => $block_id])) ?>">
+        <?= view('icons/spinner') ?>
+    </div>
 <?php else : ?>
     <?= $block->getBlock($tree, $block_id, ModuleBlockInterface::CONTEXT_TREE_PAGE) ?>
 <?php endif ?>
diff --git a/resources/views/user-page-block.phtml b/resources/views/user-page-block.phtml
index ea7396aebc..d42080ef55 100644
--- a/resources/views/user-page-block.phtml
+++ b/resources/views/user-page-block.phtml
@@ -15,7 +15,9 @@ use Fisharebest\Webtrees\Tree;
 ?>
 
 <?php if ($block->loadAjax()) : ?>
-    <div class="wt-ajax-load" data-wt-ajax-url="<?= e(route(UserPageBlock::class, ['tree' => $tree->name(), 'block_id' => $block_id])) ?>"></div>
+    <div data-wt-ajax-url="<?= e(route(UserPageBlock::class, ['tree' => $tree->name(), 'block_id' => $block_id])) ?>">
+        <?= view('icons/spinner') ?>
+    </div>
 <?php else : ?>
     <?= $block->getBlock($tree, $block_id, ModuleBlockInterface::CONTEXT_USER_PAGE) ?>
 <?php endif ?>