UIBULKED-130 Progress bar blinks (reloads) on the first run (#152)

folio-org · Aug 5, 2022 · bf4bdb2 · bf4bdb2
1 parent 82afaf7
commit bf4bdb2
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 6 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,7 +2,9 @@
 
 ## In progress
 
-## [2.0.0](https://github.com/folio-org/ui-bulk-edit/tree/v2.0.1) (2022-07-22)
+* [UIBULKED-130](https://issues.folio.org/browse/UIBULKED-130) Progress bar blinks (reloads) on the first run
+
+## [2.0.1](https://github.com/folio-org/ui-bulk-edit/tree/v2.0.1) (2022-07-22)
 
 * [UIBULKED-121](https://issues.folio.org/browse/UIBULKED-121) Duplicate request to /bulk-edit/{UUID}/start
 * [UIBULKED-111](https://issues.folio.org/browse/UIBULKED-111) Added row's action by default should be "Select action"

diff --git a/src/API/useProgressStatus.js b/src/API/useProgressStatus.js
@@ -26,7 +26,7 @@ export const useProgressStatus = (id, typeOfProgress) => {
     });
   };
 
-  const { data } = useQuery({
+  const { data, remove } = useQuery({
     queryKey: ['progress', id],
     queryFn: () => ky.get(`data-export-spring/jobs/${id}`).json(),
     enabled: !!id,
@@ -51,5 +51,6 @@ export const useProgressStatus = (id, typeOfProgress) => {
 
   return {
     data,
+    remove,
   };
 };
diff --git a/src/components/ProgressBar/ProgressBar.css b/src/components/ProgressBar/ProgressBar.css
@@ -33,7 +33,6 @@
 .progressBarLine div {
     border-radius: 15px;
     background-color: var( --primary);
-    width: 60%;
     height: 100%;
     transition: width .2s linear;
 }

diff --git a/src/components/ProgressBar/ProgressBar.js b/src/components/ProgressBar/ProgressBar.js
@@ -10,19 +10,21 @@ import { useProgressStatus } from '../../API/useProgressStatus';
 export const ProgressBar = ({ updatedId, typeOfProgress }) => {
   const location = useLocation();
   const history = useHistory();
-  const { data } = useProgressStatus(updatedId, typeOfProgress);
+  const { data, remove } = useProgressStatus(updatedId, typeOfProgress);
   const processedTitle = new URLSearchParams(location.search).get('processedFileName');
   const title = new URLSearchParams(location.search).get('fileName');
 
   useEffect(() => {
     if (!processedTitle && location.pathname.includes('processed')) {
+      remove();
       history.replace({
         pathname: location.pathname,
         search: buildSearch({ isCompleted: true }, location.search),
       });
     }
-  }, [history, location.pathname, location.search, processedTitle]);
+  }, [location.pathname, location.search, processedTitle]);
 
+  const progressValue = data?.progress?.progress || 1;
 
   return (
     <div className={css.progressBar}>
@@ -40,7 +42,7 @@ export const ProgressBar = ({ updatedId, typeOfProgress }) => {
       </div>
       <div className={css.progressBarBody}>
         <div className={css.progressBarLine}>
-          <div data-testid="progress-line" style={{ width: `${data?.progress?.progress}%` }} />
+          <div data-testid="progress-line" style={{ width: `${progressValue}%` }} />
         </div>
         <div className={css.progressBarLineStatus}>
           <span><FormattedMessage id="ui-bulk-edit.progresssBar.retrieving" /></span>