From dd29f8705cf35faa9dfb6d5a5e5c6aa093b6c9cf Mon Sep 17 00:00:00 2001 From: Calixte Denizet 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 {