Fix loading icon in activity calendar

The loading icon/spinner wasn't visible, as the `spinner` CSS class was
removed in https://gitlab.com/gitlab-org/gitlab/-/merge_requests/58706.

Changelog: fixed

app/assets/javascripts/pages/users/activity_calendar.js

@@ -7,6 +7,7 @@ import axios from '~/lib/utils/axios_utils';
 import { getDayName, getDayDifference } from '~/lib/utils/datetime_utility';
 import { formatDate } from '~/lib/utils/datetime/date_format_utility';
 import { n__, s__, __ } from '~/locale';
+import { loadingIconForLegacyJS } from '~/loading_icon_for_legacy_js';
 
 const d3 = { select };
 
@@ -24,12 +25,6 @@ const CONTRIB_LEGENDS = [
   { title: __('30+ contributions'), min: 30 },
 ];
 
-const LOADING_HTML = `
-  <div class="text-center">
-    <div class="spinner spinner-md"></div>
-  </div>
-`;
-
 function getSystemDate(systemUtcOffsetSeconds) {
   const date = new Date();
   const localUtcOffsetMinutes = 0 - date.getTimezoneOffset();
@@ -286,7 +281,9 @@ export default class ActivityCalendar {
         this.currentSelectedDate.getDate(),
       ].join('-');
 
-      $(this.activitiesContainer).html(LOADING_HTML);
+      $(this.activitiesContainer)
+        .empty()
+        .append(loadingIconForLegacyJS({ size: 'lg' }));
 
       axios
         .get(this.calendarActivitiesPath, {