Fixes and improvements related to components

app/assets/javascripts/directives/functional/infiniteScroll.ts

@@ -8,7 +8,7 @@ export function infiniteScroll() {
       const element = elem[0];
       scopeAny.paginate = debounce(() => {
         scope.$apply(attrs.infiniteScroll);
-      }, 100);
+      }, 10);
       scopeAny.onScroll = () => {
         if (
           scope.$eval(attrs.canLoad) &&

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

@@ -1,10 +1,10 @@
 import { WebApplication } from '@/ui_models/application';
-import { SNComponent } from 'snjs';
+import { SNComponent, LiveItem } from 'snjs';
 import { WebDirective } from './../../types';
 import template from '%/directives/component-modal.pug';
 
-type ComponentModalScope = {
-  component: SNComponent
+export type ComponentModalScope = {
+  componentUuid: string
   callback: () => void
   onDismiss: (component: SNComponent) => void
   application: WebApplication
@@ -12,16 +12,34 @@ type ComponentModalScope = {
 
 export class ComponentModalCtrl implements ComponentModalScope {
   $element: JQLite
-  component!: SNComponent
+  componentUuid!: string
   callback!: () => void
   onDismiss!: (component: SNComponent) => void
   application!: WebApplication
-  
+  liveComponent!: LiveItem<SNComponent>
+  component!: SNComponent
+
   /* @ngInject */
   constructor($element: JQLite) {
     this.$element = $element;
   }
 
+  $onInit() {
+    this.liveComponent = new LiveItem(
+      this.componentUuid,
+      this.application,
+      (component) => {
+        this.component = component;
+      }
+    );
+    this.application.componentGroup.activateComponent(this.component);
+  }
+
+  $onDestroy() {
+    this.application.componentGroup.deactivateComponent(this.component);
+    this.liveComponent.deinit();
+  }
+
   dismiss() {
     this.onDismiss && this.onDismiss(this.component);
     this.callback && this.callback();
@@ -41,7 +59,7 @@ export class ComponentModal extends WebDirective {
     this.controllerAs = 'ctrl';
     this.bindToController = true;
     this.scope = {
-      component: '=',
+      componentUuid: '=',
       callback: '=',
       onDismiss: '&',
       application: '='

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,