From dd29f8705cf35faa9dfb6d5a5e5c6aa093b6c9cf Mon Sep 17 00:00:00 2001
From: Calixte Denizet <calixte.denizet@gmail.com>
Date: Tue, 27 Dec 2022 14:01:27 +0100
Subject: [PATCH] Delay the loading icon display

In most of the cases, showing the loading icon is useless because
it's for a very short time, consequently it doesn't bring any useful
information for the user.
After a delay (400ms), the icon is shown in order to inform the user
that the viewer isn't stuck but it's doing something.
---
 web/pdf_viewer.css | 9 ++++++++-
 web/viewer.css     | 7 +++++++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/web/pdf_viewer.css b/web/pdf_viewer.css
index d0a86bda7..847ae766d 100644
--- a/web/pdf_viewer.css
+++ b/web/pdf_viewer.css
@@ -25,6 +25,7 @@
   --page-border-image: url(images/shadow.png) 9 9 repeat;
   --spreadHorizontalWrapped-margin-LR: -3.5px;
   --scale-factor: 1;
+  --loading-icon-delay: 400ms;
 }
 
 @media screen and (forced-colors: active) {
@@ -157,10 +158,16 @@
   right: 0;
   bottom: 0;
   background: url("images/loading-icon.gif") center no-repeat;
+  visibility: visible;
+  /* Using a delay with background-image doesn't work,
+     consequently we use the visibility. */
+  transition-property: visibility;
+  transition-delay: var(--loading-icon-delay);
   z-index: 5;
 }
 .pdfViewer .page .loadingIcon.notVisible {
-  background: none;
+  transition-property: none;
+  visibility: hidden;
 }
 
 .pdfViewer.enablePermissions .textLayer span {
diff --git a/web/viewer.css b/web/viewer.css
index 23608f5bd..fa01dfc5d 100644
--- a/web/viewer.css
+++ b/web/viewer.css
@@ -1104,11 +1104,18 @@ a.secondaryToolbarButton[href="#"] {
   -moz-appearance: textfield; /* hides the spinner in moz */
   text-align: right;
   width: 40px;
+  background-size: 0 0;
+  transition-property: none;
 }
 #pageNumber.visiblePageIsLoading {
   background-image: var(--loading-icon);
   background-repeat: no-repeat;
   background-position: 3px;
+  background-size: 16px 16px;
+  /* Using a delay with background-image doesn't work,
+     consequently we use background-size. */
+  transition-property: background-size;
+  transition-delay: var(--loading-icon-delay);
 }
 /*#if !MOZCENTRAL*/
 #pageNumber::-webkit-inner-spin-button {