Loading overlay for componentView

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

@@ -45,34 +45,49 @@ class ComponentView {
           return;
         }
 
-        // activationHandlers may be called multiple times, design below to be idempotent
+        $timeout(() => {
-        if(component.active) {
+          $scope.handleActivation();
-          $scope.loading = true;
+        })
-          let iframe = componentManager.iframeForComponent(component);
+      },
-          if(iframe) {
-            // begin loading error handler. If onload isn't called in x seconds, display an error
-            if($scope.loadTimeout) { $timeout.cancel($scope.loadTimeout);}
-            $scope.loadTimeout = $timeout(() => {
-              if($scope.loading) {
-                $scope.issueLoading = true;
-              }
-            }, 3500);
-            iframe.onload = function(event) {
-              // console.log("iframe loaded for component", component.name, "cancelling load timeout", $scope.loadTimeout);
-              $timeout.cancel($scope.loadTimeout);
-              $scope.loading = false;
-              $scope.issueLoading = false;
-              componentManager.registerComponentWindow(component, iframe.contentWindow);
-            }.bind(this);
-          }
-        }
-    },
       actionHandler: (component, action, data) => {
          if(action == "set-size") {
            componentManager.handleSetSizeEvent(component, data);
          }
-      }}
+      }
-    );
+    });
+
+    $scope.handleActivation = function() {
+      // activationHandlers may be called multiple times, design below to be idempotent
+      let component = $scope.component;
+      if(!component.active) {
+        return;
+      }
+
+      $scope.loading = true;
+
+      let iframe = componentManager.iframeForComponent(component);
+      if(iframe) {
+        // begin loading error handler. If onload isn't called in x seconds, display an error
+        if($scope.loadTimeout) { $timeout.cancel($scope.loadTimeout);}
+        $scope.loadTimeout = $timeout(() => {
+          if($scope.loading) {
+            $scope.issueLoading = true;
+          }
+        }, 3500);
+        iframe.onload = (event) => {
+          // console.log("iframe loaded for component", component.name, "cancelling load timeout", $scope.loadTimeout);
+          $timeout.cancel($scope.loadTimeout);
+          componentManager.registerComponentWindow(component, iframe.contentWindow);
+
+          // Add small timeout to, as $scope.loading controls loading overlay,
+          // which is used to avoid flicker when enabling extensions while having an enabled theme
+          $timeout(() => {
+            $scope.loading = false;
+            $scope.issueLoading = false;
+          }, 5)
+        };
+      }
+    }
 
 
     /*

app/assets/javascripts/app/services/componentManager.js

@@ -154,7 +154,7 @@ class ComponentManager {
       if(component.isTheme() || !component.active || !component.window) {
         continue;
       }
-      this.postActiveThemeToComponent(component);
+      this.postActiveThemesToComponent(component);
     }
   }
 
@@ -162,14 +162,16 @@ class ComponentManager {
     return this.componentsForArea("themes").filter((theme) => {return theme.active});
   }
 
-  postActiveThemeToComponent(component) {
+  urlsForActiveThemes() {
-    var themes = this.getActiveThemes();
+    let themes = this.getActiveThemes();
-    var urls = themes.map((theme) => {
+    return themes.map((theme) => {
       return this.urlForComponent(theme);
     })
-    var data = {
+  }
-      themes: urls
+
-    }
+  postActiveThemesToComponent(component) {
+    let urls = this.urlsForActiveThemes();
+    let data = { themes: urls }
 
     this.sendMessageToComponent(component, {action: "themes", data: data})
   }
@@ -805,10 +807,11 @@ class ComponentManager {
       data: {
         uuid: component.uuid,
         environment: isDesktopApplication() ? "desktop" : "web",
-        platform: getPlatformString()
+        platform: getPlatformString(),
+        activeThemeUrls: this.urlsForActiveThemes()
       }
     });
-    this.postActiveThemeToComponent(component);
+    this.postActiveThemesToComponent(component);
 
     this.desktopManager.notifyComponentActivation(component);
   }

app/assets/javascripts/app/services/themeManager.js

@@ -60,8 +60,6 @@ class ThemeManager {
       return;
     }
 
-    console.log("Activating theme", theme.uuid);
-
     this.activeThemes.push(theme);
 
     var url = this.componentManager.urlForComponent(theme);
@@ -97,7 +95,6 @@ class ThemeManager {
       return params;
     }));
     let data = JSON.stringify(mapped);
-    console.log("Caching themes", data);
     return this.storageManager.setItem(ThemeManager.CachedThemesKey, data, StorageManager.Fixed);
   }
 

app/assets/stylesheets/app/_modals.scss

@@ -178,6 +178,13 @@
     min-width: 100%;
   }
 
+  .loading-overlay {
+    position: absolute;
+    background-color: var(--sn-stylekit-editor-background-color);
+    width: 100%;
+    height: 100%;
+  }
+
   iframe {
     // We're disabling flex: 1; because on Firefox, it causes weird sizing issues with component stack items.
     // Not sure yet if totally required.

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

@@ -111,3 +111,5 @@
   "sandbox" => "allow-scripts allow-top-navigation-by-user-activation allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-modals allow-forms",
   "data-component-id" => "{{component.uuid}}"}
   Loading
+
+.loading-overlay{"ng-if" => "loading"}