From 3de027ed6d2566a9f0debb5370e87699eaab9739 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tarik=20G=C3=BCrsoy?= <tarik.guersoy@cloudogu.com>
Date: Mon, 14 Aug 2023 20:29:34 +0200
Subject: [PATCH] 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                           | 2 ++
 .../src/repos/branches/components/BranchListItem.tsx         | 5 ++---
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/gradle/changelog/ahead-behind.yaml b/gradle/changelog/ahead-behind.yaml
index bb66e2d2c8..d3804f40ca 100644
--- a/gradle/changelog/ahead-behind.yaml
+++ b/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
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 5c65c0857b..90b8a7acc1 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 } 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>