Learner Groups now use same loading style as Instructor Groups

packages/frontend/app/components/learner-groups/loading.hbs

@@ -0,0 +1,32 @@
+<table class="learner-groups-loading" ...attributes>
+  <thead>
+    <tr>
+      <th class="text-left" colspan="2">
+        {{t "general.learnerGroupTitle"}}
+      </th>
+      <th class="text-center hide-from-small-screen">
+        {{t "general.members"}}
+      </th>
+      <th class="text-center hide-from-small-screen">
+        {{t "general.subgroups"}}
+      </th>
+      <th class="text-right">
+        {{t "general.actions"}}
+      </th>
+    </tr>
+  </thead>
+  <tbody>
+    {{! template-lint-disable no-unused-block-params }}
+    {{#each (repeat @count) as |empty|}}
+      <tr class="is-loading">
+        <td class="text-left" colspan="2">{{truncate
+            (repeat (random 3 10) "ilios rocks")
+            100
+          }}</td>
+        <td class="text-center hide-from-small-screen">{{random 1 9}}</td>
+        <td class="text-center hide-from-small-screen">{{random 1 9}}</td>
+        <td class="text-right"></td>
+      </tr>
+    {{/each}}
+  </tbody>
+</table>

packages/frontend/app/components/learner-groups/root.hbs

@@ -122,7 +122,7 @@
           @setSortBy={{@setSortBy}}
         />
       {{else}}
-        <PulseLoader />
+        <LearnerGroups::Loading @count={{2}} />
       {{/if}}
     </div>
   </div>

packages/frontend/app/styles/components.scss

@@ -81,6 +81,7 @@
 @import "components/learner-group/members";
 
 @import "components/learner-groups/root";
+@import "components/learner-groups/loading";
 
 @import "components/instructor-group/courses";
 @import "components/instructor-group/header";

packages/frontend/app/styles/components/learner-groups/loading.scss

@@ -0,0 +1,5 @@
+@use "../../mixins" as m;
+
+.learner-groups-loading {
+  @include m.main-list-loading-table;
+}

packages/frontend/tests/acceptance/learnergroups-test.js

@@ -16,11 +16,51 @@ module('Acceptance | Learner Groups', function (hooks) {
   });
 
   test('visiting /learnergroups', async function (assert) {
-    assert.expect(1);
     await page.visit();
     assert.strictEqual(currentRouteName(), 'learner-groups');
   });
 
+  test('list groups', async function (assert) {
+    assert.expect(8);
+    this.server.createList('user', 11);
+    const program = this.server.create('program', { school: this.school });
+    const programYear = this.server.create('program-year', { program });
+    const cohort = this.server.create('cohort', { programYear });
+    const firstLearnerGroup = this.server.create('learner-group', {
+      cohort,
+      userIds: [2, 3, 4, 5, 6],
+    });
+    this.server.create('learner-group', {
+      cohort,
+    });
+    const firstChildGroup = this.server.create('learner-group', {
+      parent: firstLearnerGroup,
+      userIds: [7, 8],
+    });
+    this.server.create('learner-group', {
+      parent: firstLearnerGroup,
+      userIds: [9, 10],
+    });
+    this.server.create('learner-group', {
+      parent: firstChildGroup,
+      userIds: [11, 12],
+    });
+    this.server.createList('offering', 2, {
+      learnerGroups: [firstLearnerGroup],
+    });
+
+    await page.visit();
+    await percySnapshot(assert);
+    assert.strictEqual(page.headerTitle, 'Learner Groups (2)');
+    assert.strictEqual(page.list.items.length, 2);
+    assert.strictEqual(page.list.items[0].title, 'learner group 0');
+    assert.strictEqual(page.list.items[0].users, '5');
+    assert.strictEqual(page.list.items[0].children, '2');
+    assert.strictEqual(page.list.items[1].title, 'learner group 1');
+    assert.strictEqual(page.list.items[1].users, '0');
+    assert.strictEqual(page.list.items[1].children, '0');
+  });
+
   test('single option filters', async function (assert) {
     assert.expect(6);
     const program = this.server.create('program', { school: this.school });
@@ -93,47 +133,6 @@ module('Acceptance | Learner Groups', function (hooks) {
     assert.strictEqual(page.list.items[0].title, 'learner group 1');
   });
 
-  test('list groups', async function (assert) {
-    assert.expect(8);
-    this.server.createList('user', 11);
-    const program = this.server.create('program', { school: this.school });
-    const programYear = this.server.create('program-year', { program });
-    const cohort = this.server.create('cohort', { programYear });
-    const firstLearnerGroup = this.server.create('learner-group', {
-      cohort,
-      userIds: [2, 3, 4, 5, 6],
-    });
-    this.server.create('learner-group', {
-      cohort,
-    });
-    const firstChildGroup = this.server.create('learner-group', {
-      parent: firstLearnerGroup,
-      userIds: [7, 8],
-    });
-    this.server.create('learner-group', {
-      parent: firstLearnerGroup,
-      userIds: [9, 10],
-    });
-    this.server.create('learner-group', {
-      parent: firstChildGroup,
-      userIds: [11, 12],
-    });
-    this.server.createList('offering', 2, {
-      learnerGroups: [firstLearnerGroup],
-    });
-
-    await page.visit();
-    await percySnapshot(assert);
-    assert.strictEqual(page.headerTitle, 'Learner Groups (2)');
-    assert.strictEqual(page.list.items.length, 2);
-    assert.strictEqual(page.list.items[0].title, 'learner group 0');
-    assert.strictEqual(page.list.items[0].users, '5');
-    assert.strictEqual(page.list.items[0].children, '2');
-    assert.strictEqual(page.list.items[1].title, 'learner group 1');
-    assert.strictEqual(page.list.items[1].users, '0');
-    assert.strictEqual(page.list.items[1].children, '0');
-  });
-
   test('filters by title', async function (assert) {
     const program = this.server.create('program', { school: this.school });
     const programYear = this.server.create('program-year', { program });

packages/frontend/tests/integration/components/learner-groups/loading-test.js

@@ -0,0 +1,17 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { setupIntl } from 'ember-intl/test-support';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+import a11yAudit from 'ember-a11y-testing/test-support/audit';
+
+module('Integration | Component | learner-groups/loading', function (hooks) {
+  setupRenderingTest(hooks);
+  setupIntl(hooks, 'en-us');
+
+  test('it renders', async function (assert) {
+    await render(hbs`<LearnerGroups::Loading @count={{2}} />`);
+    assert.dom('tbody tr').exists({ count: 2 });
+    await a11yAudit(this.element);
+  });
+});