From f8f81db3eba7fcd3b369000e1f8b2d4051202ede Mon Sep 17 00:00:00 2001
From: Luke <sabolukas03@gmail.com>
Date: Wed, 21 Dec 2022 15:00:22 +0100
Subject: [PATCH] refactor(web/progress): hide progress bar if not visible

---
 web/src/features/progress/Progressbar.tsx | 26 ++++++++++++-----------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/web/src/features/progress/Progressbar.tsx b/web/src/features/progress/Progressbar.tsx
index 72b8e3e..c798291 100644
--- a/web/src/features/progress/Progressbar.tsx
+++ b/web/src/features/progress/Progressbar.tsx
@@ -66,18 +66,20 @@ const Progressbar: React.FC = () => {
 
   return (
     <>
-      <Box className={classes.container}>
-        <Box
-          className={classes.bar}
-          onAnimationEnd={progressComplete}
-          sx={{
-            width: '0%',
-            animation: 'progress-bar linear',
-            animationDuration: `${duration}ms`,
-          }}
-        />
-        <Text className={classes.label}>{label}</Text>
-      </Box>
+      {visible && (
+        <Box className={classes.container}>
+          <Box
+            className={classes.bar}
+            onAnimationEnd={progressComplete}
+            sx={{
+              width: '0%',
+              animation: 'progress-bar linear',
+              animationDuration: `${duration}ms`,
+            }}
+          />
+          <Text className={classes.label}>{label}</Text>
+        </Box>
+      )}
     </>
   );
 };