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:
parent
e36564668b
commit
dd29f8705c
@ -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 {
|
||||||
|
@ -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 {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user