Spinners for droppable elements

drag_and_drop_v2/public/css/drag_and_drop.css

@@ -76,6 +76,16 @@
     z-index: 10 !important;
 }
 
+.xblock--drag-and-drop .drag-container .option .spinner-wrapper {
+    margin-right: 3px;
+    float: left;
+    display: none;
+}
+
+.xblock--drag-and-drop .drag-container .option .item-content {
+    display: inline-block;
+}
+
 /* Placed option */
 .xblock--drag-and-drop .drag-container .target .option {
     position: absolute;

drag_and_drop_v2/public/js/drag_and_drop.js

@@ -202,20 +202,26 @@ function DragAndDropBlock(runtime, element, configuration) {
             x_percent: x_percent,
             y_percent: y_percent,
         };
-        $.post(url, JSON.stringify(data), 'json').done(function(data){
-            if (data.correct_location) {
-                state.items[item_id].correct_input = Boolean(data.correct);
-                state.items[item_id].submitting_location = false;
-            } else {
-                delete state.items[item_id];
-            }
-            state.feedback = data.feedback;
-            if (data.finished) {
-                state.finished = true;
-                state.overall_feedback = data.overall_feedback;
-            }
-            applyState();
-        });
+        var $item = $root.find(".option[data-value='"+item_id+"']");
+        $item.find('.spinner-wrapper').show();
+
+        $.post(url, JSON.stringify(data), 'json')
+            .done(function(data){
+                if (data.correct_location) {
+                    state.items[item_id].correct_input = Boolean(data.correct);
+                    state.items[item_id].submitting_location = false;
+                } else {
+                    delete state.items[item_id];
+                }
+                state.feedback = data.feedback;
+                if (data.finished) {
+                    state.finished = true;
+                    state.overall_feedback = data.overall_feedback;
+                }
+                $item.find('.spinner-wrapper').hide();
+                applyState();
+            })
+            .fail(function (data) { $item.find('.spinner-wrapper').hide(); });
     };
 
     var submitInput = function(evt) {

drag_and_drop_v2/public/js/view.js

@@ -18,6 +18,15 @@
         }, 0);
     };
 
+    var itemSpinnerTemplate = function() {
+        return (h(
+            "div.spinner-wrapper",
+            [
+                h("i.fa.fa-spin.fa-spinner")
+            ]
+        ));
+    };
+
     var renderCollection = function(template, collection, ctx) {
         return collection.map(function(item) {
             return template(item, ctx);
@@ -59,7 +68,8 @@
                     attributes: {'data-value': item.value, 'data-drag-disabled': item.drag_disabled},
                     style: style
                 }, [
-                    h('div', {innerHTML: item.content_html}),
+                    itemSpinnerTemplate(),
+                    h('div', {innerHTML: item.content_html, className: "item-content"}),
                     itemInputTemplate(item.input)
                 ]
             )