From ee808dc6827fdbecd114181cd11491f324f80904 Mon Sep 17 00:00:00 2001
From: Joe <johani@discourse.org>
Date: Wed, 17 Apr 2019 10:24:03 -0700
Subject: [PATCH] UX: replace lightbox loading text with spinner (#7393)

---
 app/assets/javascripts/discourse/lib/lightbox.js.es6 | 6 ++++--
 app/assets/stylesheets/common/base/lightbox.scss     | 4 ++++
 config/locales/client.en.yml                         | 1 -
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/app/assets/javascripts/discourse/lib/lightbox.js.es6 b/app/assets/javascripts/discourse/lib/lightbox.js.es6
index b1be31d695f..c84d878d6ae 100644
--- a/app/assets/javascripts/discourse/lib/lightbox.js.es6
+++ b/app/assets/javascripts/discourse/lib/lightbox.js.es6
@@ -2,6 +2,7 @@ import loadScript from "discourse/lib/load-script";
 import { escapeExpression } from "discourse/lib/utilities";
 import { renderIcon } from "discourse-common/lib/icon-library";
 import { isAppWebview, postRNWebviewMessage } from "discourse/lib/utilities";
+import { spinnerHTML } from "discourse/helpers/loading-spinner";
 
 export default function($elem) {
   if (!$elem) {
@@ -10,6 +11,7 @@ export default function($elem) {
 
   loadScript("/javascripts/jquery.magnific-popup.min.js").then(function() {
     const spoilers = $elem.find(".spoiler a.lightbox, .spoiled a.lightbox");
+
     $elem
       .find("a.lightbox")
       .not(spoilers)
@@ -18,6 +20,8 @@ export default function($elem) {
         closeOnContentClick: false,
         removalDelay: 300,
         mainClass: "mfp-zoom-in",
+        tClose: I18n.t("lightbox.close"),
+        tLoading: spinnerHTML,
 
         gallery: {
           enabled: true,
@@ -26,8 +30,6 @@ export default function($elem) {
           tCounter: I18n.t("lightbox.counter")
         },
 
-        tClose: I18n.t("lightbox.close"),
-        tLoading: I18n.t("lightbox.loading"),
         ajax: {
           tError: I18n.t("lightbox.content_load_error")
         },
diff --git a/app/assets/stylesheets/common/base/lightbox.scss b/app/assets/stylesheets/common/base/lightbox.scss
index 97779c4a482..bc089ac1011 100644
--- a/app/assets/stylesheets/common/base/lightbox.scss
+++ b/app/assets/stylesheets/common/base/lightbox.scss
@@ -100,3 +100,7 @@ $meta-element-margin: 6px;
     }
   }
 }
+
+.mfp-preloader .spinner {
+  margin: auto;
+}
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index 1bd828e6f60..5982db56964 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -2806,7 +2806,6 @@ en:
       next: "Next (Right arrow key)"
       counter: "%curr% of %total%"
       close: "Close (Esc)"
-      loading: "Loading…"
       content_load_error: '<a href="%url%">The content</a> could not be loaded.'
       image_load_error: '<a href="%url%">The image</a> could not be loaded.'