diff --git a/frontend/src/styles/nav.scss b/frontend/src/styles/nav.scss
index cdb950a51..1020cc335 100644
--- a/frontend/src/styles/nav.scss
+++ b/frontend/src/styles/nav.scss
@@ -17,7 +17,9 @@
       margin-left: 0.25rem;
     }
 
-    .icon {
+    .icon,
+    .loading,
+    .user {
       width: 1.25rem;
       height: 1.25rem;
       // background: red;
@@ -27,12 +29,18 @@
 
     &.account {
       position: relative;
-      .icon,
+      .loading,
+      .user,
       .avatar {
         grid-column: 1/2;
         grid-row: 1/2;
       }
 
+      .loading,
+      .user {
+        // margin-top: 0.1rem;
+      }
+
       .levelAndBar {
         transition: 0.125s;
       }
diff --git a/frontend/src/ts/elements/account-button.ts b/frontend/src/ts/elements/account-button.ts
index e292d5538..c687dba24 100644
--- a/frontend/src/ts/elements/account-button.ts
+++ b/frontend/src/ts/elements/account-button.ts
@@ -11,23 +11,87 @@ export function skipXpBreakdown(): void {
   skipBreakdown = true;
 }
 
-export function loading(truefalse: boolean): void {
-  if (truefalse) {
-    if (usingAvatar) {
-      $("#top #menu .account .avatar").addClass("hidden");
-      $("#top #menu .account .icon").removeClass("hidden");
-    }
-    $("#top #menu .account .icon").html(
-      '<i class="fas fa-fw fa-spin fa-circle-notch"></i>'
-    );
+export function loading(state: boolean): void {
+  if (state) {
     $("#top #menu .account").css("opacity", 1).css("pointer-events", "none");
-  } else {
+
     if (usingAvatar) {
-      $("#top #menu .account .avatar").removeClass("hidden");
-      $("#top #menu .account .icon").addClass("hidden");
+      $("#top #menu .account .loading").css("opacity", 1).removeClass("hidden");
+      $("#top #menu .account .avatar")
+        .stop(true, true)
+        .css({ opacity: 1 })
+        .animate(
+          {
+            opacity: 0,
+          },
+          100,
+          () => {
+            $("#top #menu .account .avatar").addClass("hidden");
+          }
+        );
+    } else {
+      $("#top #menu .account .loading")
+        .stop(true, true)
+        .removeClass("hidden")
+        .css({ opacity: 0 })
+        .animate(
+          {
+            opacity: 1,
+          },
+          100
+        );
+      $("#top #menu .account .user")
+        .stop(true, true)
+        .css({ opacity: 1 })
+        .animate(
+          {
+            opacity: 0,
+          },
+          100,
+          () => {
+            $("#top #menu .account .user").addClass("hidden");
+          }
+        );
     }
-    $("#top #menu .account .icon").html('<i class="fas fa-fw fa-user"></i>');
+  } else {
     $("#top #menu .account").css("opacity", 1).css("pointer-events", "auto");
+
+    if (usingAvatar) {
+      $("#top #menu .account .loading").css("opacity", 1).addClass("hidden");
+      $("#top #menu .account .avatar")
+        .stop(true, true)
+        .removeClass("hidden")
+        .css({ opacity: 0 })
+        .animate(
+          {
+            opacity: 1,
+          },
+          100
+        );
+    } else {
+      $("#top #menu .account .loading")
+        .stop(true, true)
+        .css({ opacity: 1 })
+        .animate(
+          {
+            opacity: 0,
+          },
+          100,
+          () => {
+            $("#top #menu .account .loading").addClass("hidden");
+          }
+        );
+      $("#top #menu .account .user")
+        .stop(true, true)
+        .removeClass("hidden")
+        .css({ opacity: 0 })
+        .animate(
+          {
+            opacity: 1,
+          },
+          100
+        );
+    }
   }
 }
 
@@ -55,11 +119,12 @@ export async function update(
         );
         usingAvatar = true;
 
-        $("#top #menu .account .icon").addClass("hidden");
+        $("#top #menu .account .user").addClass("hidden");
         $("#top #menu .account .avatar").removeClass("hidden");
       }
     } else {
       $("#top #menu .account .avatar").addClass("hidden");
+      $("#top #menu .account .user").removeClass("hidden");
     }
     Misc.swapElements(
       $("#menu .textButton.login"),
diff --git a/frontend/static/html/top.html b/frontend/static/html/top.html
index 5edc30218..52a5d4ea1 100644
--- a/frontend/static/html/top.html
+++ b/frontend/static/html/top.html
@@ -106,7 +106,10 @@
       onclick="this.blur();"
       router-link
     >
-      <div class="icon">
+      <div class="loading hidden">
+        <i class="fas fa-fw fa-spin fa-circle-notch"></i>
+      </div>
+      <div class="user">
         <i class="fas fa-fw fa-user"></i>
       </div>
       <div class="avatar hidden"></div>