switch to resouce-based loading process.

this realigns this component with Program::LeadershipExpanded.

packages/frontend/app/components/program-year/leadership-expanded.hbs

@@ -1,11 +1,7 @@
 <div
   class="program-year-leadership-expanded"
   data-test-program-year-leadership-expanded
-  {{did-insert (perform this.load) @programYear}}
 >
-{{#if this.load.isRunning}}
-    <LoadingSpinner />
-{{else}}
   <div class="program-year-leadership-expanded-header">
     {{#if @isManaging}}
       <h3 class="title" data-test-title>
@@ -31,11 +27,11 @@
             @spin={{this.save.isRunning}}
           />
         </button>
-        <button type="button" class="bigcancel" {{on "click" (perform this.cancel)}} data-test-cancel>
+        <button type="button" class="bigcancel" {{on "click" this.close}} data-test-cancel>
           <FaIcon @icon="arrow-rotate-left" />
         </button>
       {{else if @editable}}
-        <button type="button" {{on "click" this.manage}} data-test-manage>
+        <button type="button" {{on "click" (fn @setIsManaging true)}} data-test-manage>
           {{t "general.manageLeadership"}}
         </button>
       {{/if}}
@@ -58,5 +54,4 @@
       />
     {{/if}}
   </div>
-{{/if}}
 </div>

packages/frontend/app/components/program-year/leadership-expanded.js

@@ -1,48 +1,62 @@
 import Component from '@glimmer/component';
-import { dropTask, timeout } from 'ember-concurrency';
+import { dropTask } from 'ember-concurrency';
 import { tracked } from '@glimmer/tracking';
+import { TrackedAsyncData } from 'ember-async-data';
+import { cached } from '@glimmer/tracking';
 import { action } from '@ember/object';
 
 export default class ProgramYearLeadershipExpandedComponent extends Component {
-  @tracked directors = [];
+  @tracked directorsToAdd = [];
+  @tracked directorsToRemove = [];
 
+  @cached
   get count() {
     return this.directors.length;
   }
 
+  @cached
+  get programYearDirectors() {
+    return new TrackedAsyncData(this.args.programYear.directors);
+  }
+
+  @cached
+  get directors() {
+    const directors = this.programYearDirectors.isResolved
+      ? this.programYearDirectors.value.slice()
+      : [];
+    return [...directors, ...this.directorsToAdd].filter(
+      (user) => !this.directorsToRemove.includes(user),
+    );
+  }
+
+  resetBuffers() {
+    this.directorsToAdd = [];
+    this.directorsToRemove = [];
+  }
+
   @action
   addDirector(user) {
-    this.directors = [...this.directors, user];
+    this.directorsToAdd = [...this.directorsToAdd, user];
+    this.directorsToRemove = this.directorsToRemove.filter((d) => d !== user);
   }
 
   @action
   removeDirector(user) {
-    this.directors = this.directors.filter((obj) => obj !== user);
+    this.directorsToRemove = [...this.directorsToRemove, user];
+    this.directorsToAdd = this.directorsToAdd.filter((d) => d !== user);
   }
 
   @action
-  manage() {
-    this.args.setIsManaging(true);
-  }
-
-  async setBuffers() {
-    this.directors = (await this.args.programYear.directors).slice();
+  close() {
+    this.resetBuffers();
+    this.args.setIsManaging(false);
   }
 
-  load = dropTask(async () => {
-    await this.setBuffers();
-  });
-
   save = dropTask(async () => {
-    await timeout(10);
     this.args.programYear.set('directors', this.directors);
     this.args.expand();
+    this.resetBuffers();
     await this.args.programYear.save();
     this.args.setIsManaging(false);
   });
-
-  cancel = dropTask(async () => {
-    await this.setBuffers();
-    this.args.setIsManaging(false);
-  });
 }