Individual page tabs - "loading" image not hidden after page load

[kiwi3685]

Re forum topics: INDI page load, and it's associated topic INDI page load (moved from Help with 2.1).

A more accurate title, in hindsight, would have been as I have used for this issue.

After considerable help from @ric2015, access to @mac.alter's site, and the creation of a simplified test installation, we have been able to identify the real problem described on the forum.

After elimination of as many variables as possible (different tabs, standard and custom code, browsers, operating systems etc, various facts became clear.

1. the issue is not related specifically to any custom module
2. it also occurs on standard individual page tabs
3. it is only reproducible on MacOS using Safari browser, or any browser on other Mac devices (phone / tablet) using an iOS compatible engine.
4. the original image of the issue posted by @mac-alter showed it whilst using a custom module (Rural theme), which handles the page loading image hide/show slightly differently from standard themes.
5. the problem occurs only on tabs that use ajax loading.
6. no error messages are present, in webtrees log, server logs, or dev tools

A search on Google found this report that identifies basically the same issue: https://github.com/twbs/bootstrap/issues/35361

So it is a Bootstrap issue. It relates to the use of the "fade" class on tabs. As described at the above link it can be best described as "If the fade animation is longer than the time between show/hide, the hide action will fail"

The simplest solution, in my view, is just to remove the "fade" class from all individual tabs, or at least those that utilise ajax loading.

[fisharebest]

Can't reproduce on my local machine - but I can see it on another site.

We currently have the classes fade and wt-ajax-load (which creates the spinner) on the same <div>.

Wonder if it would help to have nested <div> elements with these classes on separate ones.

[kiwi3685]

I can't get the nested div elements idea to work. I think thats because wt-ajax-load is dependant on the :empty css attribute, and fade is bootstrap javascript connected to the tab-pane class. They are therefore both dependant on the "target" element

However, to peserve the function of the "spinner", a work-around is to remove the "fade" class at the end of the javascript in individual-page-tabs.phtml, like this:

  // Bootstrap tabs - load content dynamically using AJAX
  $('a[data-bs-toggle="tab"][data-wt-href]').on('show.bs.tab', function () {
    let target = $(this.hash + ':empty');
    if (target.length > 0) {
      // Start the download immediately...
      let download = webtrees.httpGet(this.dataset.wtHref);

      // ...but don't insert it until the tab is ready.
      $(this).one('shown.bs.tab', () => {
        download
          .then(data => data.text())
          .then(data => target.html(data))
          .then(data => target.removeClass('fade'));
      });
    }
  });

[fisharebest]

The spacing between the tabs and the tab-content is provided by each of the tab panels (using py-4).

This means that empty tabs do not have the padding - but do have the spinner. Hence they are visible behind the active tab.

This design requires that all tabs specify the same padding.

A simpler option is to add the spacing to the tab-content container using a margin (mt-4).

Now, the spinner from the inactive tabs is behind the active tab, and not visible.

This allows us to use the fade class - which is visually pleasing. It also puts the stying for the spacing in one place instead of several.

(The py-4 also appears to be creating an issue in #4996)

The only downside is that it would require third-party tabs to remove py-4 from their own templates.

[photon-flip]

Great, that's fixed #4996 as well. Just one small problem - you have removed the class .wt-page-options-value from the ul. Most themes use this for the background color of the sidebar. This is most evident in fullscreen mode. See screen shot of webtrees theme: