diff --git a/scm-ui/ui-webapp/src/repos/branches/components/AheadBehindTag.tsx b/scm-ui/ui-webapp/src/repos/branches/components/AheadBehindTag.tsx
index eb95c0a8f3..6bcc900f7b 100644
--- a/scm-ui/ui-webapp/src/repos/branches/components/AheadBehindTag.tsx
+++ b/scm-ui/ui-webapp/src/repos/branches/components/AheadBehindTag.tsx
@@ -28,11 +28,12 @@ import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 import { Tooltip } from "@scm-manager/ui-overlays";
 import { Icon } from "@scm-manager/ui-buttons";
+import { SmallLoadingSpinner } from "@scm-manager/ui-components";
 
 type Props = {
   branch: Branch;
   details?: BranchDetails;
-  labelId?: string
+  labelId?: string;
 };
 
 const Count = styled.span`
@@ -43,24 +44,27 @@ const Count = styled.span`
 const AheadBehindTag: FC<Props> = ({ branch, details, labelId }) => {
   const [t] = useTranslation("repos");
 
-  if (
-    branch.defaultBranch ||
-    !details ||
-    typeof details.changesetsBehind !== "number" ||
-    typeof details.changesetsAhead !== "number"
-  ) {
+  if (branch.defaultBranch) {
     return null;
   }
 
+  if (!details || typeof details.changesetsBehind !== "number" || typeof details.changesetsAhead !== "number") {
+    return <SmallLoadingSpinner />;
+  }
+
   return (
     <Tooltip
       message={t("branch.aheadBehind.tooltip", { ahead: details.changesetsAhead, behind: details.changesetsBehind })}
     >
       <span aria-labelledby={labelId} className="is-inline-flex is-align-items-center">
         <Icon className={details.changesetsAhead > 0 ? "has-text-success" : "has-text-grey-light"}>arrow-up</Icon>
-        <Count aria-label={t("branch.aheadBehind.ahead")} className="is-size-7 pl-0">{details.changesetsAhead}</Count>
+        <Count aria-label={t("branch.aheadBehind.ahead")} className="is-size-7 pl-0">
+          {details.changesetsAhead}
+        </Count>
         <Icon className={details.changesetsBehind > 0 ? "has-text-warning" : "has-text-grey-light"}>arrow-down</Icon>
-        <Count aria-label={t("branch.aheadBehind.behind")} className="is-size-7 pr-1">{details.changesetsBehind}</Count>
+        <Count aria-label={t("branch.aheadBehind.behind")} className="is-size-7 pr-1">
+          {details.changesetsBehind}
+        </Count>
       </span>
     </Tooltip>
   );
diff --git a/scm-ui/ui-webapp/src/repos/branches/components/BranchListItem.tsx b/scm-ui/ui-webapp/src/repos/branches/components/BranchListItem.tsx
index 90b8a7acc1..d8d6877956 100644
--- a/scm-ui/ui-webapp/src/repos/branches/components/BranchListItem.tsx
+++ b/scm-ui/ui-webapp/src/repos/branches/components/BranchListItem.tsx
@@ -29,7 +29,7 @@ import { Link } from "react-router-dom";
 import { encodePart } from "../../sources/components/content/FileLink";
 import { useKeyboardIteratorTarget } from "@scm-manager/ui-shortcuts";
 import { Trans, useTranslation } from "react-i18next";
-import {DateFromNow, SmallLoadingSpinner} from "@scm-manager/ui-components";
+import { DateFromNow } from "@scm-manager/ui-components";
 import { ExtensionPoint, extensionPoints } from "@scm-manager/ui-extensions";
 import React, { FC } from "react";
 import { Branch, BranchDetails, Repository } from "@scm-manager/ui-types";
@@ -108,7 +108,7 @@ const BranchListItem: FC<Props> = ({ branch, remove, isLoading, branchesDetails,
                 <Card.Details.Detail.Label id={labelId}>
                   {branch.defaultBranch ? null : t("branch.aheadBehind.label")}
                 </Card.Details.Detail.Label>
-                {isLoading? <SmallLoadingSpinner/> : <AheadBehindTag branch={branch} details={branchDetails} labelId={labelId} />}
+                <AheadBehindTag branch={branch} details={branchDetails} labelId={labelId} />
               </>
             )}
           </Card.Details.Detail>