From 8b5c081d766bc7be725b07a8abfb2d8f39c45fd3 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Fri, 25 Aug 2023 18:03:14 +0200
Subject: [PATCH] Remove fomantic loader module (#26670)

Replace Fomantic `loader` CSS module with our existing `is-loading`
spinner. Only three places in the UI used this module, which are
pictured here:

imagediff:
<img width="1237" alt="Screenshot 2023-08-22 at 22 18 01"
src="https://github.com/go-gitea/gitea/assets/115237/b0d82531-f05e-43c6-9e5b-1bfc268c056d">

webauthn:
<img width="894" alt="Screenshot 2023-08-22 at 22 05 05"
src="https://github.com/go-gitea/gitea/assets/115237/7b583425-d944-474a-a57a-22a65bbd8b29">

heatmap (I removed the previous loading text, it was unreadable because
it was tiny and on fast machines only visible for a fraction of a
second):
<img width="764" alt="Screenshot 2023-08-22 at 22 18 44"
src="https://github.com/go-gitea/gitea/assets/115237/1c7472d6-3e17-4224-a992-d8c0b380cc73">

Also, heatmap container does not resize any more after loading now and
previous duplicate id `user-heatmap` is gone.

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
---
 options/locale/locale_en-US.ini           |   1 -
 templates/user/auth/webauthn.tmpl         |   4 +-
 templates/user/heatmap.tmpl               |   8 +-
 web_src/css/features/heatmap.css          |  32 +-
 web_src/css/user.css                      |   4 -
 web_src/fomantic/build/semantic.css       | 942 ----------------------
 web_src/fomantic/semantic.json            |   1 -
 web_src/js/components/ActivityHeatmap.vue |  24 +-
 web_src/js/features/heatmap.js            |   2 +-
 9 files changed, 25 insertions(+), 993 deletions(-)

diff --git a/options/locale/locale_en-US.ini b/options/locale/locale_en-US.ini
index e32399dd8..abb98c608 100644
--- a/options/locale/locale_en-US.ini
+++ b/options/locale/locale_en-US.ini
@@ -598,7 +598,6 @@ overview = Overview
 following = Following
 follow = Follow
 unfollow = Unfollow
-heatmap.loading = Loading Heatmap…
 user_bio = Biography
 disabled_public_activity = This user has disabled the public visibility of the activity.
 email_visibility.limited = Your email address is visible to all authenticated users
diff --git a/templates/user/auth/webauthn.tmpl b/templates/user/auth/webauthn.tmpl
index ef0488640..c689f9c6d 100644
--- a/templates/user/auth/webauthn.tmpl
+++ b/templates/user/auth/webauthn.tmpl
@@ -10,8 +10,8 @@
 				{{template "base/alert" .}}
 				<p>{{.locale.Tr "webauthn_sign_in"}}</p>
 			</div>
-			<div class="ui attached segment">
-				<div class="ui active indeterminate inline loader"></div>
+			<div class="ui attached segment gt-df gt-ac gt-jc gt-gap-2 gt-py-3">
+				<div class="is-loading" style="width: 40px; height: 40px"></div>
 				{{.locale.Tr "webauthn_press_button"}}
 			</div>
 			<div class="ui attached segment">
diff --git a/templates/user/heatmap.tmpl b/templates/user/heatmap.tmpl
index d912eb2a8..3bf7e6cbb 100644
--- a/templates/user/heatmap.tmpl
+++ b/templates/user/heatmap.tmpl
@@ -1,14 +1,10 @@
 {{if .HeatmapData}}
-	<div id="user-heatmap"
+	<div id="user-heatmap" class="is-loading"
 		data-heatmap-data="{{JsonUtils.EncodeToString .HeatmapData}}"
 		data-locale-total-contributions="{{$.locale.Tr "heatmap.number_of_contributions_in_the_last_12_months" ($.locale.PrettyNumber .HeatmapTotalContributions)}}"
 		data-locale-no-contributions="{{.locale.Tr "heatmap.no_contributions"}}"
 		data-locale-more="{{.locale.Tr "heatmap.more"}}"
 		data-locale-less="{{.locale.Tr "heatmap.less"}}"
-	>
-		<div slot="loading">
-			<div class="ui active centered inline indeterminate text loader" id="loading-heatmap">{{.locale.Tr "user.heatmap.loading"}}</div>
-		</div>
-	</div>
+	></div>
 	<div class="divider"></div>
 {{end}}
diff --git a/web_src/css/features/heatmap.css b/web_src/css/features/heatmap.css
index d0cd2b573..364754751 100644
--- a/web_src/css/features/heatmap.css
+++ b/web_src/css/features/heatmap.css
@@ -2,7 +2,15 @@
   width: 100%;
   font-size: 9px;
   position: relative;
-  min-height: 125px;
+}
+
+/* before the Vue component is mounted, show a loading indicator with dummy size */
+/* the ratio is guesswork, see https://github.com/razorness/vue3-calendar-heatmap/issues/26 */
+#user-heatmap.is-loading {
+  aspect-ratio: 5.415; /* the size is about 790 x 145 */
+}
+.user.profile #user-heatmap.is-loading {
+  aspect-ratio: 5.645; /* the size is about 953 x 169 */
 }
 
 #user-heatmap text {
@@ -32,37 +40,15 @@
 }
 
 @media (max-width: 1200px) {
-  #user-heatmap {
-    min-height: 105px;
-  }
   #user-heatmap .total-contributions {
     left: 21px;
   }
 }
 
 @media (max-width: 1000px) {
-  #user-heatmap {
-    min-height: 80px;
-  }
   #user-heatmap .total-contributions {
     font-size: 10px;
     left: 17px;
     bottom: -4px;
   }
 }
-
-.user.profile #user-heatmap {
-  min-height: 135px;
-}
-
-@media (max-width: 1200px) {
-  .user.profile #user-heatmap {
-    min-height: 115px;
-  }
-}
-
-@media (max-width: 1000px) {
-  .user.profile #user-heatmap {
-    min-height: 90px;
-  }
-}
diff --git a/web_src/css/user.css b/web_src/css/user.css
index b63724502..2f951440b 100644
--- a/web_src/css/user.css
+++ b/web_src/css/user.css
@@ -58,10 +58,6 @@
   }
 }
 
-.user.profile #loading-heatmap {
-  margin-bottom: 1em;
-}
-
 .user.profile .ui.secondary.stackable.pointing.menu {
   flex-wrap: wrap;
 }
diff --git a/web_src/fomantic/build/semantic.css b/web_src/fomantic/build/semantic.css
index 4004415fa..c2003ab2d 100644
--- a/web_src/fomantic/build/semantic.css
+++ b/web_src/fomantic/build/semantic.css
@@ -13544,948 +13544,6 @@ ol.ui.suffixed.list li:before,
 /*******************************
     User Variable Overrides
 *******************************/
-/*!
- * # Fomantic-UI - Loader
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-/*******************************
-            Loader
-*******************************/
-
-/* Standard Size */
-
-.ui.loader {
-  display: none;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  margin: 0;
-  text-align: center;
-  z-index: 1000;
-  transform: translateX(-50%) translateY(-50%);
-}
-
-/* Static Shape */
-
-.ui.loader:before {
-  position: absolute;
-  content: '';
-  top: 0;
-  left: 50%;
-  width: 100%;
-  height: 100%;
-  border-radius: 500rem;
-  border: 0.2em solid rgba(0, 0, 0, 0.1);
-}
-
-/* Active Shape */
-
-.ui.loader:after {
-  position: absolute;
-  content: '';
-  top: 0;
-  left: 50%;
-  width: 100%;
-  height: 100%;
-  -webkit-animation: loader 0.6s infinite linear;
-  animation: loader 0.6s infinite linear;
-  border: 0.2em solid #767676;
-  border-radius: 500rem;
-  box-shadow: 0 0 0 1px transparent;
-}
-
-/* Speeds */
-
-.ui.fast.loading.loading:after,
-.ui.fast.loading.loading .input > i.icon:after,
-.ui.fast.loading.loading > i.icon:after,
-.ui.fast.loader:after {
-  -webkit-animation-duration: 0.3s;
-  animation-duration: 0.3s;
-}
-
-.ui.slow.loading.loading:after,
-.ui.slow.loading.loading .input > i.icon:after,
-.ui.slow.loading.loading > i.icon:after,
-.ui.slow.loader:after {
-  -webkit-animation-duration: 0.9s;
-  animation-duration: 0.9s;
-}
-
-/* Active Animation */
-
-@-webkit-keyframes loader {
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes loader {
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-/*-------------------
-      Coupling
---------------------*/
-
-/* Show inside active dimmer */
-
-.ui.dimmer > .loader {
-  display: block;
-}
-
-/* Black Dimmer */
-
-.ui.dimmer > .ui.loader {
-  color: rgba(255, 255, 255, 0.9);
-}
-
-.ui.dimmer > .ui.loader:not(.elastic):before {
-  border-color: rgba(255, 255, 255, 0.15);
-}
-
-/* White Dimmer (Inverted) */
-
-.ui.inverted.dimmer > .ui.loader {
-  color: rgba(0, 0, 0, 0.87);
-}
-
-.ui.inverted.dimmer > .ui.loader:not(.elastic):before {
-  border-color: rgba(0, 0, 0, 0.1);
-}
-
-/*******************************
-             Types
-*******************************/
-
-/*-------------------
-          Text
-  --------------------*/
-
-.ui.ui.ui.ui.text.loader {
-  width: auto;
-  height: auto;
-  text-align: center;
-  font-style: normal;
-}
-
-/*******************************
-            States
-*******************************/
-
-.ui.indeterminate.loader:after {
-  animation-direction: reverse;
-  -webkit-animation-duration: 1.2s;
-  animation-duration: 1.2s;
-}
-
-.ui.loader.active,
-.ui.loader.visible {
-  display: block;
-}
-
-.ui.loader.disabled,
-.ui.loader.hidden {
-  display: none;
-}
-
-/*******************************
-            Variations
-*******************************/
-
-/*-------------------
-        Sizes
---------------------*/
-
-.ui.loader {
-  width: 2.28571429rem;
-  height: 2.28571429rem;
-  font-size: 1em;
-}
-
-.ui.loader:before,
-.ui.loader:after {
-  width: 2.28571429rem;
-  height: 2.28571429rem;
-  margin: 0 0 0 -1.14285714rem;
-}
-
-.ui.text.loader {
-  min-width: 2.28571429rem;
-  padding-top: 3.07142857rem;
-}
-
-.ui.mini.loader {
-  width: 1rem;
-  height: 1rem;
-  font-size: 0.78571429em;
-}
-
-.ui.mini.loader:before,
-.ui.mini.loader:after {
-  width: 1rem;
-  height: 1rem;
-  margin: 0 0 0 -0.5rem;
-}
-
-.ui.mini.text.loader {
-  min-width: 1rem;
-  padding-top: 1.78571429rem;
-}
-
-.ui.tiny.loader {
-  width: 1.14285714rem;
-  height: 1.14285714rem;
-  font-size: 0.85714286em;
-}
-
-.ui.tiny.loader:before,
-.ui.tiny.loader:after {
-  width: 1.14285714rem;
-  height: 1.14285714rem;
-  margin: 0 0 0 -0.57142857rem;
-}
-
-.ui.tiny.text.loader {
-  min-width: 1.14285714rem;
-  padding-top: 1.92857143rem;
-}
-
-.ui.small.loader {
-  width: 1.71428571rem;
-  height: 1.71428571rem;
-  font-size: 0.92857143em;
-}
-
-.ui.small.loader:before,
-.ui.small.loader:after {
-  width: 1.71428571rem;
-  height: 1.71428571rem;
-  margin: 0 0 0 -0.85714286rem;
-}
-
-.ui.small.text.loader {
-  min-width: 1.71428571rem;
-  padding-top: 2.5rem;
-}
-
-.ui.large.loader {
-  width: 3.42857143rem;
-  height: 3.42857143rem;
-  font-size: 1.14285714em;
-}
-
-.ui.large.loader:before,
-.ui.large.loader:after {
-  width: 3.42857143rem;
-  height: 3.42857143rem;
-  margin: 0 0 0 -1.71428571rem;
-}
-
-.ui.large.text.loader {
-  min-width: 3.42857143rem;
-  padding-top: 4.21428571rem;
-}
-
-.ui.big.loader {
-  width: 3.71428571rem;
-  height: 3.71428571rem;
-  font-size: 1.28571429em;
-}
-
-.ui.big.loader:before,
-.ui.big.loader:after {
-  width: 3.71428571rem;
-  height: 3.71428571rem;
-  margin: 0 0 0 -1.85714286rem;
-}
-
-.ui.big.text.loader {
-  min-width: 3.71428571rem;
-  padding-top: 4.5rem;
-}
-
-.ui.huge.loader {
-  width: 4.14285714rem;
-  height: 4.14285714rem;
-  font-size: 1.42857143em;
-}
-
-.ui.huge.loader:before,
-.ui.huge.loader:after {
-  width: 4.14285714rem;
-  height: 4.14285714rem;
-  margin: 0 0 0 -2.07142857rem;
-}
-
-.ui.huge.text.loader {
-  min-width: 4.14285714rem;
-  padding-top: 4.92857143rem;
-}
-
-.ui.massive.loader {
-  width: 4.57142857rem;
-  height: 4.57142857rem;
-  font-size: 1.71428571em;
-}
-
-.ui.massive.loader:before,
-.ui.massive.loader:after {
-  width: 4.57142857rem;
-  height: 4.57142857rem;
-  margin: 0 0 0 -2.28571429rem;
-}
-
-.ui.massive.text.loader {
-  min-width: 4.57142857rem;
-  padding-top: 5.35714286rem;
-}
-
-/*-------------------
-       Colors
---------------------*/
-
-.ui.primary.elastic.loader.loader:before,
-.ui.primary.basic.elastic.loading.button:before,
-.ui.primary.basic.elastic.loading.button:after,
-.ui.primary.elastic.loading.loading.loading:not(.segment):before,
-.ui.primary.elastic.loading.loading.loading .input > i.icon:before,
-.ui.primary.elastic.loading.loading.loading.loading > i.icon:before,
-.ui.primary.loading.loading.loading.loading:not(.usual):not(.button):after,
-.ui.primary.loading.loading.loading.loading .input > i.icon:after,
-.ui.primary.loading.loading.loading.loading > i.icon:after,
-.ui.primary.loader.loader.loader:after {
-  color: #2185D0;
-}
-
-.ui.inverted.primary.elastic.loader:before,
-.ui.inverted.primary.elastic.loading.loading.loading:not(.segment):before,
-.ui.inverted.primary.elastic.loading.loading.loading .input > i.icon:before,
-.ui.inverted.primary.elastic.loading.loading.loading > i.icon:before,
-.ui.inverted.primary.loading.loading.loading.loading:not(.usual):after,
-.ui.inverted.primary.loading.loading.loading.loading .input > i.icon:after,
-.ui.inverted.primary.loading.loading.loading.loading > i.icon:after,
-.ui.inverted.primary.loader.loader.loader:after {
-  color: #54C8FF;
-}
-
-.ui.secondary.elastic.loader.loader:before,
-.ui.secondary.basic.elastic.loading.button:before,
-.ui.secondary.basic.elastic.loading.button:after,
-.ui.secondary.elastic.loading.loading.loading:not(.segment):before,
-.ui.secondary.elastic.loading.loading.loading .input > i.icon:before,
-.ui.secondary.elastic.loading.loading.loading.loading > i.icon:before,
-.ui.secondary.loading.loading.loading.loading:not(.usual):not(.button):after,
-.ui.secondary.loading.loading.loading.loading .input > i.icon:after,
-.ui.secondary.loading.loading.loading.loading > i.icon:after,
-.ui.secondary.loader.loader.loader:after {
-  color: #1B1C1D;
-}
-
-.ui.inverted.secondary.elastic.loader:before,
-.ui.inverted.secondary.elastic.loading.loading.loading:not(.segment):before,
-.ui.inverted.secondary.elastic.loading.loading.loading .input > i.icon:before,
-.ui.inverted.secondary.elastic.loading.loading.loading > i.icon:before,
-.ui.inverted.secondary.loading.loading.loading.loading:not(.usual):after,
-.ui.inverted.secondary.loading.loading.loading.loading .input > i.icon:after,
-.ui.inverted.secondary.loading.loading.loading.loading > i.icon:after,
-.ui.inverted.secondary.loader.loader.loader:after {
-  color: #545454;
-}
-
-.ui.red.elastic.loader.loader:before,
-.ui.red.basic.elastic.loading.button:before,
-.ui.red.basic.elastic.loading.button:after,
-.ui.red.elastic.loading.loading.loading:not(.segment):before,
-.ui.red.elastic.loading.loading.loading .input > i.icon:before,
-.ui.red.elastic.loading.loading.loading.loading > i.icon:before,
-.ui.red.loading.loading.loading.loading:not(.usual):not(.button):after,
-.ui.red.loading.loading.loading.loading .input > i.icon:after,
-.ui.red.loading.loading.loading.loading > i.icon:after,
-.ui.red.loader.loader.loader:after {
-  color: #DB2828;
-}
-
-.ui.inverted.red.elastic.loader:before,
-.ui.inverted.red.elastic.loading.loading.loading:not(.segment):before,
-.ui.inverted.red.elastic.loading.loading.loading .input > i.icon:before,
-.ui.inverted.red.elastic.loading.loading.loading > i.icon:before,
-.ui.inverted.red.loading.loading.loading.loading:not(.usual):after,
-.ui.inverted.red.loading.loading.loading.loading .input > i.icon:after,
-.ui.inverted.red.loading.loading.loading.loading > i.icon:after,
-.ui.inverted.red.loader.loader.loader:after {
-  color: #FF695E;
-}
-
-.ui.orange.elastic.loader.loader:before,
-.ui.orange.basic.elastic.loading.button:before,
-.ui.orange.basic.elastic.loading.button:after,
-.ui.orange.elastic.loading.loading.loading:not(.segment):before,
-.ui.orange.elastic.loading.loading.loading .input > i.icon:before,
-.ui.orange.elastic.loading.loading.loading.loading > i.icon:before,
-.ui.orange.loading.loading.loading.loading:not(.usual):not(.button):after,
-.ui.orange.loading.loading.loading.loading .input > i.icon:after,
-.ui.orange.loading.loading.loading.loading > i.icon:after,
-.ui.orange.loader.loader.loader:after {
-  color: #F2711C;
-}
-
-.ui.inverted.orange.elastic.loader:before,
-.ui.inverted.orange.elastic.loading.loading.loading:not(.segment):before,
-.ui.inverted.orange.elastic.loading.loading.loading .input > i.icon:before,
-.ui.inverted.orange.elastic.loading.loading.loading > i.icon:before,
-.ui.inverted.orange.loading.loading.loading.loading:not(.usual):after,
-.ui.inverted.orange.loading.loading.loading.loading .input > i.icon:after,
-.ui.inverted.orange.loading.loading.loading.loading > i.icon:after,
-.ui.inverted.orange.loader.loader.loader:after {
-  color: #FF851B;
-}
-
-.ui.yellow.elastic.loader.loader:before,
-.ui.yellow.basic.elastic.loading.button:before,
-.ui.yellow.basic.elastic.loading.button:after,
-.ui.yellow.elastic.loading.loading.loading:not(.segment):before,
-.ui.yellow.elastic.loading.loading.loading .input > i.icon:before,
-.ui.yellow.elastic.loading.loading.loading.loading > i.icon:before,
-.ui.yellow.loading.loading.loading.loading:not(.usual):not(.button):after,
-.ui.yellow.loading.loading.loading.loading .input > i.icon:after,
-.ui.yellow.loading.loading.loading.loading > i.icon:after,
-.ui.yellow.loader.loader.loader:after {
-  color: #FBBD08;
-}
-
-.ui.inverted.yellow.elastic.loader:before,
-.ui.inverted.yellow.elastic.loading.loading.loading:not(.segment):before,
-.ui.inverted.yellow.elastic.loading.loading.loading .input > i.icon:before,
-.ui.inverted.yellow.elastic.loading.loading.loading > i.icon:before,
-.ui.inverted.yellow.loading.loading.loading.loading:not(.usual):after,
-.ui.inverted.yellow.loading.loading.loading.loading .input > i.icon:after,
-.ui.inverted.yellow.loading.loading.loading.loading > i.icon:after,
-.ui.inverted.yellow.loader.loader.loader:after {
-  color: #FFE21F;
-}
-
-.ui.olive.elastic.loader.loader:before,
-.ui.olive.basic.elastic.loading.button:before,
-.ui.olive.basic.elastic.loading.button:after,
-.ui.olive.elastic.loading.loading.loading:not(.segment):before,
-.ui.olive.elastic.loading.loading.loading .input > i.icon:before,
-.ui.olive.elastic.loading.loading.loading.loading > i.icon:before,
-.ui.olive.loading.loading.loading.loading:not(.usual):not(.button):after,
-.ui.olive.loading.loading.loading.loading .input > i.icon:after,
-.ui.olive.loading.loading.loading.loading > i.icon:after,
-.ui.olive.loader.loader.loader:after {
-  color: #B5CC18;
-}
-
-.ui.inverted.olive.elastic.loader:before,
-.ui.inverted.olive.elastic.loading.loading.loading:not(.segment):before,
-.ui.inverted.olive.elastic.loading.loading.loading .input > i.icon:before,
-.ui.inverted.olive.elastic.loading.loading.loading > i.icon:before,
-.ui.inverted.olive.loading.loading.loading.loading:not(.usual):after,
-.ui.inverted.olive.loading.loading.loading.loading .input > i.icon:after,
-.ui.inverted.olive.loading.loading.loading.loading > i.icon:after,
-.ui.inverted.olive.loader.loader.loader:after {
-  color: #D9E778;
-}
-
-.ui.green.elastic.loader.loader:before,
-.ui.green.basic.elastic.loading.button:before,
-.ui.green.basic.elastic.loading.button:after,
-.ui.green.elastic.loading.loading.loading:not(.segment):before,
-.ui.green.elastic.loading.loading.loading .input > i.icon:before,
-.ui.green.elastic.loading.loading.loading.loading > i.icon:before,
-.ui.green.loading.loading.loading.loading:not(.usual):not(.button):after,
-.ui.green.loading.loading.loading.loading .input > i.icon:after,
-.ui.green.loading.loading.loading.loading > i.icon:after,
-.ui.green.loader.loader.loader:after {
-  color: #21BA45;
-}
-
-.ui.inverted.green.elastic.loader:before,
-.ui.inverted.green.elastic.loading.loading.loading:not(.segment):before,
-.ui.inverted.green.elastic.loading.loading.loading .input > i.icon:before,
-.ui.inverted.green.elastic.loading.loading.loading > i.icon:before,
-.ui.inverted.green.loading.loading.loading.loading:not(.usual):after,
-.ui.inverted.green.loading.loading.loading.loading .input > i.icon:after,
-.ui.inverted.green.loading.loading.loading.loading > i.icon:after,
-.ui.inverted.green.loader.loader.loader:after {
-  color: #2ECC40;
-}
-
-.ui.teal.elastic.loader.loader:before,
-.ui.teal.basic.elastic.loading.button:before,
-.ui.teal.basic.elastic.loading.button:after,
-.ui.teal.elastic.loading.loading.loading:not(.segment):before,
-.ui.teal.elastic.loading.loading.loading .input > i.icon:before,
-.ui.teal.elastic.loading.loading.loading.loading > i.icon:before,
-.ui.teal.loading.loading.loading.loading:not(.usual):not(.button):after,
-.ui.teal.loading.loading.loading.loading .input > i.icon:after,
-.ui.teal.loading.loading.loading.loading > i.icon:after,
-.ui.teal.loader.loader.loader:after {
-  color: #00B5AD;
-}
-
-.ui.inverted.teal.elastic.loader:before,
-.ui.inverted.teal.elastic.loading.loading.loading:not(.segment):before,
-.ui.inverted.teal.elastic.loading.loading.loading .input > i.icon:before,
-.ui.inverted.teal.elastic.loading.loading.loading > i.icon:before,
-.ui.inverted.teal.loading.loading.loading.loading:not(.usual):after,
-.ui.inverted.teal.loading.loading.loading.loading .input > i.icon:after,
-.ui.inverted.teal.loading.loading.loading.loading > i.icon:after,
-.ui.inverted.teal.loader.loader.loader:after {
-  color: #6DFFFF;
-}
-
-.ui.blue.elastic.loader.loader:before,
-.ui.blue.basic.elastic.loading.button:before,
-.ui.blue.basic.elastic.loading.button:after,
-.ui.blue.elastic.loading.loading.loading:not(.segment):before,
-.ui.blue.elastic.loading.loading.loading .input > i.icon:before,
-.ui.blue.elastic.loading.loading.loading.loading > i.icon:before,
-.ui.blue.loading.loading.loading.loading:not(.usual):not(.button):after,
-.ui.blue.loading.loading.loading.loading .input > i.icon:after,
-.ui.blue.loading.loading.loading.loading > i.icon:after,
-.ui.blue.loader.loader.loader:after {
-  color: #2185D0;
-}
-
-.ui.inverted.blue.elastic.loader:before,
-.ui.inverted.blue.elastic.loading.loading.loading:not(.segment):before,
-.ui.inverted.blue.elastic.loading.loading.loading .input > i.icon:before,
-.ui.inverted.blue.elastic.loading.loading.loading > i.icon:before,
-.ui.inverted.blue.loading.loading.loading.loading:not(.usual):after,
-.ui.inverted.blue.loading.loading.loading.loading .input > i.icon:after,
-.ui.inverted.blue.loading.loading.loading.loading > i.icon:after,
-.ui.inverted.blue.loader.loader.loader:after {
-  color: #54C8FF;
-}
-
-.ui.violet.elastic.loader.loader:before,
-.ui.violet.basic.elastic.loading.button:before,
-.ui.violet.basic.elastic.loading.button:after,
-.ui.violet.elastic.loading.loading.loading:not(.segment):before,
-.ui.violet.elastic.loading.loading.loading .input > i.icon:before,
-.ui.violet.elastic.loading.loading.loading.loading > i.icon:before,
-.ui.violet.loading.loading.loading.loading:not(.usual):not(.button):after,
-.ui.violet.loading.loading.loading.loading .input > i.icon:after,
-.ui.violet.loading.loading.loading.loading > i.icon:after,
-.ui.violet.loader.loader.loader:after {
-  color: #6435C9;
-}
-
-.ui.inverted.violet.elastic.loader:before,
-.ui.inverted.violet.elastic.loading.loading.loading:not(.segment):before,
-.ui.inverted.violet.elastic.loading.loading.loading .input > i.icon:before,
-.ui.inverted.violet.elastic.loading.loading.loading > i.icon:before,
-.ui.inverted.violet.loading.loading.loading.loading:not(.usual):after,
-.ui.inverted.violet.loading.loading.loading.loading .input > i.icon:after,
-.ui.inverted.violet.loading.loading.loading.loading > i.icon:after,
-.ui.inverted.violet.loader.loader.loader:after {
-  color: #A291FB;
-}
-
-.ui.purple.elastic.loader.loader:before,
-.ui.purple.basic.elastic.loading.button:before,
-.ui.purple.basic.elastic.loading.button:after,
-.ui.purple.elastic.loading.loading.loading:not(.segment):before,
-.ui.purple.elastic.loading.loading.loading .input > i.icon:before,
-.ui.purple.elastic.loading.loading.loading.loading > i.icon:before,
-.ui.purple.loading.loading.loading.loading:not(.usual):not(.button):after,
-.ui.purple.loading.loading.loading.loading .input > i.icon:after,
-.ui.purple.loading.loading.loading.loading > i.icon:after,
-.ui.purple.loader.loader.loader:after {
-  color: #A333C8;
-}
-
-.ui.inverted.purple.elastic.loader:before,
-.ui.inverted.purple.elastic.loading.loading.loading:not(.segment):before,
-.ui.inverted.purple.elastic.loading.loading.loading .input > i.icon:before,
-.ui.inverted.purple.elastic.loading.loading.loading > i.icon:before,
-.ui.inverted.purple.loading.loading.loading.loading:not(.usual):after,
-.ui.inverted.purple.loading.loading.loading.loading .input > i.icon:after,
-.ui.inverted.purple.loading.loading.loading.loading > i.icon:after,
-.ui.inverted.purple.loader.loader.loader:after {
-  color: #DC73FF;
-}
-
-.ui.pink.elastic.loader.loader:before,
-.ui.pink.basic.elastic.loading.button:before,
-.ui.pink.basic.elastic.loading.button:after,
-.ui.pink.elastic.loading.loading.loading:not(.segment):before,
-.ui.pink.elastic.loading.loading.loading .input > i.icon:before,
-.ui.pink.elastic.loading.loading.loading.loading > i.icon:before,
-.ui.pink.loading.loading.loading.loading:not(.usual):not(.button):after,
-.ui.pink.loading.loading.loading.loading .input > i.icon:after,
-.ui.pink.loading.loading.loading.loading > i.icon:after,
-.ui.pink.loader.loader.loader:after {
-  color: #E03997;
-}
-
-.ui.inverted.pink.elastic.loader:before,
-.ui.inverted.pink.elastic.loading.loading.loading:not(.segment):before,
-.ui.inverted.pink.elastic.loading.loading.loading .input > i.icon:before,
-.ui.inverted.pink.elastic.loading.loading.loading > i.icon:before,
-.ui.inverted.pink.loading.loading.loading.loading:not(.usual):after,
-.ui.inverted.pink.loading.loading.loading.loading .input > i.icon:after,
-.ui.inverted.pink.loading.loading.loading.loading > i.icon:after,
-.ui.inverted.pink.loader.loader.loader:after {
-  color: #FF8EDF;
-}
-
-.ui.brown.elastic.loader.loader:before,
-.ui.brown.basic.elastic.loading.button:before,
-.ui.brown.basic.elastic.loading.button:after,
-.ui.brown.elastic.loading.loading.loading:not(.segment):before,
-.ui.brown.elastic.loading.loading.loading .input > i.icon:before,
-.ui.brown.elastic.loading.loading.loading.loading > i.icon:before,
-.ui.brown.loading.loading.loading.loading:not(.usual):not(.button):after,
-.ui.brown.loading.loading.loading.loading .input > i.icon:after,
-.ui.brown.loading.loading.loading.loading > i.icon:after,
-.ui.brown.loader.loader.loader:after {
-  color: #A5673F;
-}
-
-.ui.inverted.brown.elastic.loader:before,
-.ui.inverted.brown.elastic.loading.loading.loading:not(.segment):before,
-.ui.inverted.brown.elastic.loading.loading.loading .input > i.icon:before,
-.ui.inverted.brown.elastic.loading.loading.loading > i.icon:before,
-.ui.inverted.brown.loading.loading.loading.loading:not(.usual):after,
-.ui.inverted.brown.loading.loading.loading.loading .input > i.icon:after,
-.ui.inverted.brown.loading.loading.loading.loading > i.icon:after,
-.ui.inverted.brown.loader.loader.loader:after {
-  color: #D67C1C;
-}
-
-.ui.grey.elastic.loader.loader:before,
-.ui.grey.basic.elastic.loading.button:before,
-.ui.grey.basic.elastic.loading.button:after,
-.ui.grey.elastic.loading.loading.loading:not(.segment):before,
-.ui.grey.elastic.loading.loading.loading .input > i.icon:before,
-.ui.grey.elastic.loading.loading.loading.loading > i.icon:before,
-.ui.grey.loading.loading.loading.loading:not(.usual):not(.button):after,
-.ui.grey.loading.loading.loading.loading .input > i.icon:after,
-.ui.grey.loading.loading.loading.loading > i.icon:after,
-.ui.grey.loader.loader.loader:after {
-  color: #767676;
-}
-
-.ui.inverted.grey.elastic.loader:before,
-.ui.inverted.grey.elastic.loading.loading.loading:not(.segment):before,
-.ui.inverted.grey.elastic.loading.loading.loading .input > i.icon:before,
-.ui.inverted.grey.elastic.loading.loading.loading > i.icon:before,
-.ui.inverted.grey.loading.loading.loading.loading:not(.usual):after,
-.ui.inverted.grey.loading.loading.loading.loading .input > i.icon:after,
-.ui.inverted.grey.loading.loading.loading.loading > i.icon:after,
-.ui.inverted.grey.loader.loader.loader:after {
-  color: #DCDDDE;
-}
-
-.ui.black.elastic.loader.loader:before,
-.ui.black.basic.elastic.loading.button:before,
-.ui.black.basic.elastic.loading.button:after,
-.ui.black.elastic.loading.loading.loading:not(.segment):before,
-.ui.black.elastic.loading.loading.loading .input > i.icon:before,
-.ui.black.elastic.loading.loading.loading.loading > i.icon:before,
-.ui.black.loading.loading.loading.loading:not(.usual):not(.button):after,
-.ui.black.loading.loading.loading.loading .input > i.icon:after,
-.ui.black.loading.loading.loading.loading > i.icon:after,
-.ui.black.loader.loader.loader:after {
-  color: #1B1C1D;
-}
-
-.ui.inverted.black.elastic.loader:before,
-.ui.inverted.black.elastic.loading.loading.loading:not(.segment):before,
-.ui.inverted.black.elastic.loading.loading.loading .input > i.icon:before,
-.ui.inverted.black.elastic.loading.loading.loading > i.icon:before,
-.ui.inverted.black.loading.loading.loading.loading:not(.usual):after,
-.ui.inverted.black.loading.loading.loading.loading .input > i.icon:after,
-.ui.inverted.black.loading.loading.loading.loading > i.icon:after,
-.ui.inverted.black.loader.loader.loader:after {
-  color: #545454;
-}
-
-.ui.elastic.loader.loader:before,
-.ui.elastic.loading.loading.loading:before,
-.ui.elastic.loading.loading.loading .input > i.icon:before,
-.ui.elastic.loading.loading.loading > i.icon:before,
-.ui.loading.loading.loading.loading:not(.usual):after,
-.ui.loading.loading.loading.loading .input > i.icon:after,
-.ui.loading.loading.loading.loading > i.icon:after,
-.ui.loader.loader.loader:after {
-  border-color: currentColor;
-}
-
-.ui.elastic.loading.loading.loading.loading.button:not(.inverted):not(.basic):before {
-  color: #FFFFFF;
-}
-
-.ui.elastic.basic.loading.button:before,
-.ui.elastic.basic.loading.button:after {
-  color: #767676;
-}
-
-.ui.double.loading.loading.loading.loading.button:after {
-  border-bottom-color: currentColor;
-}
-
-/*-------------------
-         Inline
-  --------------------*/
-
-.ui.inline.loader {
-  position: relative;
-  vertical-align: middle;
-  margin: 0;
-  left: 0;
-  top: 0;
-  transform: none;
-}
-
-.ui.inline.loader.active,
-.ui.inline.loader.visible {
-  display: inline-block;
-}
-
-/* Centered Inline */
-
-.ui.centered.inline.loader.active,
-.ui.centered.inline.loader.visible {
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.ui.loading.loading.loading.loading.loading.loading:after,
-.ui.loading.loading.loading.loading.loading.loading .input > i.icon:after,
-.ui.loading.loading.loading.loading.loading.loading > i.icon:after,
-.ui.loader.loader.loader.loader.loader:after {
-  border-left-color: transparent;
-  border-right-color: transparent;
-}
-
-.ui.loading.loading.loading.loading.loading.loading.loading:not(.double):after,
-.ui.loading.loading.loading.loading.loading.loading.loading:not(.double) .input > i.icon:after,
-.ui.loading.loading.loading.loading.loading.loading.loading:not(.double) > i.icon:after,
-.ui.loader.loader.loader.loader.loader.loader:not(.double):after {
-  border-bottom-color: transparent;
-}
-
-.ui.loading.loading.loading.loading.loading.loading.segment:after,
-.ui.loading.loading.loading.loading.loading.loading.form:after {
-  border-left-color: rgba(0, 0, 0, 0.1);
-  border-right-color: rgba(0, 0, 0, 0.1);
-}
-
-.ui.loading.loading.loading.loading.loading.loading.segment:not(.double):after,
-.ui.loading.loading.loading.loading.loading.loading.form:not(.double):after {
-  border-bottom-color: rgba(0, 0, 0, 0.1);
-}
-
-/*-------------------
-         Elastic
-  --------------------*/
-
-.ui.dimmer > .ui.elastic.loader {
-  color: #FFFFFF;
-}
-
-.ui.inverted.dimmer > .ui.elastic.loader {
-  color: #767676;
-}
-
-.ui.elastic.loading.loading:not(.form):not(.segment):after,
-.ui.elastic.loading.loading .input > i.icon:after,
-.ui.elastic.loading.loading > i.icon:after,
-.ui.elastic.loader.loader:after {
-  -webkit-animation: loader 1s infinite cubic-bezier(0.27, 1.05, 0.92, 0.61);
-  animation: loader 1s infinite cubic-bezier(0.27, 1.05, 0.92, 0.61);
-  -webkit-animation-delay: 0.3s;
-  animation-delay: 0.3s;
-}
-
-.ui.elastic.loading.loading.loading:not(.form):not(.segment):before,
-.ui.elastic.loading.loading.loading .input > i.icon:before,
-.ui.elastic.loading.loading.loading > i.icon:before,
-.ui.elastic.loader.loader:before {
-  -webkit-animation: elastic-loader 1s infinite cubic-bezier(0.27, 1.05, 0.92, 0.61);
-  animation: elastic-loader 1s infinite cubic-bezier(0.27, 1.05, 0.92, 0.61);
-  -moz-animation: currentcolor-elastic-loader 1s infinite cubic-bezier(0.27, 1.05, 0.92, 0.61);
-  border-right-color: transparent;
-}
-
-.ui.elastic.inline.loader:empty {
-  -webkit-animation: loader 8s infinite linear;
-  animation: loader 8s infinite linear;
-}
-
-.ui.slow.elastic.loading.loading:not(.form):not(.segment):after,
-.ui.slow.elastic.loading.loading .input > i.icon:after,
-.ui.slow.elastic.loading.loading > i.icon:after,
-.ui.slow.elastic.loader.loader:after {
-  -webkit-animation-duration: 1.5s;
-  animation-duration: 1.5s;
-  -webkit-animation-delay: 0.45s;
-  animation-delay: 0.45s;
-}
-
-.ui.slow.elastic.loading.loading.loading:not(.form):not(.segment):before,
-.ui.slow.elastic.loading.loading.loading .input > i.icon:before,
-.ui.slow.elastic.loading.loading.loading > i.icon:before,
-.ui.slow.elastic.loader.loader:before {
-  -webkit-animation-duration: 1.5s;
-  animation-duration: 1.5s;
-}
-
-.ui.fast.elastic.loading.loading:not(.form):not(.segment):after,
-.ui.fast.elastic.loading.loading .input > i.icon:after,
-.ui.fast.elastic.loading.loading > i.icon:after,
-.ui.fast.elastic.loader.loader:after {
-  -webkit-animation-duration: 0.66s;
-  animation-duration: 0.66s;
-  -webkit-animation-delay: 0.2s;
-  animation-delay: 0.2s;
-}
-
-.ui.fast.elastic.loading.loading.loading:not(.form):not(.segment):before,
-.ui.fast.elastic.loading.loading.loading .input > i.icon:before,
-.ui.fast.elastic.loading.loading.loading > i.icon:before,
-.ui.fast.elastic.loader.loader:before {
-  -webkit-animation-duration: 0.66s;
-  animation-duration: 0.66s;
-}
-
-@-webkit-keyframes elastic-loader {
-  0%, 1% {
-    border-left-color: transparent;
-    border-bottom-color: transparent;
-  }
-
-  1.1%, 50% {
-    border-left-color: inherit;
-  }
-
-  10%, 35.1% {
-    border-bottom-color: transparent;
-  }
-
-  10.1%, 35% {
-    border-bottom-color: inherit;
-  }
-
-  50.1% {
-    border-left-color: transparent;
-  }
-
-  100% {
-    border-left-color: transparent;
-    border-bottom-color: transparent;
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes elastic-loader {
-  0%, 1% {
-    border-left-color: transparent;
-    border-bottom-color: transparent;
-  }
-
-  1.1%, 50% {
-    border-left-color: inherit;
-  }
-
-  10%, 35.1% {
-    border-bottom-color: transparent;
-  }
-
-  10.1%, 35% {
-    border-bottom-color: inherit;
-  }
-
-  50.1% {
-    border-left-color: transparent;
-  }
-
-  100% {
-    border-left-color: transparent;
-    border-bottom-color: transparent;
-    transform: rotate(360deg);
-  }
-}
-
-@-webkit-keyframes currentcolor-elastic-loader {
-  0%, 1% {
-    border-left-color: transparent;
-    border-bottom-color: transparent;
-  }
-
-  1.1%, 50% {
-    border-left-color: currentColor;
-  }
-
-  10%, 35.1% {
-    border-bottom-color: transparent;
-  }
-
-  10.1%, 35% {
-    border-bottom-color: currentColor;
-  }
-
-  50.1% {
-    border-left-color: transparent;
-  }
-
-  100% {
-    border-left-color: transparent;
-    border-bottom-color: transparent;
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes currentcolor-elastic-loader {
-  0%, 1% {
-    border-left-color: transparent;
-    border-bottom-color: transparent;
-  }
-
-  1.1%, 50% {
-    border-left-color: currentColor;
-  }
-
-  10%, 35.1% {
-    border-bottom-color: transparent;
-  }
-
-  10.1%, 35% {
-    border-bottom-color: currentColor;
-  }
-
-  50.1% {
-    border-left-color: transparent;
-  }
-
-  100% {
-    border-left-color: transparent;
-    border-bottom-color: transparent;
-    transform: rotate(360deg);
-  }
-}
-
-/*******************************
-         Theme Overrides
-*******************************/
-
-/*******************************
-         Site Overrides
-*******************************/
 /*
  * # Fomantic - Menu
  * http://github.com/fomantic/Fomantic-UI/
diff --git a/web_src/fomantic/semantic.json b/web_src/fomantic/semantic.json
index 2902dbf34..79aec9493 100644
--- a/web_src/fomantic/semantic.json
+++ b/web_src/fomantic/semantic.json
@@ -34,7 +34,6 @@
     "item",
     "label",
     "list",
-    "loader",
     "menu",
     "message",
     "modal",
diff --git a/web_src/js/components/ActivityHeatmap.vue b/web_src/js/components/ActivityHeatmap.vue
index acae1aedd..1b083ed13 100644
--- a/web_src/js/components/ActivityHeatmap.vue
+++ b/web_src/js/components/ActivityHeatmap.vue
@@ -1,18 +1,16 @@
 <template>
-  <div id="user-heatmap">
-    <div class="total-contributions">
-      {{ locale.contributions_in_the_last_12_months }}
-    </div>
-    <calendar-heatmap
-      :locale="locale"
-      :no-data-text="locale.no_contributions"
-      :tooltip-unit="locale.contributions"
-      :end-date="endDate"
-      :values="values"
-      :range-color="colorRange"
-      @day-click="handleDayClick($event)"
-    />
+  <div class="total-contributions">
+    {{ locale.contributions_in_the_last_12_months }}
   </div>
+  <calendar-heatmap
+    :locale="locale"
+    :no-data-text="locale.no_contributions"
+    :tooltip-unit="locale.contributions"
+    :end-date="endDate"
+    :values="values"
+    :range-color="colorRange"
+    @day-click="handleDayClick($event)"
+  />
 </template>
 <script>
 import {CalendarHeatmap} from 'vue3-calendar-heatmap';
diff --git a/web_src/js/features/heatmap.js b/web_src/js/features/heatmap.js
index 2c65293b6..b6f06d0cf 100644
--- a/web_src/js/features/heatmap.js
+++ b/web_src/js/features/heatmap.js
@@ -30,8 +30,8 @@ export function initHeatmap() {
     };
 
     const View = createApp(ActivityHeatmap, {values, locale});
-
     View.mount(el);
+    el.classList.remove('is-loading');
   } catch (err) {
     console.error('Heatmap failed to load', err);
     el.textContent = 'Heatmap failed to load';