Extensions issue loading indicator

app/assets/javascripts/app/directives/views/componentView.js

@@ -23,15 +23,25 @@ class ComponentView {
     // console.log("Registering handler", $scope.identifier, $scope.component.name);
 
     this.componentManager.registerHandler({identifier: $scope.identifier, areas: [$scope.component.area], activationHandler: (component) => {
+      // activationHandlers may be called multiple times, design below to be idempotent
       if(component.active) {
-        this.timeout(() => {
-          var iframe = this.componentManager.iframeForComponent(component);
-          if(iframe) {
-            iframe.onload = function() {
-              this.componentManager.registerComponentWindow(component, iframe.contentWindow);
-            }.bind(this);
-          }
-        });
+        $scope.loading = true;
+        let iframe = this.componentManager.iframeForComponent(component);
+        if(iframe) {
+          // begin loading error handler. If onload isn't called in x seconds, display an error
+          if($scope.loadTimeout) { this.timeout.cancel($scope.loadTimeout);}
+          $scope.loadTimeout = this.timeout(() => {
+            if($scope.loading) {
+              $scope.issueLoading = true;
+            }
+          }, 3500)
+          iframe.onload = function(event) {
+            this.timeout.cancel($scope.loadTimeout);
+            $scope.loading = false;
+            $scope.issueLoading = false;
+            this.componentManager.registerComponentWindow(component, iframe.contentWindow);
+          }.bind(this);
+        }
       }
     },
     actionHandler: (component, action, data) => {

app/assets/stylesheets/app/_modals.scss

@@ -99,6 +99,7 @@
 .component-view {
   flex-grow: 1;
   display: flex;
+  flex-direction: column;
 
   // not sure why we need this. Removed because it creates unncessary scroll bars. Tested on folders extension, creates horizontal scrollbar at bottom on windows
   // overflow: auto;

app/assets/stylesheets/app/_stylekit-sub.scss

@@ -18,6 +18,11 @@
   }
 
 
+  .app-bar {
+    &.no-top-edge {
+      border-top: 0;
+    }
+  }
 
 }
 

app/assets/templates/directives/component-view.html.haml

@@ -1,3 +1,12 @@
+.sn-component{"ng-if" => "issueLoading"}
+  .app-bar.no-edges.no-top-edge
+    .left
+      .item
+        .label.warning There was an issue loading {{component.name}}.
+    .right
+      .item{"ng-click" => "reloadComponent()"}
+        .label Reload
+
 .sn-component{"ng-if" => "error == 'expired'"}
   .panel.static
     .content