Merge pull request #1567 from ArthurHoaro/feature/async-title-retrieval

diff --combined assets/default/js/base.js
index aadffc13b7487b7ce78ccdca3b4fe94d2ec68b6a,3168881514595071111672d52959baa1976713aa..7f6b9637256787741e8a2bb63e306a4f6a697a8d
--- 1/assets/default/js/base.js
--- 2/assets/default/js/base.js
+++ b/assets/default/js/base.js
@@@ -1,4 -1,5 +1,5 @@@
  import Awesomplete from 'awesomplete';
+ import he from 'he';
  
  /**
   * Find a parent element according to its tag and its attributes
@@@ -95,15 -96,6 +96,6 @@@ function updateAwesompleteList(selector
    return instances;
  }
  
- /**
-  * html_entities in JS
-  *
-  * @see http://stackoverflow.com/questions/18749591/encode-html-entities-in-javascript
-  */
- function htmlEntities(str) {
-   return str.replace(/[\u00A0-\u9999<>&]/gim, (i) => `&#${i.charCodeAt(0)};`);
- }
- 
  /**
   * Add the class 'hidden' to city options not attached to the current selected continent.
   *
@@@ -302,7 -294,7 +294,7 @@@ function init(description) 
    const deleteLinks = document.querySelectorAll('.confirm-delete');
    [...deleteLinks].forEach((deleteLink) => {
      deleteLink.addEventListener('click', (event) => {
 -      if (!confirm(document.getElementById('translation-delete-link').innerHTML)) {
 +      if (!confirm(document.getElementById('translation-delete-tag').innerHTML)) {
          event.preventDefault();
        }
      });
@@@ -569,7 -561,7 +561,7 @@@
            input.setAttribute('name', totag);
            input.setAttribute('value', totag);
            findParent(input, 'div', { class: 'rename-tag-form' }).style.display = 'none';
-           block.querySelector('a.tag-link').innerHTML = htmlEntities(totag);
+           block.querySelector('a.tag-link').innerHTML = he.encode(totag);
            block
              .querySelector('a.tag-link')
              .setAttribute('href', `${basePath}/?searchtags=${encodeURIComponent(totag)}`);

diff --combined assets/default/scss/shaarli.scss
index 2f49bbd21d50690d0e070553b6b3b9e131d5e74c,df9c867bb6b3bba0065af25c29e03271934ee5a6..286ac83b32b487a3d51837b54dd81b1282d6d76f
--- 1/assets/default/scss/shaarli.scss
--- 2/assets/default/scss/shaarli.scss
+++ b/assets/default/scss/shaarli.scss
@@@ -671,10 -671,6 +671,10 @@@ body
        content: '';
      }
    }
 +
 +  .search-highlight {
 +    background-color: yellow;
 +  }
  }
  
  .linklist-item-buttons {
@@@ -1273,6 -1269,57 +1273,57 @@@ form 
    }
  }
  
+ .loading-input {
+   position: relative;
+ 
+   @keyframes around {
+     0% {
+       transform: rotate(0deg);
+     }
+ 
+     100% {
+       transform: rotate(360deg);
+     }
+   }
+ 
+   .icon-container {
+     position: absolute;
+     right: 60px;
+     top: calc(50% - 10px);
+   }
+ 
+   .loader {
+     position: relative;
+     height: 20px;
+     width: 20px;
+     display: inline-block;
+     animation: around 5.4s infinite;
+ 
+     &::after,
+     &::before {
+       content: "";
+       background: $form-input-background;
+       position: absolute;
+       display: inline-block;
+       width: 100%;
+       height: 100%;
+       border-width: 2px;
+       border-color: #333 #333 transparent transparent;
+       border-style: solid;
+       border-radius: 20px;
+       box-sizing: border-box;
+       top: 0;
+       left: 0;
+       animation: around 0.7s ease-in-out infinite;
+     }
+ 
+     &::after {
+       animation: around 0.7s ease-in-out 0.1s infinite;
+       background: transparent;
+     }
+   }
+ }
+ 
  // LOGIN
  .login-form-container {
    .remember-me {