Loader icon does not show (font-awesome icon "fa-circle-notch") #2702 (

#2703) (cherry picked from commit 6f83df6)
OHDSI · Jun 9, 2022 · 9f7ce88 · 9f7ce88
1 parent 27eceaf
commit 9f7ce88
Show file tree

Hide file tree

Showing 13 changed files with 30 additions and 30 deletions.
diff --git a/js/components/conceptset/utils.js b/js/components/conceptset/utils.js
@@ -162,7 +162,7 @@ define(['knockout','utils/CommonUtils', 'utils/Renderers', 'services/http','atla
 				const tooltip = d.ANCESTORS.map(d => commonUtils.escapeTooltip(d.CONCEPT_NAME)).join('<br/>');
 				return `<a data-bind="click: d => $parents[1].showAncestorsModal(d.CONCEPT_ID), tooltip: '${tooltip}'">${d.ANCESTORS.length}</a>`
 			} else {
-				return `<i class="fa fa-circle-o-notch fa-spin"></i>`;
+				return `<i class="fa fa-circle-notch fa-spin"></i>`;
 			}
 		};
 	}

diff --git a/js/components/conceptsetInclusionCount/conceptsetInclusionCount.html b/js/components/conceptsetInclusionCount/conceptsetInclusionCount.html
@@ -1,2 +1,2 @@
 <span class="badge" data-bind="if: !countLoading()"><span data-bind="text:inclusionCount()"></span></span>
-<span class="badge" data-bind="if: countLoading()"><i class="fa fa-circle-o-notch fa-spin"></i></span>
+<span class="badge" data-bind="if: countLoading()"><i class="fa fa-circle-notch fa-spin"></i></span>
diff --git a/js/components/evidence/components/negative-controls.js b/js/components/evidence/components/negative-controls.js
@@ -64,7 +64,7 @@ define(['knockout',
 			this.linkoutConditionConceptIds = [];
 			this.sourceIds = config.cemOptions.evidenceLinkoutSources;
 			this.recordCountClass = ko.pureComputed(() => {
-				return this.recordCountsRefreshing() ? "fa fa-circle-o-notch fa-spin fa-lg" : "fa fa-database fa-lg";
+				return this.recordCountsRefreshing() ? "fa fa-circle-notch fa-spin fa-lg" : "fa fa-database fa-lg";
 			});
 			this.newConceptSetName = ko.observable(this.conceptSet()
 				.name() + " - Candidate Controls");
@@ -333,11 +333,11 @@ define(['knockout',
 					this.recordCountsRefreshing(true);
 					$("#dtNegCtrlRC")
 						.toggleClass("fa-database")
-						.toggleClass("fa-circle-o-notch")
+						.toggleClass("fa-circle-notch")
 						.toggleClass("fa-spin");
 					$("#dtNegCtrlDRC")
 						.toggleClass("fa-database")
-						.toggleClass("fa-circle-o-notch")
+						.toggleClass("fa-circle-notch")
 						.toggleClass("fa-spin");
 					$(".ncRecordCount").each(function(index) { $(this).text("...") });
 					var negativeControls = this.negativeControls();

diff --git a/js/components/userbar/user-bar.html b/js/components/userbar/user-bar.html
@@ -1,7 +1,7 @@
 <div class="wrapperHeader">
 	<!-- ko if: loading -->
 		<div data-bind="css: classes('loading')">
-			<i class="fa fa-circle-o-notch fa-spin"></i>
+			<i class="fa fa-circle-notch fa-spin"></i>
 		</div>
 	<!-- /ko -->
 	<!-- ko ifnot: loading -->

diff --git a/js/extensions/bindings/datatableBinding.js b/js/extensions/bindings/datatableBinding.js
@@ -176,13 +176,13 @@ define([
 
 							} else { // more the data - slower the all-selection/deselection. add spinner
 								e.target.classList.remove('fa-check');
-								e.target.classList.add('fa-circle-o-notch', 'fa-spin');
+								e.target.classList.add('fa-circle-notch', 'fa-spin');
 								setTimeout(() => {
 									e.target.classList.toggle('selected');
 									c.selectAll($(element).DataTable().rows( { filter : 'applied'} ).data(),
 										e.target.classList.contains('selected'));
 									e.target.classList.add('fa-check');
-									e.target.classList.remove('fa-circle-o-notch', 'fa-spin');
+									e.target.classList.remove('fa-circle-notch', 'fa-spin');
 								}, 50);
 							}
 						});

diff --git a/js/pages/cohort-definitions/components/reporting/cost-utilization/report-manager.html b/js/pages/cohort-definitions/components/reporting/cost-utilization/report-manager.html
@@ -1,7 +1,7 @@
 <!-- ko if:$component.showSelectionArea -->
 <div class="wrapperTitle">
 	<span data-bind="if:!$component.loadingReport()"><i class="fa fa-chart-area"></i></span>
-	<span data-bind="if:$component.loadingReport()"><i class="fa fa-circle-o-notch fa-spin"></i></span> 
+	<span data-bind="if:$component.loadingReport()"><i class="fa fa-circle-notch fa-spin"></i></span>
 	<span data-bind="text: ko.i18n('cohortDefinitions.costUtilization.reportManager.reportManagerText_1', 'Cohort Reporting')"></span>
 </div>
 
@@ -374,7 +374,7 @@
 		</div>
 
 		<div class="loader" data-bind="if:$component.loadingReportDrilldown">
-			<i class="fa fa-circle-o-notch fa-spin"></i>
+			<i class="fa fa-circle-notch fa-spin"></i>
 			<span data-bind="text: ko.i18n('common.loading', 'Loading')"></span>
 		</div>
 		<div data-bind="if:$component.activeReportDrilldown">
@@ -548,7 +548,7 @@
 		</div>
 
 		<div class="loader" data-bind="if:$component.loadingReportDrilldown">
-			<i class="fa fa-circle-o-notch fa-spin"></i>
+			<i class="fa fa-circle-notch fa-spin"></i>
 			<span data-bind="text: ko.i18n('common.loading', 'Loading')"></span>
 		</div>
 		<div data-bind="if:$component.activeReportDrilldown">
@@ -640,7 +640,7 @@
 			</div>
 		</div>
 		<div class="loader" data-bind="if:$component.loadingReportDrilldown">
-			<i class="fa fa-circle-o-notch fa-spin"></i> <span data-bind="text: ko.i18n('common.loading', 'Loading')"></span>
+			<i class="fa fa-circle-notch fa-spin"></i> <span data-bind="text: ko.i18n('common.loading', 'Loading')"></span>
 		</div>
 		<div data-bind="if:$component.activeReportDrilldown">
 			<div id="procedureDrilldownScatterplotHeading" class="reportSectionHeading">
@@ -709,7 +709,7 @@
 			</div>
 		</div>
 		<div class="loader" data-bind="if:$component.loadingReportDrilldown">
-			<i class="fa fa-circle-o-notch fa-spin"></i>
+			<i class="fa fa-circle-notch fa-spin"></i>
 			<div class="treemap_legend">
 				<span data-bind="text: ko.i18n('common.loading', 'Loading')"></span>
 			</div>
@@ -807,7 +807,7 @@
 		</div>
 
 		<div class="loader" data-bind="if:$component.loadingReportDrilldown">
-			<i class="fa fa-circle-o-notch fa-spin"></i> <span data-bind="text: ko.i18n('common.loading', 'Loading')"></span>
+			<i class="fa fa-circle-notch fa-spin"></i> <span data-bind="text: ko.i18n('common.loading', 'Loading')"></span>
 		</div>
 
 		<div data-bind="if:$component.activeReportDrilldown">
@@ -902,7 +902,7 @@
 		</div>
 
 		<div class="loader" data-bind="if:$component.loadingReportDrilldown">
-			<i class="fa fa-circle-o-notch fa-spin"></i> <span data-bind="text: ko.i18n('common.loading', 'Loading')"></span>
+			<i class="fa fa-circle-notch fa-spin"></i> <span data-bind="text: ko.i18n('common.loading', 'Loading')"></span>
 		</div>
 		<div data-bind="if:$component.activeReportDrilldown">
 			<div class="heading" id="drugExposureDrilldown"></div>
@@ -1022,7 +1022,7 @@
 		</div>
 
 		<div class="loader" data-bind="if:$component.loadingReportDrilldown">
-			<i class="fa fa-circle-o-notch fa-spin"></i> <span data-bind="text: ko.i18n('common.loading', 'Loading')"></span>
+			<i class="fa fa-circle-notch fa-spin"></i> <span data-bind="text: ko.i18n('common.loading', 'Loading')"></span>
 		</div>
 		<div data-bind="if:$component.activeReportDrilldown">
 			<div class="heading" id="procedureDrilldown"></div>

diff --git a/js/pages/concept-sets/components/tabs/conceptset-compare.js b/js/pages/concept-sets/components/tabs/conceptset-compare.js
@@ -109,7 +109,7 @@ define([
       });
       this.compareLoading = ko.observable(false);
       this.compareLoadingClass = ko.pureComputed(() => {
-        return this.compareLoading() ? "fa fa-circle-o-notch fa-spin fa-lg" : "fa fa-question-circle fa-lg"
+        return this.compareLoading() ? "fa fa-circle-notch fa-spin fa-lg" : "fa fa-question-circle fa-lg"
       });
       this.compareNewConceptSetName = ko.observable(this.currentConceptSet().name() + ko.i18n('cs.browser.compare.saveFromComparisonNameTail', ' - From Comparison')());
       this.compareResultsColumns = [{
@@ -231,7 +231,7 @@ define([
       });
       this.recordCountsRefreshing = ko.observable(false);
       this.recordCountClass = ko.pureComputed(() => {
-        return this.recordCountsRefreshing() ? "fa fa-circle-o-notch fa-spin fa-lg" : "fa fa-database fa-lg";
+        return this.recordCountsRefreshing() ? "fa fa-circle-notch fa-spin fa-lg" : "fa fa-database fa-lg";
       });
       this.conceptSetLoading = ko.observable(false);
     }
@@ -344,11 +344,11 @@ define([
 				this.recordCountsRefreshing(true);
 				$("#dtConeptManagerRC")
 					.removeClass("fa-database")
-					.addClass("fa-circle-o-notch")
+					.addClass("fa-circle-notch")
 					.addClass("fa-spin");
 				$("#dtConeptManagerDRC")
 					.removeClass("fa-database")
-					.addClass("fa-circle-o-notch")
+					.addClass("fa-circle-notch")
 					.addClass("fa-spin");
 				var compareResults = this.compareResults();
 				var conceptIds = $.map(compareResults, function (o, n) {
@@ -360,11 +360,11 @@ define([
             this.recordCountsRefreshing(false);
 						$("#dtConeptManagerRC")
 							.addClass("fa-database")
-							.removeClass("fa-circle-o-notch")
+							.removeClass("fa-circle-notch")
 							.removeClass("fa-spin");
 						$("#dtConeptManagerDRC")
 							.addClass("fa-database")
-							.removeClass("fa-circle-o-notch")
+							.removeClass("fa-circle-notch")
 							.removeClass("fa-spin");
 					});
 			}

diff --git a/js/pages/concept-sets/conceptset-manager.html b/js/pages/concept-sets/conceptset-manager.html
@@ -58,7 +58,7 @@
   }">
   <div data-bind="css: classes('optimize-modal-content')">
     <div data-bind="if: optimizeLoading()">
-      <i class="fa fa-circle-o-notch fa-spin fa-lg"></i>
+      <i class="fa fa-circle-notch fa-spin fa-lg"></i>
       <span data-bind="text: ko.i18n('cs.manager.attemptingToFindMessage', 'Attempting to find an optimal definition for this concept set...')"></span>
     </div>
     <div data-bind="if: !optimizeLoading() && !optimizerFoundSomething()">

diff --git a/js/pages/configuration/configuration.js b/js/pages/configuration/configuration.js
@@ -251,7 +251,7 @@ define([
           break;
         case sourceApi.buttonCheckState.checking:
           buttonClass = 'btn-warning';
-          iconClass = 'fa-circle-o-notch fa-spin';
+          iconClass = 'fa-circle-notch fa-spin';
           break;
       }
       return {

diff --git a/js/pages/configuration/roles/role-details.html b/js/pages/configuration/roles/role-details.html
@@ -1,6 +1,6 @@
 <!-- ko if:loading -->
 <div class="wrapperTitle">
-    <i class="fa fa-circle-o-notch fa-spin"></i> <span data-bind="text: ko.i18n('common.loadingWithDots', 'Loading...')"></span>
+    <i class="fa fa-circle-notch fa-spin"></i> <span data-bind="text: ko.i18n('common.loadingWithDots', 'Loading...')"></span>
 </div>
 <!-- /ko -->
 <!-- ko ifnot:loading -->

diff --git a/js/pages/configuration/roles/roles.html b/js/pages/configuration/roles/roles.html
@@ -1,6 +1,6 @@
 <!-- ko if:loading -->
 <div class="wrapperTitle">
-    <i class="fa fa-circle-o-notch fa-spin"></i> <span data-bind="text: ko.i18n('common.loadingWithDots', 'Loading...')"></span>
+    <i class="fa fa-circle-notch fa-spin"></i> <span data-bind="text: ko.i18n('common.loadingWithDots', 'Loading...')"></span>
 </div>
 <!-- /ko -->
 <!-- ko ifnot:loading -->

diff --git a/js/pages/vocabulary/components/search.js b/js/pages/vocabulary/components/search.js
@@ -257,7 +257,7 @@ define([
                 });
                 this.recordCountsRefreshing = ko.observable(false);
                 this.recordCountClass = ko.pureComputed(() => {
-                    return this.recordCountsRefreshing() ? "fa fa-circle-o-notch fa-spin fa-lg" : "fa fa-database fa-lg";
+                    return this.recordCountsRefreshing() ? "fa fa-circle-notch fa-spin fa-lg" : "fa fa-database fa-lg";
                 });
 
 				this.isAuthenticated = authApi.isAuthenticated;
@@ -484,12 +484,12 @@ define([
 				if (enable) {
 					$('#' + column.elementId)
 						.removeClass(column.icon)
-						.addClass("fa-circle-o-notch")
+						.addClass("fa-circle-notch")
 						.addClass("fa-spin");
 				} else {
 					$('#' + column.elementId)
 						.addClass(column.icon)
-						.removeClass("fa-circle-o-notch")
+						.removeClass("fa-circle-notch")
 						.removeClass("fa-spin");
 				}
 			}

diff --git a/js/styles/atlas.css b/js/styles/atlas.css
@@ -884,7 +884,7 @@ i.fa.fa-refresh.fa-spin {
   padding-right: 0px;
 }
 
-.i.fa.fa-circle-o-notch.fa-spin {
+.i.fa.fa-circle-notch.fa-spin {
   font-size: .9em;
   padding-right: 0px;
 }