fix(web/progressbar): fix progressbar getting stuck on screen

Chakra's ScaleFade transition was causing the progress bar not to rerender properly
overextended · May 10, 2022 · 9c7d9c4 · 9c7d9c4
1 parent bc6a6c7
commit 9c7d9c4
Showing 1 changed file with 7 additions and 5 deletions.
diff --git 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>
   );