Reimplement loading spinner for ahead/behind in branch list

Committed-by: Konstantin Schaper <konstantin.schaper@cloudogu.com>
Co-authored-by: tarik-guersoy <tarik.guersoy@cloudogu.com>

gradle/changelog/ahead-behind.yaml

@@ -1,2 +1,4 @@
 - type: changed
   description: Apply new design to ahead behind tag
+- type: bugfix
+  description: Fixed a bug where the loadingspinner would not show up

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 } from "@scm-manager/ui-components";
+import {DateFromNow, SmallLoadingSpinner} 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";
@@ -47,7 +47,6 @@ type Props = {
 const BranchListItem: FC<Props> = ({ branch, remove, isLoading, branchesDetails, baseUrl, repository }) => {
   const [t] = useTranslation("repos");
   const branchDetails = branchesDetails?.find(({ branchName }) => branchName === branch.name);
-
   return (
     <CardList.Card
       key={branch.name}
@@ -109,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>
-                <AheadBehindTag branch={branch} details={branchDetails} labelId={labelId} />
+                {isLoading? <SmallLoadingSpinner/> : <AheadBehindTag branch={branch} details={branchDetails} labelId={labelId} />}
               </>
             )}
           </Card.Details.Detail>