Improving isLoading

gobstones · Jun 29, 2017 · 8799005 · 8799005
1 parent 011f261
commit 8799005
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 32 deletions.
diff --git a/app/elements/gobstones-ide/gobstones-ide.html b/app/elements/gobstones-ide/gobstones-ide.html
@@ -9,10 +9,21 @@
 <dom-module id="gobstones-ide">
   <style>
     .loading {
+      z-index: 999;
+      position: absolute;
       text-align: center;
-      width: 100%;
       font-weight: bold;
       font-size: xx-large;
+      width: 300px;
+      height: 100px;
+      margin-top: -50px;
+      margin-left: -150px;
+      top: 50%;
+      left: 50%;
+    }
+
+    .gray {
+      filter: grayscale(100%);
     }
 
     .description {
@@ -26,38 +37,36 @@
 
   <template>
 
-    <div class="panel-container">
+    <div class$="panel-container {{ideCss(isLoading)}}">
       <template is="dom-if" if="{{isLoading}}">
         <div class="loading">[[localize("loading-project")]]</div>
       </template>
 
-      <template is="dom-if" if="{{!isLoading}}">
-        <div class="panel-left">
-          <editor-toolbar project-type="[[projectType]]" id="toolbar"></editor-toolbar>
+      <div class="panel-left">
+        <editor-toolbar project-type="[[projectType]]" id="toolbar"></editor-toolbar>
 
-          <template is="dom-if" if="{{isBlocksProject(projectType)}}">
-            <gobstones-blockly id="editor"></gobstones-blockly>
-          </template>
+        <template is="dom-if" if="{{isBlocksProject(projectType)}}">
+          <gobstones-blockly id="editor"></gobstones-blockly>
+        </template>
 
-          <template is="dom-if" if="{{isCodeProject(projectType)}}">
-            <gobstones-editor id="editor"></gobstones-editor>
-          </template>
-        </div>
+        <template is="dom-if" if="{{isCodeProject(projectType)}}">
+          <gobstones-editor id="editor"></gobstones-editor>
+        </template>
+      </div>
 
-        <div class="panel-right">
-          <boards-panel id="boards"></boards-panel>
-        </div>
+      <div class="panel-right">
+        <boards-panel id="boards"></boards-panel>
+      </div>
 
-        <paper-dialog id="modal" class="description">
-          <paper-dialog-scrollable>
-            <div inner-h-t-m-l="[[compileMd(modalContent)]]"></div>
-          </paper-dialog-scrollable>
+      <paper-dialog id="modal" class="description">
+        <paper-dialog-scrollable>
+          <div inner-h-t-m-l="[[compileMd(modalContent)]]"></div>
+        </paper-dialog-scrollable>
 
-          <div class="buttons">
-            <paper-button class="accept" dialog-confirm autofocus>[[localize("accept")]]</paper-button>
-          </div>
-        </paper-dialog>
-      </template>
+        <div class="buttons">
+          <paper-button class="accept" dialog-confirm autofocus>[[localize("accept")]]</paper-button>
+        </div>
+      </paper-dialog>
     </div>
 
   </template>
@@ -120,7 +129,7 @@
       buttonCssClass: function(show) {
         return !show ? "button-disabled" : "";
       },
-      
+
       _markdownOptions: function() {
         return {tables: true};
       },
@@ -155,16 +164,20 @@
       _setUpLoader: function(Loader, url, getContext) {
         window.LOAD_PENDING_PROJECT = () => {
           this.isLoading = true;
+          var finish = () => { this.isLoading = false; };
 
           new Loader(this.projectType)
-            .load(url, getContext)
+            .load(url, getContext, finish)
             .catch((e) => {
               console.error(e);
               alert(this.localize("error-loading-project"));
-            }).always(() => {
-              this.isLoading = false;
+              finish()
             });
         };
+      },
+
+      ideCss: function(isLoading) {
+        return isLoading ? "gray" : "";
       }
     });
 

diff --git a/app/scripts/loaders/remote/gitHubLoader.html b/app/scripts/loaders/remote/gitHubLoader.html
@@ -10,11 +10,11 @@
       this.CLIENT_SECRET = "f40981be76b00e35d4437d71184f42a70d08f3a6";
     }
 
-    load(slug, getContext) {
+    load(slug, getContext, callback) {
       const [ username, repoName ] = slug.split("/");
 
       return this._loadDir(username, repoName).then(files => {
-        this.loader.readRaw(getContext(), this._createZip(files), _.noop);
+        this.loader.readRaw(getContext(), this._createZip(files), callback);
       });
     }
 

diff --git a/app/scripts/loaders/remote/urlLoader.html b/app/scripts/loaders/remote/urlLoader.html
@@ -7,9 +7,9 @@
       this.loader = projectType === "code" ? new ProjectLoader : new ProjectBlocksLoader;
     }
 
-    load(url, getContext) {
+    load(url, getContext, callback) {
       return $.getBinary(url).then(content => {
-        this.loader.readRawZip(getContext(), content, _.noop);
+        this.loader.readRawZip(getContext(), content, callback);
       });
     }
   }