From df342d75cc00d6180712fdf77311319e5d7f68f0 Mon Sep 17 00:00:00 2001
From: Jonathan Johnson <jon.johnson@ucsf.edu>
Date: Wed, 3 Apr 2024 16:05:20 -0700
Subject: [PATCH] Replace async data loading in report subject components

---
 .../components/reports/subject/competency.hbs |  2 +-
 .../components/reports/subject/competency.js  | 26 ++++++++---------
 .../app/components/reports/subject/course.hbs |  2 +-
 .../app/components/reports/subject/course.js  | 28 +++++++++----------
 .../reports/subject/instructor-group.hbs      |  2 +-
 .../reports/subject/instructor-group.js       | 26 ++++++++---------
 .../components/reports/subject/instructor.hbs |  2 +-
 .../components/reports/subject/instructor.js  | 28 +++++++++----------
 .../reports/subject/learning-material.hbs     |  2 +-
 .../reports/subject/learning-material.js      | 26 ++++++++---------
 .../components/reports/subject/mesh-term.hbs  |  2 +-
 .../components/reports/subject/mesh-term.js   | 26 ++++++++---------
 .../reports/subject/program-year.hbs          |  2 +-
 .../reports/subject/program-year.js           | 28 +++++++++----------
 .../components/reports/subject/program.hbs    |  2 +-
 .../app/components/reports/subject/program.js | 28 +++++++++----------
 .../reports/subject/session-type.hbs          |  2 +-
 .../reports/subject/session-type.js           | 26 ++++++++---------
 .../components/reports/subject/session.hbs    |  2 +-
 .../app/components/reports/subject/session.js | 28 +++++++++----------
 .../app/components/reports/subject/term.hbs   |  2 +-
 .../app/components/reports/subject/term.js    | 26 ++++++++---------
 22 files changed, 157 insertions(+), 161 deletions(-)

diff --git a/packages/frontend/app/components/reports/subject/competency.hbs b/packages/frontend/app/components/reports/subject/competency.hbs
index 3a4e289366..10f51e04ad 100644
--- a/packages/frontend/app/components/reports/subject/competency.hbs
+++ b/packages/frontend/app/components/reports/subject/competency.hbs
@@ -1,5 +1,5 @@
 <div data-test-reports-subject-competency>
-  {{#if this.finishedLoading}}
+  {{#if this.data.isResolved}}
     <ul class="report-results" data-test-results>
       {{#each this.sortedData as |title|}}
         <li>
diff --git a/packages/frontend/app/components/reports/subject/competency.js b/packages/frontend/app/components/reports/subject/competency.js
index 90cdac5e2a..b426cd595c 100644
--- a/packages/frontend/app/components/reports/subject/competency.js
+++ b/packages/frontend/app/components/reports/subject/competency.js
@@ -1,28 +1,28 @@
 import Component from '@glimmer/component';
-import { use } from 'ember-could-get-used-to-this';
-import AsyncProcess from 'ilios-common/classes/async-process';
 import { service } from '@ember/service';
 import { pluralize } from 'ember-inflector';
 import { camelize } from '@ember/string';
+import { TrackedAsyncData } from 'ember-async-data';
+import { cached } from '@glimmer/tracking';
 
 export default class ReportsSubjectCompetencyComponent extends Component {
   @service graphql;
   @service intl;
 
-  @use data = new AsyncProcess(() => [
-    this.getReportResults.bind(this),
-    this.args.subject,
-    this.args.prepositionalObject,
-    this.args.prepositionalObjectTableRowId,
-    this.args.school,
-  ]);
-
-  get finishedLoading() {
-    return Array.isArray(this.data);
+  @cached
+  get data() {
+    return new TrackedAsyncData(
+      this.getReportResults(
+        this.args.subject,
+        this.args.prepositionalObject,
+        this.args.prepositionalObjectTableRowId,
+        this.args.school,
+      ),
+    );
   }
 
   get sortedData() {
-    return this.data?.sort((a, b) => {
+    return this.data.value.sort((a, b) => {
       return a.localeCompare(b, this.intl.primaryLocale);
     });
   }
diff --git a/packages/frontend/app/components/reports/subject/course.hbs b/packages/frontend/app/components/reports/subject/course.hbs
index 31d7b95c61..3bb7ba1344 100644
--- a/packages/frontend/app/components/reports/subject/course.hbs
+++ b/packages/frontend/app/components/reports/subject/course.hbs
@@ -1,5 +1,5 @@
 <div data-test-reports-subject-course>
-  {{#if this.finishedLoading}}
+  {{#if this.data.isResolved}}
     <ul class="report-results" data-test-results>
       {{#each this.sortedCourses as |course|}}
         <li>
diff --git a/packages/frontend/app/components/reports/subject/course.js b/packages/frontend/app/components/reports/subject/course.js
index c6c3ba2b11..6078cfef07 100644
--- a/packages/frontend/app/components/reports/subject/course.js
+++ b/packages/frontend/app/components/reports/subject/course.js
@@ -1,8 +1,6 @@
 import Component from '@glimmer/component';
 import { filterBy } from 'ilios-common/utils/array-helpers';
 import { sortBy } from 'ilios-common/utils/array-helpers';
-import { use } from 'ember-could-get-used-to-this';
-import AsyncProcess from 'ilios-common/classes/async-process';
 import { TrackedAsyncData } from 'ember-async-data';
 import { cached } from '@glimmer/tracking';
 import { service } from '@ember/service';
@@ -18,13 +16,17 @@ export default class ReportsSubjectCourseComponent extends Component {
     this.iliosConfig.itemFromConfig('academicYearCrossesCalendarYearBoundaries'),
   );
 
-  @use data = new AsyncProcess(() => [
-    this.getReportResults.bind(this),
-    this.args.subject,
-    this.args.prepositionalObject,
-    this.args.prepositionalObjectTableRowId,
-    this.args.school,
-  ]);
+  @cached
+  get data() {
+    return new TrackedAsyncData(
+      this.getReportResults(
+        this.args.subject,
+        this.args.prepositionalObject,
+        this.args.prepositionalObjectTableRowId,
+        this.args.school,
+      ),
+    );
+  }
 
   @cached
   get academicYearCrossesCalendarYearBoundaries() {
@@ -41,20 +43,16 @@ export default class ReportsSubjectCourseComponent extends Component {
 
   get filteredCourses() {
     if (this.args.year) {
-      return filterBy(this.data, 'year', Number(this.args.year));
+      return filterBy(this.data.value, 'year', Number(this.args.year));
     }
 
-    return this.data;
+    return this.data.value;
   }
 
   get sortedCourses() {
     return sortBy(this.filteredCourses, ['year', 'title']);
   }
 
-  get finishedLoading() {
-    return Array.isArray(this.data);
-  }
-
   async getGraphQLFilters(prepositionalObject, prepositionalObjectTableRowId, school) {
     let rhett = [];
     if (school) {
diff --git a/packages/frontend/app/components/reports/subject/instructor-group.hbs b/packages/frontend/app/components/reports/subject/instructor-group.hbs
index b645ffadfc..7523c57d58 100644
--- a/packages/frontend/app/components/reports/subject/instructor-group.hbs
+++ b/packages/frontend/app/components/reports/subject/instructor-group.hbs
@@ -1,5 +1,5 @@
 <div data-test-reports-subject-instructor-group>
-  {{#if this.finishedLoading}}
+  {{#if this.data.isResolved}}
     <ul class="report-results" data-test-results>
       {{#each this.sortedData as |title|}}
         <li>
diff --git a/packages/frontend/app/components/reports/subject/instructor-group.js b/packages/frontend/app/components/reports/subject/instructor-group.js
index 37910e8bc9..302d106bef 100644
--- a/packages/frontend/app/components/reports/subject/instructor-group.js
+++ b/packages/frontend/app/components/reports/subject/instructor-group.js
@@ -1,6 +1,6 @@
 import Component from '@glimmer/component';
-import { use } from 'ember-could-get-used-to-this';
-import AsyncProcess from 'ilios-common/classes/async-process';
+import { TrackedAsyncData } from 'ember-async-data';
+import { cached } from '@glimmer/tracking';
 import { service } from '@ember/service';
 import { pluralize } from 'ember-inflector';
 import { camelize } from '@ember/string';
@@ -9,20 +9,20 @@ export default class ReportsSubjectInstructorGroupComponent extends Component {
   @service graphql;
   @service intl;
 
-  @use data = new AsyncProcess(() => [
-    this.getReportResults.bind(this),
-    this.args.subject,
-    this.args.prepositionalObject,
-    this.args.prepositionalObjectTableRowId,
-    this.args.school,
-  ]);
-
-  get finishedLoading() {
-    return Array.isArray(this.data);
+  @cached
+  get data() {
+    return new TrackedAsyncData(
+      this.getReportResults(
+        this.args.subject,
+        this.args.prepositionalObject,
+        this.args.prepositionalObjectTableRowId,
+        this.args.school,
+      ),
+    );
   }
 
   get sortedData() {
-    return this.data?.sort((a, b) => {
+    return this.data.value.sort((a, b) => {
       return a.localeCompare(b, this.intl.primaryLocale);
     });
   }
diff --git a/packages/frontend/app/components/reports/subject/instructor.hbs b/packages/frontend/app/components/reports/subject/instructor.hbs
index 7c99451d5a..9ae04d992b 100644
--- a/packages/frontend/app/components/reports/subject/instructor.hbs
+++ b/packages/frontend/app/components/reports/subject/instructor.hbs
@@ -1,5 +1,5 @@
 <div data-test-reports-subject-instructor>
-  {{#if this.finishedLoading}}
+  {{#if this.data.isResolved}}
     <ul class="report-results" data-test-results>
       {{#each this.sortedResults as |name|}}
         <li>
diff --git a/packages/frontend/app/components/reports/subject/instructor.js b/packages/frontend/app/components/reports/subject/instructor.js
index a7249bd031..a654c75c86 100644
--- a/packages/frontend/app/components/reports/subject/instructor.js
+++ b/packages/frontend/app/components/reports/subject/instructor.js
@@ -1,6 +1,6 @@
 import Component from '@glimmer/component';
-import { use } from 'ember-could-get-used-to-this';
-import AsyncProcess from 'ilios-common/classes/async-process';
+import { TrackedAsyncData } from 'ember-async-data';
+import { cached } from '@glimmer/tracking';
 import { service } from '@ember/service';
 import { pluralize } from 'ember-inflector';
 import { camelize, capitalize } from '@ember/string';
@@ -9,26 +9,26 @@ export default class ReportsSubjectInstructorComponent extends Component {
   @service graphql;
   @service intl;
 
-  @use data = new AsyncProcess(() => [
-    this.getReportResults.bind(this),
-    this.args.subject,
-    this.args.prepositionalObject,
-    this.args.prepositionalObjectTableRowId,
-    this.args.school,
-  ]);
-
-  get finishedLoading() {
-    return Array.isArray(this.data);
+  @cached
+  get data() {
+    return new TrackedAsyncData(
+      this.getReportResults(
+        this.args.subject,
+        this.args.prepositionalObject,
+        this.args.prepositionalObjectTableRowId,
+        this.args.school,
+      ),
+    );
   }
 
   get sortedResults() {
-    return this.mappedResults?.sort((a, b) => {
+    return this.mappedResults.sort((a, b) => {
       return a.localeCompare(b, this.intl.primaryLocale);
     });
   }
 
   get mappedResults() {
-    return this.data?.map(({ firstName, middleName, lastName, displayName }) => {
+    return this.data.value.map(({ firstName, middleName, lastName, displayName }) => {
       if (displayName) {
         return displayName;
       }
diff --git a/packages/frontend/app/components/reports/subject/learning-material.hbs b/packages/frontend/app/components/reports/subject/learning-material.hbs
index a8e8399f76..991cd6c0e9 100644
--- a/packages/frontend/app/components/reports/subject/learning-material.hbs
+++ b/packages/frontend/app/components/reports/subject/learning-material.hbs
@@ -1,5 +1,5 @@
 <div data-test-reports-subject-learning-material>
-  {{#if this.finishedLoading}}
+  {{#if this.data.isResolved}}
     <ul class="report-results" data-test-results>
       {{#each this.sortedData as |title|}}
         <li>
diff --git a/packages/frontend/app/components/reports/subject/learning-material.js b/packages/frontend/app/components/reports/subject/learning-material.js
index 111bb8a4e3..681ffdc8ca 100644
--- a/packages/frontend/app/components/reports/subject/learning-material.js
+++ b/packages/frontend/app/components/reports/subject/learning-material.js
@@ -1,6 +1,6 @@
 import Component from '@glimmer/component';
-import { use } from 'ember-could-get-used-to-this';
-import AsyncProcess from 'ilios-common/classes/async-process';
+import { TrackedAsyncData } from 'ember-async-data';
+import { cached } from '@glimmer/tracking';
 import { service } from '@ember/service';
 import { pluralize } from 'ember-inflector';
 import { camelize } from '@ember/string';
@@ -9,20 +9,20 @@ export default class ReportsSubjectLearningMaterialComponent extends Component {
   @service graphql;
   @service intl;
 
-  @use data = new AsyncProcess(() => [
-    this.getReportResults.bind(this),
-    this.args.subject,
-    this.args.prepositionalObject,
-    this.args.prepositionalObjectTableRowId,
-    this.args.school,
-  ]);
-
-  get finishedLoading() {
-    return Array.isArray(this.data);
+  @cached
+  get data() {
+    return new TrackedAsyncData(
+      this.getReportResults(
+        this.args.subject,
+        this.args.prepositionalObject,
+        this.args.prepositionalObjectTableRowId,
+        this.args.school,
+      ),
+    );
   }
 
   get sortedData() {
-    return this.data?.sort((a, b) => {
+    return this.data.value.sort((a, b) => {
       return a.localeCompare(b, this.intl.primaryLocale);
     });
   }
diff --git a/packages/frontend/app/components/reports/subject/mesh-term.hbs b/packages/frontend/app/components/reports/subject/mesh-term.hbs
index 422427519d..9a5e17795b 100644
--- a/packages/frontend/app/components/reports/subject/mesh-term.hbs
+++ b/packages/frontend/app/components/reports/subject/mesh-term.hbs
@@ -1,5 +1,5 @@
 <div data-test-reports-subject-mesh-term>
-  {{#if this.finishedLoading}}
+  {{#if this.data.isResolved}}
     <ul class="report-results" data-test-results>
       {{#each this.sortedData as |name|}}
         <li>
diff --git a/packages/frontend/app/components/reports/subject/mesh-term.js b/packages/frontend/app/components/reports/subject/mesh-term.js
index a25299e5b0..1a2ec1a84a 100644
--- a/packages/frontend/app/components/reports/subject/mesh-term.js
+++ b/packages/frontend/app/components/reports/subject/mesh-term.js
@@ -1,6 +1,6 @@
 import Component from '@glimmer/component';
-import { use } from 'ember-could-get-used-to-this';
-import AsyncProcess from 'ilios-common/classes/async-process';
+import { TrackedAsyncData } from 'ember-async-data';
+import { cached } from '@glimmer/tracking';
 import { service } from '@ember/service';
 import { pluralize } from 'ember-inflector';
 import { camelize } from '@ember/string';
@@ -9,20 +9,20 @@ export default class ReportsSubjectMeshTermComponent extends Component {
   @service graphql;
   @service intl;
 
-  @use data = new AsyncProcess(() => [
-    this.getReportResults.bind(this),
-    this.args.subject,
-    this.args.prepositionalObject,
-    this.args.prepositionalObjectTableRowId,
-    this.args.school,
-  ]);
-
-  get finishedLoading() {
-    return Array.isArray(this.data);
+  @cached
+  get data() {
+    return new TrackedAsyncData(
+      this.getReportResults(
+        this.args.subject,
+        this.args.prepositionalObject,
+        this.args.prepositionalObjectTableRowId,
+        this.args.school,
+      ),
+    );
   }
 
   get sortedData() {
-    return this.data?.sort((a, b) => {
+    return this.data.value.sort((a, b) => {
       return a.localeCompare(b, this.intl.primaryLocale);
     });
   }
diff --git a/packages/frontend/app/components/reports/subject/program-year.hbs b/packages/frontend/app/components/reports/subject/program-year.hbs
index 519e906896..eaed4488c4 100644
--- a/packages/frontend/app/components/reports/subject/program-year.hbs
+++ b/packages/frontend/app/components/reports/subject/program-year.hbs
@@ -1,5 +1,5 @@
 <div data-test-reports-subject-program-year>
-  {{#if this.finishedLoading}}
+  {{#if this.data.isResolved}}
     <ul class="report-results" data-test-results>
       {{#each this.sortedProgramYears as |obj|}}
         <li>
diff --git a/packages/frontend/app/components/reports/subject/program-year.js b/packages/frontend/app/components/reports/subject/program-year.js
index 6c259cd454..f8fd34e788 100644
--- a/packages/frontend/app/components/reports/subject/program-year.js
+++ b/packages/frontend/app/components/reports/subject/program-year.js
@@ -1,7 +1,7 @@
 import Component from '@glimmer/component';
 import { sortBy } from 'ilios-common/utils/array-helpers';
-import { use } from 'ember-could-get-used-to-this';
-import AsyncProcess from 'ilios-common/classes/async-process';
+import { TrackedAsyncData } from 'ember-async-data';
+import { cached } from '@glimmer/tracking';
 import { service } from '@ember/service';
 import { pluralize } from 'ember-inflector';
 import { camelize } from '@ember/string';
@@ -10,13 +10,17 @@ export default class ReportsSubjectProgramYearComponent extends Component {
   @service graphql;
   @service currentUser;
 
-  @use data = new AsyncProcess(() => [
-    this.getReportResults.bind(this),
-    this.args.subject,
-    this.args.prepositionalObject,
-    this.args.prepositionalObjectTableRowId,
-    this.args.school,
-  ]);
+  @cached
+  get data() {
+    return new TrackedAsyncData(
+      this.getReportResults(
+        this.args.subject,
+        this.args.prepositionalObject,
+        this.args.prepositionalObjectTableRowId,
+        this.args.school,
+      ),
+    );
+  }
 
   get canView() {
     return this.currentUser.performsNonLearnerFunction;
@@ -27,11 +31,7 @@ export default class ReportsSubjectProgramYearComponent extends Component {
   }
 
   get sortedProgramYears() {
-    return sortBy(this.data, ['program.school.title', 'program.title', 'classOfYear']);
-  }
-
-  get finishedLoading() {
-    return Array.isArray(this.data);
+    return sortBy(this.data.value, ['program.school.title', 'program.title', 'classOfYear']);
   }
 
   async getReportResults(subject, prepositionalObject, prepositionalObjectTableRowId, school) {
diff --git a/packages/frontend/app/components/reports/subject/program.hbs b/packages/frontend/app/components/reports/subject/program.hbs
index 1f3e316cd8..109c7e83f3 100644
--- a/packages/frontend/app/components/reports/subject/program.hbs
+++ b/packages/frontend/app/components/reports/subject/program.hbs
@@ -1,5 +1,5 @@
 <div data-test-reports-subject-program>
-  {{#if this.finishedLoading}}
+  {{#if this.data.isResolved}}
     <ul class="report-results" data-test-results>
       {{#each this.sortedPrograms as |program|}}
         <li>
diff --git a/packages/frontend/app/components/reports/subject/program.js b/packages/frontend/app/components/reports/subject/program.js
index ef797b4632..48f3613440 100644
--- a/packages/frontend/app/components/reports/subject/program.js
+++ b/packages/frontend/app/components/reports/subject/program.js
@@ -1,7 +1,7 @@
 import Component from '@glimmer/component';
 import { sortBy } from 'ilios-common/utils/array-helpers';
-import { use } from 'ember-could-get-used-to-this';
-import AsyncProcess from 'ilios-common/classes/async-process';
+import { TrackedAsyncData } from 'ember-async-data';
+import { cached } from '@glimmer/tracking';
 import { service } from '@ember/service';
 import { pluralize } from 'ember-inflector';
 import { camelize } from '@ember/string';
@@ -10,13 +10,17 @@ export default class ReportsSubjectProgramComponent extends Component {
   @service graphql;
   @service currentUser;
 
-  @use data = new AsyncProcess(() => [
-    this.getReportResults.bind(this),
-    this.args.subject,
-    this.args.prepositionalObject,
-    this.args.prepositionalObjectTableRowId,
-    this.args.school,
-  ]);
+  @cached
+  get data() {
+    return new TrackedAsyncData(
+      this.getReportResults(
+        this.args.subject,
+        this.args.prepositionalObject,
+        this.args.prepositionalObjectTableRowId,
+        this.args.school,
+      ),
+    );
+  }
 
   get canView() {
     return this.currentUser.performsNonLearnerFunction;
@@ -27,11 +31,7 @@ export default class ReportsSubjectProgramComponent extends Component {
   }
 
   get sortedPrograms() {
-    return sortBy(this.data, ['school.title', 'title']);
-  }
-
-  get finishedLoading() {
-    return Array.isArray(this.data);
+    return sortBy(this.data.value, ['school.title', 'title']);
   }
 
   async getReportResults(subject, prepositionalObject, prepositionalObjectTableRowId, school) {
diff --git a/packages/frontend/app/components/reports/subject/session-type.hbs b/packages/frontend/app/components/reports/subject/session-type.hbs
index 3f39e699ef..5ebf204b0f 100644
--- a/packages/frontend/app/components/reports/subject/session-type.hbs
+++ b/packages/frontend/app/components/reports/subject/session-type.hbs
@@ -1,5 +1,5 @@
 <div data-test-reports-subject-session-type>
-  {{#if this.finishedLoading}}
+  {{#if this.data.isResolved}}
     <ul class="report-results" data-test-results>
       {{#each this.sortedData as |title|}}
         <li>
diff --git a/packages/frontend/app/components/reports/subject/session-type.js b/packages/frontend/app/components/reports/subject/session-type.js
index 2ac5507330..f6783f2722 100644
--- a/packages/frontend/app/components/reports/subject/session-type.js
+++ b/packages/frontend/app/components/reports/subject/session-type.js
@@ -1,6 +1,6 @@
 import Component from '@glimmer/component';
-import { use } from 'ember-could-get-used-to-this';
-import AsyncProcess from 'ilios-common/classes/async-process';
+import { TrackedAsyncData } from 'ember-async-data';
+import { cached } from '@glimmer/tracking';
 import { service } from '@ember/service';
 import { pluralize } from 'ember-inflector';
 import { camelize } from '@ember/string';
@@ -9,20 +9,20 @@ export default class ReportsSubjectSessionTypeComponent extends Component {
   @service graphql;
   @service intl;
 
-  @use data = new AsyncProcess(() => [
-    this.getReportResults.bind(this),
-    this.args.subject,
-    this.args.prepositionalObject,
-    this.args.prepositionalObjectTableRowId,
-    this.args.school,
-  ]);
-
-  get finishedLoading() {
-    return Array.isArray(this.data);
+  @cached
+  get data() {
+    return new TrackedAsyncData(
+      this.getReportResults(
+        this.args.subject,
+        this.args.prepositionalObject,
+        this.args.prepositionalObjectTableRowId,
+        this.args.school,
+      ),
+    );
   }
 
   get sortedData() {
-    return this.data?.sort((a, b) => {
+    return this.data.value.sort((a, b) => {
       return a.localeCompare(b, this.intl.primaryLocale);
     });
   }
diff --git a/packages/frontend/app/components/reports/subject/session.hbs b/packages/frontend/app/components/reports/subject/session.hbs
index 0e35c8caed..4774321cc0 100644
--- a/packages/frontend/app/components/reports/subject/session.hbs
+++ b/packages/frontend/app/components/reports/subject/session.hbs
@@ -1,5 +1,5 @@
 <div data-test-reports-subject-session>
-  {{#if this.finishedLoading}}
+  {{#if this.data.isResolved}}
     <ul class="report-results" data-test-results>
       {{#each this.sortedSessions as |obj|}}
         <li>
diff --git a/packages/frontend/app/components/reports/subject/session.js b/packages/frontend/app/components/reports/subject/session.js
index d992e525bf..72c79e5a62 100644
--- a/packages/frontend/app/components/reports/subject/session.js
+++ b/packages/frontend/app/components/reports/subject/session.js
@@ -1,8 +1,6 @@
 import Component from '@glimmer/component';
 import { filterBy } from 'ilios-common/utils/array-helpers';
 import { sortBy } from 'ilios-common/utils/array-helpers';
-import { use } from 'ember-could-get-used-to-this';
-import AsyncProcess from 'ilios-common/classes/async-process';
 import { TrackedAsyncData } from 'ember-async-data';
 import { cached } from '@glimmer/tracking';
 import { service } from '@ember/service';
@@ -18,13 +16,17 @@ export default class ReportsSubjectSessionComponent extends Component {
     this.iliosConfig.itemFromConfig('academicYearCrossesCalendarYearBoundaries'),
   );
 
-  @use data = new AsyncProcess(() => [
-    this.getReportResults.bind(this),
-    this.args.subject,
-    this.args.prepositionalObject,
-    this.args.prepositionalObjectTableRowId,
-    this.args.school,
-  ]);
+  @cached
+  get data() {
+    return new TrackedAsyncData(
+      this.getReportResults(
+        this.args.subject,
+        this.args.prepositionalObject,
+        this.args.prepositionalObjectTableRowId,
+        this.args.school,
+      ),
+    );
+  }
 
   @cached
   get academicYearCrossesCalendarYearBoundaries() {
@@ -41,20 +43,16 @@ export default class ReportsSubjectSessionComponent extends Component {
 
   get filteredSessions() {
     if (this.args.year) {
-      return filterBy(this.data, 'year', Number(this.args.year));
+      return filterBy(this.data.value, 'year', Number(this.args.year));
     }
 
-    return this.data;
+    return this.data.value;
   }
 
   get sortedSessions() {
     return sortBy(this.filteredSessions, ['year', 'courseTitle', 'title']);
   }
 
-  get finishedLoading() {
-    return Array.isArray(this.data);
-  }
-
   async getGraphQLFilters(prepositionalObject, prepositionalObjectTableRowId, school) {
     const rhett = [];
     if (school) {
diff --git a/packages/frontend/app/components/reports/subject/term.hbs b/packages/frontend/app/components/reports/subject/term.hbs
index abc378b0c0..aa8673897f 100644
--- a/packages/frontend/app/components/reports/subject/term.hbs
+++ b/packages/frontend/app/components/reports/subject/term.hbs
@@ -1,5 +1,5 @@
 <div data-test-reports-subject-term>
-  {{#if this.finishedLoading}}
+  {{#if this.data.isResolved}}
     <ul class="report-results" data-test-results>
       {{#each this.sortedData as |obj|}}
         <li>
diff --git a/packages/frontend/app/components/reports/subject/term.js b/packages/frontend/app/components/reports/subject/term.js
index d304eacc4e..79345d1a51 100644
--- a/packages/frontend/app/components/reports/subject/term.js
+++ b/packages/frontend/app/components/reports/subject/term.js
@@ -1,6 +1,6 @@
 import Component from '@glimmer/component';
-import { use } from 'ember-could-get-used-to-this';
-import AsyncProcess from 'ilios-common/classes/async-process';
+import { TrackedAsyncData } from 'ember-async-data';
+import { cached } from '@glimmer/tracking';
 import { service } from '@ember/service';
 import { pluralize } from 'ember-inflector';
 import { camelize } from '@ember/string';
@@ -9,20 +9,20 @@ import { sortBy } from 'ilios-common/utils/array-helpers';
 export default class ReportsSubjectTermComponent extends Component {
   @service graphql;
 
-  @use data = new AsyncProcess(() => [
-    this.getReportResults.bind(this),
-    this.args.subject,
-    this.args.prepositionalObject,
-    this.args.prepositionalObjectTableRowId,
-    this.args.school,
-  ]);
-
-  get finishedLoading() {
-    return Array.isArray(this.data);
+  @cached
+  get data() {
+    return new TrackedAsyncData(
+      this.getReportResults(
+        this.args.subject,
+        this.args.prepositionalObject,
+        this.args.prepositionalObjectTableRowId,
+        this.args.school,
+      ),
+    );
   }
 
   get sortedData() {
-    return sortBy(this.data, ['vocabulary.title', 'title']);
+    return sortBy(this.data.value, ['vocabulary.title', 'title']);
   }
 
   async getReportResults(subject, prepositionalObject, prepositionalObjectTableRowId, school) {