Merge pull request #8928 from michaelchadwick/6615-replace-loading-shimmer-and-text-sass-mixins

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

Author: stopfstedt

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/learner-groups.gjs

@@ -235,7 +235,10 @@ 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>
         <thead>

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,7 +228,10 @@ 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>
         <thead>

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

@@ -2,13 +2,13 @@
 
 .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;
   }
 }

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

@@ -1,15 +1,7 @@
 @use "../../ilios-common/mixins" as cm;
 
 .reports-curriculum-loading {
-  @include cm.loading-text;
-  @include cm.loading-shimmer;
-
-  select {
-    @include cm.loading-text;
-  }
-
   .reports-curriculum-header .input-buttons button.done {
-    @include cm.loading-text;
     cursor: default;
     background-color: var(--lightest-grey);
   }