From 9c7d9c44b7455f1e0c7c05d4a2b79b79fdd43c32 Mon Sep 17 00:00:00 2001
From: Luke <sabolukas03@gmail.com>
Date: Tue, 10 May 2022 16:39:05 +0200
Subject: [PATCH] fix(web/progressbar): fix progressbar getting stuck on screen

Chakra's ScaleFade transition was causing the progress bar not to rerender properly
---
 web/src/features/progress/Progressbar.tsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/web/src/features/progress/Progressbar.tsx b/web/src/features/progress/Progressbar.tsx
index c97c116..c65e27b 100644
--- a/web/src/features/progress/Progressbar.tsx
+++ b/web/src/features/progress/Progressbar.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Text, Flex, Box, ScaleFade } from "@chakra-ui/react";
+import { Text, Flex, Box } from "@chakra-ui/react";
 import { useNuiEvent } from "../../hooks/useNuiEvent";
 import { debugData } from "../../utils/debugData";
 import { fetchNui } from "../../utils/fetchNui";
@@ -40,7 +40,6 @@ const Progressbar: React.FC = () => {
   useNuiEvent("progressCancel", progressCancel);
 
   useNuiEvent<Props>("progress", (data) => {
-    if (visible) return;
     setCancelled(false);
     setVisible(true);
     setLabel(data.label);
@@ -57,7 +56,7 @@ const Progressbar: React.FC = () => {
       alignItems="center"
     >
       <Box width={350}>
-        <ScaleFade in={visible} unmountOnExit>
+        {visible && (
           <Box
             height={45}
             bg="rgba(0, 0, 0, 0.6)"
@@ -72,11 +71,14 @@ const Progressbar: React.FC = () => {
               sx={
                 !cancelled
                   ? {
+                      width: "0%",
                       backgroundColor: "green.400",
-                      animation: `progress-bar linear ${duration}ms`,
+                      animation: "progress-bar linear",
+                      animationDuration: `${duration}ms`,
                     }
                   : {
                       width: "100%",
+                      animationPlayState: "paused",
                       backgroundColor: "rgb(198, 40, 40)",
                     }
               }
@@ -94,7 +96,7 @@ const Progressbar: React.FC = () => {
               {label}
             </Text>
           </Box>
-        </ScaleFade>
+        )}
       </Box>
     </Flex>
   );