Fixes and improvements related to components

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

@@ -30,7 +30,6 @@ class ComponentViewCtrl implements ComponentViewScope {
   private cleanUpOn: () => void
   private unregisterComponentHandler!: () => void
   private unregisterDesktopObserver!: () => void
-  private didRegisterObservers = false
   private issueLoading = false
   public reloading = false
   private expired = false
@@ -74,7 +73,6 @@ class ComponentViewCtrl implements ComponentViewScope {
 
   $onInit() {
     this.liveComponent = new LiveItem(this.componentUuid, this.application);
-    this.loadComponent();
     this.registerComponentHandlers();
     this.registerPackageUpdateObserver();
   }
@@ -83,6 +81,13 @@ class ComponentViewCtrl implements ComponentViewScope {
     return this.liveComponent?.item;
   }
 
+  public onIframeInit() {
+    /** Perform in timeout required so that dynamic iframe id is set (based on ctrl values) */
+    this.$timeout(() => {
+      this.loadComponent();
+    });
+  }
+
   private loadComponent() {
     if (!this.component) {
       throw 'Component view is missing component';
@@ -91,7 +96,7 @@ class ComponentViewCtrl implements ComponentViewScope {
       throw 'Component view component must be active';
     }
     const iframe = this.application.componentManager!.iframeForComponent(
-      this.component
+      this.componentUuid
     );
     if (!iframe) {
       return;
@@ -103,7 +108,8 @@ class ComponentViewCtrl implements ComponentViewScope {
     this.loadTimeout = this.$timeout(() => {
       this.handleIframeLoadTimeout();
     }, MaxLoadThreshold);
-    iframe.onload = (event) => {
+    iframe.onload = () => {
+      this.reloadStatus();
       this.handleIframeLoad(iframe);
     };
   }
@@ -111,8 +117,8 @@ class ComponentViewCtrl implements ComponentViewScope {
   private registerPackageUpdateObserver() {
     this.unregisterDesktopObserver = this.application.getDesktopService()
       .registerUpdateObserver((component: SNComponent) => {
-        if (component === this.component && component.active) {
-          this.reloadComponent();
+        if (component.uuid === this.component.uuid && component.active) {
+          this.reloadIframe();
         }
       });
   }
@@ -129,25 +135,26 @@ class ComponentViewCtrl implements ComponentViewScope {
     });
   }
 
+  private reloadIframe() {
+    this.$timeout(() => {
+      this.reloading = true;
+      this.$timeout(() => {
+        this.reloading = false;
+      });
+    })
+  }
+
   private onVisibilityChange() {
     if (document.visibilityState === 'hidden') {
       return;
     }
     if (this.issueLoading) {
-      this.reloadComponent();
+      this.reloadIframe();
     }
   }
 
-  public async reloadComponent() {
-    this.componentValid = false;
-    await this.application.componentManager!.reloadComponent(this.component);
-    this.reloadStatus();
-  }
-
   public reloadStatus(doManualReload = true) {
-    this.reloading = true;
     const component = this.component;
-    const previouslyValid = this.componentValid;
     const offlineRestricted = component.offlineOnly && !isDesktopApplication();
     const hasUrlError = function () {
       if (isDesktopApplication()) {
@@ -157,9 +164,11 @@ class ComponentViewCtrl implements ComponentViewScope {
       }
     }();
     this.expired = component.valid_until && component.valid_until <= new Date();
-    const readonlyState = this.application.componentManager!.getReadonlyStateForComponent(component);
+    const readonlyState = this.application.componentManager!
+      .getReadonlyStateForComponent(component);
     if (!readonlyState.lockReadonly) {
-      this.application.componentManager!.setReadonlyStateForComponent(component, true);
+      this.application.componentManager!
+        .setReadonlyStateForComponent(component, this.expired);
     }
     this.componentValid = !offlineRestricted && !hasUrlError;
     if (!this.componentValid) {
@@ -172,17 +181,9 @@ class ComponentViewCtrl implements ComponentViewScope {
     } else {
       this.error = undefined;
     }
-    if (this.componentValid !== previouslyValid) {
-      if (this.componentValid) {
-        this.application.componentManager!.reloadComponent(component);
-      }
-    }
     if (this.expired && doManualReload) {
       this.$rootScope.$broadcast('reload-ext-dat');
     }
-    this.$timeout(() => {
-      this.reloading = false;
-    }, 500);
   }
 
   private async handleIframeLoadTimeout() {
@@ -191,7 +192,7 @@ class ComponentViewCtrl implements ComponentViewScope {
       this.issueLoading = true;
       if (!this.didAttemptReload) {
         this.didAttemptReload = true;
-        this.reloadComponent();
+        this.reloadIframe();
       } else {
         document.addEventListener(
           VisibilityChangeKey,