[pdf viewer] improved loading

- display a loading icon instead of a blue progress bar in the `#loadingBar`
- added loading icons for pdf pages

frontend/src/components/pdf-viewer.js

@@ -238,7 +238,8 @@ class PDFViewer extends React.Component {
                   </div>
                 </div>
                 <div id="loadingBar">
-                  <div className="progress">
+                  <span className="loading-icon loading-tip"></span>
+                  <div className="progress hidden">
                     <div className="glimmer">
                     </div>
                   </div>

frontend/src/css/pdf-file-view.css

@@ -38,14 +38,20 @@
 }
 
 .page {
-    position:relative;
-    background:#fff;
-    box-shadow:0 0 6px #ccc;
-    margin:0 auto 20px;
+  position: relative;
+  background: #fff;
+  box-shadow: 0 0 6px #ccc;
+  margin: 0 auto 20px;
+}
+
+.page .loading-icon {
+  position: absolute;
+  top: 50%;
+  left: 50%;
 }
 
 #fileInput {
-    display:none;
+  display: none;
 }
 
 /*
@@ -380,7 +386,9 @@
 /* loadingBar starts */
 #loadingBar {
   position: absolute;
-  height: 4px;
+  /*height: 4px;*/
+  height: 0; /* for seahub */
+
   background-color: #ededf0;
   border-bottom: 1px solid #ccc;
 
@@ -397,6 +405,11 @@ html[dir="rtl"] #loadingBar {
   left: 0;
   right: 0;
 }
+#loadingBar .loading-icon {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+}
 #loadingBar .progress {
   position: absolute;
   top: 0;

media/js/pdf/web/viewer.js

@@ -11650,7 +11650,7 @@ class PDFPageView {
     }
 
     this.loadingIconDiv = document.createElement("div");
-    this.loadingIconDiv.className = "loadingIcon";
+    this.loadingIconDiv.className = "loading-icon loading-tip";
     this.loadingIconDiv.setAttribute("role", "img");
     this.l10n.get("loading").then(msg => {
       this.loadingIconDiv?.setAttribute("aria-label", msg);