replace loading-shimmer and loading-text mixins with equivalent classes

Author: michaelchadwick

packages/frontend/app/components/courses/loading-list.gjs

@@ -4,7 +4,7 @@ import random from 'ember-math-helpers/helpers/random';
 import truncate from 'ilios-common/helpers/truncate';
 import formatDate from 'ember-intl/helpers/format-date';
 <template>
-  <table class="courses-loading-list" aria-hidden="true">
+  <table class="courses-loading-list loading-shimmer loading-text" aria-hidden="true">
     <thead>
       <tr>
         <th colspan="8">

packages/frontend/app/components/courses/loading.gjs

@@ -33,7 +33,7 @@ export default class CoursesLoading extends Component {
         <div class="schoolsfilter">
           <FaIcon @icon="building-columns" @fixedWidth={{true}} />
           {{#if this.hasMoreThanOneSchool}}
-            <select aria-label={{t "general.filterBySchool"}} disabled>
+            <select aria-label={{t "general.filterBySchool"}} class="loading-text" disabled>
               {{#each (sortBy "title" this.schools) as |school|}}
                 <option>{{school.title}}</option>
               {{/each}}
@@ -42,7 +42,7 @@ export default class CoursesLoading extends Component {
         </div>
         <div class="yearsfilter">
           <FaIcon @icon="calendar" @fixedWidth={{true}} />
-          <select aria-label={{t "general.filterByYear"}} disabled></select>
+          <select aria-label={{t "general.filterByYear"}} class="loading-text" disabled></select>
         </div>
         <div class="titlefilter">
           <input

packages/frontend/app/components/reports/curriculum/header.gjs

@@ -179,7 +179,7 @@ export default class ReportsCurriculumHeader extends Component {
         {{else}}
           <button
             type="button"
-            class="done text"
+            class="done text loading-text"
             {{on "click" @runReport}}
             disabled={{not @countSelectedCourses}}
             id={{this.runButtonId}}

packages/frontend/app/components/reports/curriculum/learner-groups.gjs

@@ -235,9 +235,12 @@ export default class ReportsCurriculumLearnerGroupsComponent extends Component {
         ></progress>
       {{/if}}
     </div>
-    <div class="report-results {{if this.reportRunning 'running'}}" data-test-report-results>
+    <div
+      class="report-results{{if this.reportRunning ' loading-shimmer loading-text running'}}"
+      data-test-report-results
+    >
       <table>
-        <caption>{{t "general.resultsSummary"}}</caption>
+        <caption class="loading-text">{{t "general.resultsSummary"}}</caption>
         <thead>
           <tr>
             {{#if this.hasMultipleSchools}}
@@ -257,7 +260,7 @@ export default class ReportsCurriculumLearnerGroupsComponent extends Component {
                   <td>{{this.schoolTitlePlaceholder}}</td>
                 {{/if}}
                 <td>
-                  <LinkTo @route="course" @model={{c.id}}>
+                  <LinkTo @route="course" @model={{c.id}} class="loading-text">
                     {{c.title}}
                   </LinkTo>
                 </td>
@@ -273,7 +276,7 @@ export default class ReportsCurriculumLearnerGroupsComponent extends Component {
                   <td>{{o.schoolTitle}}</td>
                 {{/if}}
                 <td>
-                  <LinkTo @route="course" @model={{o.courseId}}>
+                  <LinkTo @route="course" @model={{o.courseId}} class="loading-text">
                     {{o.courseTitle}}
                   </LinkTo>
                 </td>

packages/frontend/app/components/reports/curriculum/loading.gjs

@@ -45,7 +45,7 @@ export default class ReportsCurriculumLoading extends Component {
   }
   <template>
     <div
-      class="reports-curriculum reports-curriculum-loading"
+      class="reports-curriculum reports-curriculum-loading loading-shimmer loading-text"
       data-test-reports-curriculum
       ...attributes
     >
@@ -61,7 +61,7 @@ export default class ReportsCurriculumLoading extends Component {
       <div class="reports-choose-course">
         <div class="schools">
           <FaIcon @icon="building-columns" />
-          <select aria-label={{t "general.filterBySchool"}} disabled>
+          <select aria-label={{t "general.filterBySchool"}} class="loading-text" disabled>
             <option>{{this.primarySchool.title}}</option>
           </select>
         </div>

packages/frontend/app/components/reports/curriculum/session-objectives.gjs

@@ -228,9 +228,12 @@ export default class ReportsCurriculumSessionObjectivesComponent extends Compone
         ></progress>
       {{/if}}
     </div>
-    <div class="report-results {{if this.reportRunning 'running'}}" data-test-report-results>
+    <div
+      class="report-results{{if this.reportRunning ' loading-shimmer loading-text running'}}"
+      data-test-report-results
+    >
       <table>
-        <caption>{{t "general.resultsSummary"}}</caption>
+        <caption class="loading-text">{{t "general.resultsSummary"}}</caption>
         <thead>
           <tr>
             {{#if this.hasMultipleSchools}}

packages/frontend/app/components/reports/list-loading.gjs

@@ -2,7 +2,7 @@ import t from 'ember-intl/helpers/t';
 import repeat from 'ilios-common/helpers/repeat';
 import FaIcon from 'ilios-common/components/fa-icon';
 <template>
-  <div class="reports-list-loading" ...attributes>
+  <div class="loading-shimmer loading-text" data-test-reports-list-loading ...attributes>
     <table>
       <thead>
         <tr>

packages/frontend/app/styles/components.scss

@@ -146,7 +146,6 @@
 @forward "components/reports/subject-header";
 @forward "components/reports/subjects";
 @forward "components/reports/subjects-list";
-@forward "components/reports/list-loading";
 
 @forward "components/school/session-type-visualize-vocabularies";
 @forward "components/school/session-type-visualize-vocabulary";
@@ -160,7 +159,6 @@
 @forward "components/courses/list-item";
 @forward "components/courses/new";
 @forward "components/courses/loading";
-@forward "components/courses/loading-list";
 
 @forward "components/assign-students/manager";
 @forward "components/assign-students/root";

packages/frontend/app/styles/components/courses/loading-list.scss

@@ -1,15 +1,12 @@
-@use "../../ilios-common/mixins" as cm;
-@use "../../ilios-common/colors" as c;
-
 .courses-loading {
   .toggle-mycourses .toggle-buttons label {
-    @include cm.loading-text;
     cursor: default;
     background-color: var(--lightest-grey);
+    color: transparent;
+    text-shadow: var(--very-transparent-black) 0 0 10px;
   }
 
   select {
-    @include cm.loading-text;
     cursor: default;
   }
 }