From c3ff17a8f18b51dd7f83522e6b4f1351321864ab Mon Sep 17 00:00:00 2001
From: Giulio Gratta <giuliog@stanford.edu>
Date: Tue, 19 Dec 2017 14:16:39 -0800
Subject: [PATCH] Add FA loading spinner to each problem

- This is so that if a site loads slowly users know which/how many problems they need to wait for.
- Spinner gets replaced automatically by problem content when it loads.
---
 common/lib/xmodule/xmodule/css/capa/display.scss | 7 +++++++
 lms/templates/problem_ajax.html                  | 4 ++++
 2 files changed, 11 insertions(+)

diff --git a/common/lib/xmodule/xmodule/css/capa/display.scss b/common/lib/xmodule/xmodule/css/capa/display.scss
index 6f2373b051..78c7249596 100644
--- a/common/lib/xmodule/xmodule/css/capa/display.scss
+++ b/common/lib/xmodule/xmodule/css/capa/display.scss
@@ -1675,3 +1675,10 @@ div.problem .annotation-input {
     content: '';
   }
 }
+
+// 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 941e0855df..6c0a60795e 100644
--- a/lms/templates/problem_ajax.html
+++ b/lms/templates/problem_ajax.html
@@ -6,4 +6,8 @@
      data-attempts-used="${attempts_used}"
      data-content="${content | h}"
      data-graded="${graded}">
+    <p class="loading-spinner">
+        <i class="fa fa-spinner fa-pulse fa-2x fa-fw"></i>
+        <span class="sr">Loading&hellip;</span>
+    </p>
 </div>