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.
This commit is contained in:
Calixte Denizet 2022-12-27 14:01:27 +01:00
parent e36564668b
commit dd29f8705c
2 changed files with 15 additions and 1 deletions

View File

@ -25,6 +25,7 @@
--page-border-image: url(images/shadow.png) 9 9 repeat; --page-border-image: url(images/shadow.png) 9 9 repeat;
--spreadHorizontalWrapped-margin-LR: -3.5px; --spreadHorizontalWrapped-margin-LR: -3.5px;
--scale-factor: 1; --scale-factor: 1;
--loading-icon-delay: 400ms;
} }
@media screen and (forced-colors: active) { @media screen and (forced-colors: active) {
@ -157,10 +158,16 @@
right: 0; right: 0;
bottom: 0; bottom: 0;
background: url("images/loading-icon.gif") center no-repeat; 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; z-index: 5;
} }
.pdfViewer .page .loadingIcon.notVisible { .pdfViewer .page .loadingIcon.notVisible {
background: none; transition-property: none;
visibility: hidden;
} }
.pdfViewer.enablePermissions .textLayer span { .pdfViewer.enablePermissions .textLayer span {

View File

@ -1104,11 +1104,18 @@ a.secondaryToolbarButton[href="#"] {
-moz-appearance: textfield; /* hides the spinner in moz */ -moz-appearance: textfield; /* hides the spinner in moz */
text-align: right; text-align: right;
width: 40px; width: 40px;
background-size: 0 0;
transition-property: none;
} }
#pageNumber.visiblePageIsLoading { #pageNumber.visiblePageIsLoading {
background-image: var(--loading-icon); background-image: var(--loading-icon);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 3px; 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*/ /*#if !MOZCENTRAL*/
#pageNumber::-webkit-inner-spin-button { #pageNumber::-webkit-inner-spin-button {