fix: incremental loading for actions

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

@@ -15,7 +15,7 @@ type ActionSubRow = {
   onClick: () => void
   label: string
   subtitle: string
-  spinnerClass: string | undefined
+  spinnerClass?: string
 }
 
 type UpdateActionParams = {
@@ -26,22 +26,22 @@ type UpdateActionParams = {
 
 type UpdateExtensionParams = {
   hidden?: boolean
+  loading?: boolean
 }
 
-class ActionsMenuCtrl extends PureViewCtrl implements ActionsMenuScope {
+type ActionsMenuState = {
+  extensions: SNActionsExtension[]
+}
 
+class ActionsMenuCtrl extends PureViewCtrl<{}, ActionsMenuState> implements ActionsMenuScope {
   application!: WebApplication
   item!: SNItem
-  public loadingExtensions: boolean = true
 
   /* @ngInject */
   constructor(
     $timeout: ng.ITimeoutService
   ) {
     super($timeout);
-    this.state = {
-      extensions: []
-    };
   }
 
   $onInit() {
@@ -52,20 +52,25 @@ class ActionsMenuCtrl extends PureViewCtrl implements ActionsMenuScope {
     this.loadExtensions();
   };
 
-  async loadExtensions() {
-    const actionExtensions = this.application.actionsManager!.getExtensions().sort((a, b) => {
+  /** @override */
+  getInitialState() {
+    const extensions = this.application.actionsManager!.getExtensions().sort((a, b) => {
       return a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1;
     });
-    const extensionsForItem = await Promise.all(actionExtensions.map((extension) => {
-      return this.application.actionsManager!.loadExtensionInContextOfItem(
+    return {
+      extensions: extensions
+    } as ActionsMenuState;
+  }
+
+  async loadExtensions() {
+    await Promise.all(this.state.extensions.map(async (extension: SNActionsExtension) => {
+      extension = await this.updateExtension(extension, { loading: true });
+      const updatedExtension = await this.application.actionsManager!.loadExtensionInContextOfItem(
         extension,
-        this.props.item
+        this.item
       );
+      await this.updateExtension(updatedExtension!, { loading: false });
     }));
-    this.loadingExtensions = false;
-    await this.setState({
-      extensions: extensionsForItem
-    });
   }
 
   async executeAction(action: Action, extension: SNActionsExtension) {
@@ -79,7 +84,7 @@ class ActionsMenuCtrl extends PureViewCtrl implements ActionsMenuScope {
     await this.updateAction(action, extension, { running: true });
     const response = await this.application.actionsManager!.runAction(
       action,
-      this.props.item,
+      this.item,
       async () => {
         /** @todo */
         return '';
@@ -151,6 +156,7 @@ class ActionsMenuCtrl extends PureViewCtrl implements ActionsMenuScope {
     const updatedExtension = await this.application.changeItem(extension.uuid, (mutator) => {
       const extensionMutator = mutator as ActionsExtensionMutator;
       extensionMutator.hidden = Boolean(params?.hidden);
+      extensionMutator.loading = Boolean(params?.loading);
     }) as SNActionsExtension;
     const extensions = this.state.extensions.map((ext: SNActionsExtension) => {
       if (extension.uuid === ext.uuid) {
@@ -161,16 +167,17 @@ class ActionsMenuCtrl extends PureViewCtrl implements ActionsMenuScope {
     await this.setState({
       extensions: extensions
     });
+    return updatedExtension;
   }
 
   private async reloadExtension(extension: SNActionsExtension) {
     const extensionInContext = await this.application.actionsManager!.loadExtensionInContextOfItem(
       extension,
-      this.props.item
+      this.item
     );
     const extensions = this.state.extensions.map((ext: SNActionsExtension) => {
       if (extension.uuid === ext.uuid) {
-        return extensionInContext;
+        return extensionInContext!;
       }
       return ext;
     });

app/assets/templates/directives/actions-menu.pug

@@ -7,23 +7,20 @@
       target='blank'
       )
       menu-row(label="'Download Actions'")
-    div(ng-if='self.loadingExtensions')
-      .sk-menu-panel-header
-        .sk-menu-panel-column
-          .sk-menu-panel-header-title Loading...
-          .sk-spinner.small.loading
     div(ng-repeat='extension in self.state.extensions track by extension.uuid')
       .sk-menu-panel-header(
         ng-click='self.updateExtension(extension, { hidden: !extension.hidden }); $event.stopPropagation();'
         )
         .sk-menu-panel-column
           .sk-menu-panel-header-title {{extension.name}}
           div(ng-if='extension.hidden') …
+        div(ng-if='extension.loading')
+          .sk-spinner.small.loading
       menu-row(
         action='self.executeAction(action, extension)', 
         label='action.label', 
-        ng-if='!extension.hidden', 
-        ng-repeat='action in extension.actionsWithContextForItem(self.props.item) track by $index', 
+        ng-if='!extension.hidden && !extension.loading', 
+        ng-repeat='action in extension.actionsWithContextForItem(self.item) track by $index', 
         disabled='action.running'
         spinner-class="action.running ? 'info' : null", 
         sub-rows='action.subrows', 
@@ -36,5 +33,5 @@
       menu-row(
         faded='true', 
         label="'No Actions Available'", 
-        ng-if='extension.actionsWithContextForItem(self.props.item).length == 0'
+        ng-if='extension.actionsWithContextForItem(self.item).length === 0'
         )