From 5f86328708a8641cd10597284117d11cfadfebca Mon Sep 17 00:00:00 2001
From: Lucas Gass <lucas@bywatersolutions.com>
Date: Fri, 1 Apr 2022 16:11:35 +0000
Subject: [PATCH] Bug 30437: Add SVG loader to pendingreserves.pl

To test:
1. Try to have a bunch of holds in your test system so pendingreserves.pl takes several seconds to load
2. Apply patch
3. Regenerate the staff CSS: https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_interface
4. Go to Home > Circulation
5. Click on "Holds to Pull"
6. As the page is loading you should notice some 'Loading page...' text with a spinning SVG loader.
7. Nothing else should change with the functionality of the "Holds to Pull" report

This uses a very nice free to use SVG loader from Sam Herbert. https://samherbert.net/svg-loaders/
Credit and link are included in the SVG file

Signed-off-by: David Nind <david@davidnind.com>
---
 .../prog/css/src/staff-global.scss              | 13 +++++++++++++
 .../prog/en/includes/svg-loader.inc             |  4 ++++
 .../prog/en/modules/circ/circulation-home.tt    |  4 ++--
 .../intranet-tmpl/prog/img/koha-svg-loader.svg  | 17 +++++++++++++++++
 koha-tmpl/intranet-tmpl/prog/js/staff-global.js |  3 +++
 5 files changed, 39 insertions(+), 2 deletions(-)
 create mode 100644 koha-tmpl/intranet-tmpl/prog/en/includes/svg-loader.inc
 create mode 100644 koha-tmpl/intranet-tmpl/prog/img/koha-svg-loader.svg

diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
index 49a5ce8767..a67b80ce34 100644
--- a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
+++ b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
@@ -4786,6 +4786,19 @@ div .suggestion_note {
     }
 }
 
+.koha-page-loader {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: none;
+    text-align: center;
+    width: 100%;
+    padding-top: 125px;
+    background-color: rgba(255, 255, 255, 0.7);
+}
+
 @media (max-width: 768px) {
     .navbar-nav {
         li {
diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/svg-loader.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/svg-loader.inc
new file mode 100644
index 0000000000..24112fed42
--- /dev/null
+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/svg-loader.inc
@@ -0,0 +1,4 @@
+<div class="koha-page-loader">
+        <h3>Loading page...</h3>
+        <img src="[% interface | html %]/[% theme | html %]/img/koha-svg-loader.svg" alt="loader">
+</div>
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/circ/circulation-home.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/circ/circulation-home.tt
index 6821d18f4b..18cbaee4f0 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/circ/circulation-home.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/circ/circulation-home.tt
@@ -78,7 +78,7 @@
                         <a class="circ-button" href="/cgi-bin/koha/circ/view_holdsqueue.pl"><i class="fa fa-tasks"></i> Holds queue</a>
                     </li>
                     <li>
-                        <a class="circ-button" href="/cgi-bin/koha/circ/pendingreserves.pl"><i class="fa fa-hand-grab-o"></i> Holds to pull</a>
+                        <a class="circ-button koha-svg-loader" href="/cgi-bin/koha/circ/pendingreserves.pl"><i class="fa fa-hand-grab-o"></i> Holds to pull</a>
                     </li>
                     <li>
                         <a class="circ-button" href="/cgi-bin/koha/circ/waitingreserves.pl"><i class="fa fa-calendar"></i> Holds awaiting pickup</a>
@@ -171,5 +171,5 @@
                     </div>
             </div>
         </div>
-
+[% INCLUDE 'svg-loader.inc' %]
 [% INCLUDE 'intranet-bottom.inc' %]
diff --git a/koha-tmpl/intranet-tmpl/prog/img/koha-svg-loader.svg b/koha-tmpl/intranet-tmpl/prog/img/koha-svg-loader.svg
new file mode 100644
index 0000000000..150d465bec
--- /dev/null
+++ b/koha-tmpl/intranet-tmpl/prog/img/koha-svg-loader.svg
@@ -0,0 +1,17 @@
+<!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
+<svg width="80" height="80" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" stroke="#cecece">
+    <g fill="none" fill-rule="evenodd">
+        <g transform="translate(1 1)" stroke-width="2">
+            <circle stroke-opacity=".5" cx="18" cy="18" r="18"/>
+            <path d="M36 18c0-9.94-8.06-18-18-18">
+                <animateTransform
+                    attributeName="transform"
+                    type="rotate"
+                    from="0 18 18"
+                    to="360 18 18"
+                    dur="1s"
+                    repeatCount="indefinite"/>
+            </path>
+        </g>
+    </g>
+</svg>
diff --git a/koha-tmpl/intranet-tmpl/prog/js/staff-global.js b/koha-tmpl/intranet-tmpl/prog/js/staff-global.js
index f2becd2a7f..3143dbad24 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/staff-global.js
+++ b/koha-tmpl/intranet-tmpl/prog/js/staff-global.js
@@ -172,6 +172,9 @@ $(document).ready(function() {
     $("#bookbag_form a[href*='detail.pl?']").click(function(){
         resetSearchContext();
     });
+    $('.koha-svg-loader').click( function() {
+        $('.koha-page-loader').show();
+    });
 
 });
 
-- 
2.30.2