From 4562f349957856bf44cce92e608ac1f6c98c0986 Mon Sep 17 00:00:00 2001
From: grafixeyehero <grafixeyehero@yahoo.com>
Date: Sat, 22 Jun 2024 19:04:49 +0300
Subject: [PATCH] Fix Refresh Indicator

---
 .../cardbuilder/Card/CardImageContainer.tsx   |  3 +--
 .../RefreshIndicator.tsx                      | 25 +++++++++++++------
 2 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/src/components/cardbuilder/Card/CardImageContainer.tsx b/src/components/cardbuilder/Card/CardImageContainer.tsx
index db609f21e6..c6c7f2915c 100644
--- a/src/components/cardbuilder/Card/CardImageContainer.tsx
+++ b/src/components/cardbuilder/Card/CardImageContainer.tsx
@@ -54,8 +54,7 @@ const CardImageContainer: FC<CardImageContainerProps> = ({
                             indicator.getPlayedIndicator()}
 
                         {(item.Type === BaseItemKind.CollectionFolder
-                            || item.CollectionType)
-                            && item.RefreshProgress && (
+                            || item.CollectionType) && (
                             <RefreshIndicator item={item} />
                         )}
                     </Box>
diff --git a/src/elements/emby-itemrefreshindicator/RefreshIndicator.tsx b/src/elements/emby-itemrefreshindicator/RefreshIndicator.tsx
index 8121265ace..b8973da943 100644
--- a/src/elements/emby-itemrefreshindicator/RefreshIndicator.tsx
+++ b/src/elements/emby-itemrefreshindicator/RefreshIndicator.tsx
@@ -49,11 +49,20 @@ interface RefreshIndicatorProps {
 }
 
 const RefreshIndicator: FC<RefreshIndicatorProps> = ({ item, className }) => {
+    const [showProgressBar, setShowProgressBar] = useState(!!item.RefreshProgress);
     const [progress, setProgress] = useState(item.RefreshProgress || 0);
 
     const onRefreshProgress = useCallback((_e: Event, _apiClient: ApiClient, info: { ItemId: string | null | undefined; Progress: string; }) => {
         if (info.ItemId === item?.Id) {
-            setProgress(parseFloat(info.Progress));
+            const pct = parseFloat(info.Progress);
+
+            if (pct && pct < 100) {
+                setShowProgressBar(true);
+            } else {
+                setShowProgressBar(false);
+            }
+
+            setProgress(pct);
         }
     }, [item?.Id]);
 
@@ -77,15 +86,15 @@ const RefreshIndicator: FC<RefreshIndicatorProps> = ({ item, className }) => {
         };
     }, [bindEvents, item.Id, unbindEvents]);
 
-    const progressringClass = classNames(
-        'progressring',
-        className,
-        { 'hide': !progress || progress >= 100 }
-    );
+    const progressringClass = classNames('progressring', className);
 
     return (
-        <div className={progressringClass}>
-            <CircularProgressWithLabel value={Math.floor(progress)} />
+        <div>
+            {showProgressBar && (
+                <div className={progressringClass}>
+                    <CircularProgressWithLabel value={Math.floor(progress)} />
+                </div>
+            )}
         </div>
     );
 };