spinner

frontend/frontend/static/frontend/assets/js/setup-tool.js

@@ -188,6 +188,7 @@ function Item(name, button) {
 
     function updateSelection() {
         //todo: freeze UI
+        loader(true);
         return requestSelection().then(function(data){
             // go by items
             for (var name in data) {
@@ -209,9 +210,11 @@ function Item(name, button) {
                 // remove all hover styles
                 styleTool.unstyleAll('hover');
             }
+            loader(false);
             return {};
         }, function(error){
-            //todo: unfreez UI
+            //unfreez UI
+            loader(false);
             console.log('Server error: '+ error);
         });
     }
@@ -415,11 +418,14 @@ function updateCreateButton() {
 function onCreateButtonClick() {
     var active = !$('#create').hasClass('disabled');
     if (active)
-        //todo: freeze UI
+        //freeze UI
+        loader(true);
         createFeed().then(function(feed_page_url){
             window.location.href = feed_page_url;
+            loader(false);
         }, function(error){
-            //todo: unfreez UI
+            //unfreez UI
+            loader(false);
             console.log('Server error: '+ error);
         });
 }
@@ -457,6 +463,10 @@ function createFeed() {
 // ++++ Create button logic
 ////
 
+// Spinner
+function loader(show) {
+  document.getElementById("loader-bg").style.display = show ? "block" : "none";
+}
 
 $(document).ready(function(){
     items['title'] = new Item('title', $('#st-title')[0]);

frontend/frontend/static/frontend/assets/stylesheets/wizard.css.css

@@ -35,4 +35,43 @@
   color: white;
   border: none; }
 
+/* Loader background */
+#loader-bg {
+  display: none;
+  position: absolute;
+  left: 0%;
+  top: 0%;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0.5); }
+
+/* Center the loader */
+#loader {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  z-index: 1;
+  width: 150px;
+  height: 150px;
+  margin: -75px 0 0 -75px;
+  border: 16px solid #f3f3f3;
+  border-radius: 50%;
+  border-top: 16px solid #3498db;
+  width: 120px;
+  height: 120px;
+  -webkit-animation: spin 2s linear infinite;
+  animation: spin 2s linear infinite; }
+
+@-webkit-keyframes spin {
+  0% {
+    -webkit-transform: rotate(0deg); }
+  100% {
+    -webkit-transform: rotate(360deg); } }
+@keyframes spin {
+  0% {
+    transform: rotate(0deg); }
+  100% {
+    transform: rotate(360deg); } }
+
 /*# sourceMappingURL=wizard.css.css.map */

frontend/frontend/static/frontend/assets/stylesheets/wizard.css.css.map

@@ -1,6 +1,6 @@
 {
 "version": 3,
-"mappings": "AAGA,OAAQ;EAIN,MAAM,EAAE,MAAM;EACd,UAAU,EAAE,MAAM;EAIlB,WAAW,EAAE,CAAC;EACd,UAAU,EAAE,MAAM;EATlB,WAAI;IACF,KAAK,EAAE,KAAK;EAId,UAAG;IACD,SAAS,EAAE,GAAG;;;;AAYlB,gDAAiD;EAE7C,WAAI;IACF,KAAK,EAAE,KAAK;EAEd,UAAG;IACD,SAAS,EAAE,GAAG;;AAMpB,yBAA0B;EAEtB,WAAI;IACF,KAAK,EAAE,KAAK;EAEd,UAAG;IACD,SAAS,EAAE,GAAG;;AAMpB,yBAA0B;EAEtB,WAAI;IACF,KAAK,EAAE,KAAK;EAEd,UAAG;IACD,SAAS,EAAE,GAAG;AAKpB,OAAQ;EACN,UAAU,EAAE,MAAM;;AAGpB,sBAAuB;EACrB,UAAU,EAAE,IAAI;EAChB,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,IAAI",
+"mappings": "AAGA,OAAQ;EAIN,MAAM,EAAE,MAAM;EACd,UAAU,EAAE,MAAM;EAIlB,WAAW,EAAE,CAAC;EACd,UAAU,EAAE,MAAM;EATlB,WAAI;IACF,KAAK,EAAE,KAAK;EAId,UAAG;IACD,SAAS,EAAE,GAAG;;AAOlB,mBAAmB;AAInB,8CAA8C;AAC9C,gDAAiD;EAE7C,WAAI;IACF,KAAK,EAAE,KAAK;EAEd,UAAG;IACD,SAAS,EAAE,GAAG;AAKpB,wCAAwC;AACxC,yBAA0B;EAEtB,WAAI;IACF,KAAK,EAAE,KAAK;EAEd,UAAG;IACD,SAAS,EAAE,GAAG;AAKpB,+BAA+B;AAC/B,yBAA0B;EAEtB,WAAI;IACF,KAAK,EAAE,KAAK;EAEd,UAAG;IACD,SAAS,EAAE,GAAG;AAKpB,OAAQ;EACN,UAAU,EAAE,MAAM;;AAGpB,sBAAuB;EACrB,UAAU,EAAE,IAAI;EAChB,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,IAAI;;AAId,uBAAuB;AACvB,UAAW;EACT,OAAO,EAAE,IAAI;EACb,QAAQ,EAAE,QAAQ;EAClB,IAAI,EAAE,EAAE;EACR,GAAG,EAAE,EAAE;EACP,OAAO,EAAE,CAAC;EACV,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;EACZ,gBAAgB,EAAE,wBAAqB;;AAEzC,uBAAuB;AACvB,OAAQ;EACN,QAAQ,EAAE,QAAQ;EAClB,IAAI,EAAE,GAAG;EACT,GAAG,EAAE,GAAG;EACR,OAAO,EAAE,CAAC;EACV,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,KAAK;EACb,MAAM,EAAE,eAAe;EACvB,MAAM,EAAE,kBAAkB;EAC1B,aAAa,EAAE,GAAG;EAClB,UAAU,EAAE,kBAAkB;EAC9B,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,KAAK;EACb,iBAAiB,EAAE,uBAAuB;EAC1C,SAAS,EAAE,uBAAuB;;AAGpC,uBAGC;EAFC,EAAG;IAAE,iBAAiB,EAAE,YAAY;EACpC,IAAK;IAAE,iBAAiB,EAAE,cAAc;AAG1C,eAGC;EAFC,EAAG;IAAE,SAAS,EAAE,YAAY;EAC5B,IAAK;IAAE,SAAS,EAAE,cAAc",
 "sources": ["wizard.css.scss"],
 "names": [],
 "file": "wizard.css.css"

frontend/frontend/static/frontend/assets/stylesheets/wizard.css.scss

@@ -63,4 +63,45 @@
   background: gray;
   color: white;
   border: none;
-}
+}
+
+
+/* Loader background */
+#loader-bg {
+  display: none;
+  position: absolute;
+  left: 0%;
+  top: 0%;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(255,255,255,0.5);
+}
+/* Center the loader */
+#loader {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  z-index: 1;
+  width: 150px;
+  height: 150px;
+  margin: -75px 0 0 -75px;
+  border: 16px solid #f3f3f3;
+  border-radius: 50%;
+  border-top: 16px solid #3498db;
+  width: 120px;
+  height: 120px;
+  -webkit-animation: spin 2s linear infinite;
+  animation: spin 2s linear infinite;
+}
+
+@-webkit-keyframes spin {
+  0% { -webkit-transform: rotate(0deg); }
+  100% { -webkit-transform: rotate(360deg); }
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+

frontend/frontend/templates/frontend/setup.html

@@ -2,6 +2,7 @@
 {% load i18n %}_
 
 {% block content %}
+<div id="loader-bg"><div id="loader"></div></div>
 <div class="page-header">
     <!--h1 style="display: inline">Feed setup:</h1-->
     <h2 style="display: inline" id="setup-tool-string">
@@ -17,7 +18,6 @@
 <iframe src="{{ external_page_url }}" frameborder="0" style="width:100%;/*for footer*/; border:solid">
 
 </iframe>
-
     <script type="text/javascript">
         // Based on: http://www.quirksmode.org/js/findpos.html
         var getCumulativeOffset = function (obj) {