From a3eb726f5fe2517907548508b3951c188717d0aa Mon Sep 17 00:00:00 2001
From: Giulio Gratta <giuliog@stanford.edu>
Date: Thu, 11 Aug 2016 11:20:45 -0700
Subject: [PATCH] Add font awesome loading spinner to CAPA problems

- loading spinner is automatically replaced by the content when AJAX problem_get returns
---
 common/lib/xmodule/xmodule/css/capa/display.scss | 7 +++++++
 lms/templates/problem_ajax.html                  | 8 +++++++-
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/common/lib/xmodule/xmodule/css/capa/display.scss b/common/lib/xmodule/xmodule/css/capa/display.scss
index 5fcd28a630..08d3d18322 100644
--- a/common/lib/xmodule/xmodule/css/capa/display.scss
+++ b/common/lib/xmodule/xmodule/css/capa/display.scss
@@ -1523,3 +1523,10 @@ div.problem .annotation-input {
     background: url('#{$static-path}/images/partially-correct-icon.png') center center no-repeat;
   }
 }
+
+// Loading Spinner
+// ====================
+.problems-wrapper .loading-spinner {
+  text-align: center;
+  color: $gray-d1;
+}
diff --git a/lms/templates/problem_ajax.html b/lms/templates/problem_ajax.html
index 664b7567c0..6794032a54 100644
--- a/lms/templates/problem_ajax.html
+++ b/lms/templates/problem_ajax.html
@@ -1 +1,7 @@
-<div id="problem_${element_id}" class="problems-wrapper" data-problem-id="${id}" data-url="${ajax_url}" data-progress_status="${progress_status}" data-progress_detail="${progress_detail}" data-content="${content | h}"></div>
+<%! from django.utils.translation import ugettext as _ %>
+<div id="problem_${element_id}" class="problems-wrapper" data-problem-id="${id}" data-url="${ajax_url}" data-progress_status="${progress_status}" data-progress_detail="${progress_detail}" data-content="${content | h}">
+    <p class="loading-spinner">
+        <span class="icon fa fa-spinner fa-pulse fa-2x fa-fw" aria-hidden="true"></span>
+        <span class="sr">${_('Loading')}</span>
+    </p>
+</div>