Some pages in Koha can take a long time to load in Koha. One that often can take some time is pendingreserves.pl If a library has a lot of holds this page can take a pretty long time to load and sometimes users don't realize that. It is easy to think the page is broken or not loading properly, causing users to continually click on the pendingreserves.pl link. Clicking over and over again can be problematic as i causes pendingreserves.pl to begin loading again and again. A SVG loader that gives a visual indication that the page is loading/working could help prevent users from clicking the link multiple times while the page is still loading. pendingreserves.pl is one example, so it might be nice to have an SVG loader that can be applied to any link within Koha that takes a long time to load.
Created attachment 132871 [details] [review] 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
Created attachment 136328 [details] [review] 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>
Testing notes (using koha-testing-docker): - Placed about 100 holds by searching for either a and cat, then selecting all and placing about 20 holds at a time for different patrons. - Rebuilding CSS is now a lot easier with KTD: yarn install then yarn build
We do something like this on only two other pages if I recall correctly: The basic and advanced MARC editor pages. Both of them show the loading image after the user has navigated to the page rather than on the page where the user clicked the link. It seems odd to me to use this new technique on only a single page. Is one approach better than the other?
(In reply to Owen Leonard from comment #4) > We do something like this on only two other pages if I recall correctly: The > basic and advanced MARC editor pages. Both of them show the loading image > after the user has navigated to the page rather than on the page where the > user clicked the link. > > It seems odd to me to use this new technique on only a single page. Is one > approach better than the other? I am sorry, I should have took some more time to look around for similar functionality already implemented. I will have a look at those pages. At this point I don't know what which method is better but we should only use a single method to do this.
(In reply to Lucas Gass from comment #5) > I should have took some more time to look around for similar > functionality already implemented I think it's absolutely worthwhile to look at these two options to have a fresh look at whether we could be doing things better. I'm curious whether there is a usability advantage to one or the other.