From 1bd4f53e9015f9dc764d51618acbaaec8ad275ff Mon Sep 17 00:00:00 2001
From: Marcel de Rooy <m.de.rooy@rijksmuseum.nl>
Date: Fri, 21 Apr 2023 08:58:50 +0000
Subject: [PATCH] Bug 32642: (QA follow-up) Activate spinner early

See comment on former patch too. We need to activate the spinner
early and we can simplify the code to remove it.

Note: unfortunately this is kind of a workaround, since using
load would be nicer but currently hard to implement since the cover
image code is scattered/widespread.

This code still checks the complete attribute, we could argue that
it should just remove the spinner. Note too that the spinner belongs
to a div where multiple img may be part of. If we do not remove the
spinner now, something went wrong at load time, but if you can
actually see the spinner is another thing.

Test plan:
See former patch.
Check few cover images on detail page, enable various providers.
Bonus: I tested with a sleep statement in opac-image.pl.

Signed-off-by: Marcel de Rooy <m.de.rooy@rijksmuseum.nl>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
---
 .../bootstrap/en/modules/opac-detail.tt       | 20 +++++++++----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-detail.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-detail.tt
index 1f9eb3f2fa..6e62fe5f97 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-detail.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-detail.tt
@@ -59,7 +59,7 @@
 
                     <div class="bookcover">
 
-                        <div id="biblio-cover-slider" class="cover-slider">
+                        <div id="biblio-cover-slider" class="cover-slider cover-slides"><!-- cover-slides shows spinner -->
                             [% IF ( OPACLocalCoverImages ) %]
                                 [% IF localimages.count %]
                                     [% FOREACH image IN localimages %]
@@ -1222,7 +1222,7 @@
                 [% IF Koha.Preference('OPACLocalCoverImages') && ( tab == 'holdings' && itemloop_has_images || tab == 'otherholdings' && otheritemloop_has_images ) %]
                     <td class="cover">
                         <div class="bookcover">
-                            <div class="cover-slider">
+                            <div class="cover-slider cover-slides">
                                 [% FOR image IN ITEM_RESULT.cover_images %]
                                     <div class="cover-image local-coverimg">
                                         <a href="/cgi-bin/koha/opac-image.pl?itemnumber=[% image.itemnumber | uri %]&amp;imagenumber=[% image.imagenumber | uri %]" title="Local cover image">
@@ -1606,16 +1606,14 @@
                 if( $(coverSlide).find(".cover-image:visible").length < 1 ){
                     $(coverSlide).remove();
                 } else {
-                    $(coverSlide).addClass("cover-slides");
-                    $(coverSlide).find("img").one("load", function(index) {
-                        if(this.complete && this.naturalHeight !== 0){
-                            $(coverSlide).css({"background-image":"none"});
-                        }
-                    }).each(function() {
-                        if(this.complete) {
-                            $(this).trigger('load');
-                        }
+                    // This is a suboptimal workaround; we should do this via load, but
+                    // the image code is scattered all over now. We come here now after
+                    // window load and wait_for_images (so load completed).
+                    var check_complete = 1;
+                    $(coverSlide).find("img").each( function() {
+                        if( !this.complete || this.naturalHeight == 0 ) check_complete = 0;
                     });
+                    if( check_complete ) $(coverSlide).removeClass('cover-slides');
                 }
             });
 
-- 
2.39.5