From d8d515a450f14a8a298ad19602fa9723291f5265 Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Tue, 31 Mar 2020 17:03:16 +0200
Subject: [PATCH] Add spinner while loading preview

---
 .../src/less2/include/modals-ui-elements.less          |  5 ++++-
 www/common/inner/common-mediatag.js                    | 10 ++++++++--
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/customize.dist/src/less2/include/modals-ui-elements.less b/customize.dist/src/less2/include/modals-ui-elements.less
index b8f7cb90f..4a26920ab 100644
--- a/customize.dist/src/less2/include/modals-ui-elements.less
+++ b/customize.dist/src/less2/include/modals-ui-elements.less
@@ -114,7 +114,6 @@
             align-items: center;
             justify-content: center;
             .cp-mediatag-container {
-                height: 100%;
                 width: 100%;
                 media-tag {
                     & > * {
@@ -132,6 +131,10 @@
                         color: @cryptpad_text_col;
                     }
                 }
+                .cp-spinner {
+                    border-color: @colortheme_logo-1;
+                    border-top-color: transparent;
+                }
             }
         }
     }
diff --git a/www/common/inner/common-mediatag.js b/www/common/inner/common-mediatag.js
index 6349893b6..cce892290 100644
--- a/www/common/inner/common-mediatag.js
+++ b/www/common/inner/common-mediatag.js
@@ -237,21 +237,27 @@ define([
         }).show().focus();
 
         var $container = $modal.find('.cp-modal').append(h('div.cp-mediatag-container', [
+            h('div.cp-loading-spinner-container', h('span.cp-spinner')),
             tag
         ]));
 
         var el;
         var checkSize = function () {
             if (!el) { return; }
-            $container.find('.cp-mediatag-container').css('height', '');
             var size = el.naturalHeight || el.videoHeight;
+            if (el.nodeName !== 'IMG' && el.nodeName !== 'VIDEO') {
+                $container.find('.cp-mediatag-container').css('height', '100%');
+            }
+            if (!size) { return; }
             // Center small images and videos
-            if (size && size < $container.height()) {
+            $container.find('.cp-mediatag-container').css('height', '100%');
+            if (size < $container.height()) {
                 $container.find('.cp-mediatag-container').css('height', 'auto');
             }
         };
         var observer = new MutationObserver(function(mutations) {
             mutations.forEach(function(mutation) {
+                $container.find('.cp-loading-spinner-container').remove();
                 if (mutation.addedNodes.length === 1) {
                     el = mutation.addedNodes[0];
                     if (el.readyState === 0) {