add a load icon during the remote library's update's request

add a div with the loading's animation. When the contentManager sends the
remote library's update's request, it emits a "true" displayLoadIcon signal
that remove the class "do-not-display" and it emits a "false" displayLoadIcon
signal when it has to display the local library.

resources/texts/_contentManager.html

@@ -53,6 +53,16 @@ function getDownloadInfo(id) {
   });
 }
 
+function displayLoadIcon(display) {
+    if (display) {
+        document.getElementById("load-icon").classList.remove("do-not-display")  
+        document.getElementById("bookList").classList.add("do-not-display");  
+    } else {
+        document.getElementById("load-icon").classList.add("do-not-display");
+        document.getElementById("bookList").classList.remove("do-not-display")      
+    }
+}
+
 function init() {
   new QWebChannel(qt.webChannelTransport, function(channel) {
     contentManager = channel.objects.contentManager;
@@ -103,7 +113,9 @@ function init() {
       }
     });
     contentManager.booksChanged.connect(onBooksChanged);
+    contentManager.pendingRequest.connect(displayLoadIcon);
     onBooksChanged();
+    displayLoadIcon(false);
   });
 }
 
@@ -284,6 +296,24 @@ details:hover {
 .menu-option:hover {
     background: rgba(0, 0, 0, 0.2);
 }
+.loader {
+  margin: 0 auto;
+  border: 16px solid #f3f3f3; /* Light grey */
+  border-top: 16px solid #3498db; /* Blue */
+  border-radius: 50%;
+  width: 120px;
+  height: 120px;
+  animation: spin 2s linear infinite;
+}
+
+.do-not-display {
+  display: none;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
 
 </style>
 </head>
@@ -303,6 +333,7 @@ details:hover {
       <span class="tablecell cell4">Content type</span>
       <span class="tablecell cell5"></span>
     </div>
+    <div id="load-icon" class="loader"></div>
     <div id="bookList" onscroll=scrolled(this)>
       <div id="menu" class="menu">
         <ul class="menu-options local-option">

src/contentmanager.cpp

@@ -236,10 +236,12 @@ void ContentManager::setCurrentCategoryFilter(QString category)
 
 void ContentManager::updateLibrary() {
     if (m_local) {
+        emit(pendingRequest(false));
         emit(booksChanged());
         return;
     }
     try {
+        emit(pendingRequest(true));
         m_remoteLibraryManager.doUpdate(m_currentLanguage, m_categoryFilter);
     } catch (runtime_error&) {}
 }
@@ -250,6 +252,7 @@ void ContentManager::updateRemoteLibrary(const QString& content) {
     kiwix::Manager manager(&m_remoteLibrary);
     manager.readOpds(content.toStdString(), CATALOG_URL);
     emit(this->booksChanged());
+    emit(this->pendingRequest(false));
 }
 
 void ContentManager::setSearch(const QString &search)

src/contentmanager.h

@@ -45,6 +45,7 @@ signals:
     void booksChanged();
     void downloadsChanged();
     void currentLangChanged();
+    void pendingRequest(const bool);
 
 public slots:
     QStringList getBookInfos(QString id, const QStringList &keys);