fix(web/progress): nui callback on progress unmount

fixes an issue where activating 2 progress bars/circles one after another would cause a stuck progress bar.

resolves #227

web/src/features/progress/CircleProgressbar.tsx

@@ -58,17 +58,10 @@ const CircleProgressbar: React.FC = () => {
   const theme = useMantineTheme();
   const { classes } = useStyles({ position, duration: progressDuration });
 
-  const progressComplete = () => {
+  useNuiEvent('progressCancel', () => {
+    setValue(99);
     setVisible(false);
-    fetchNui('progressComplete');
-  };
-
-  const progressCancel = () => {
-    setValue(99); // Sets the final value to 100% kek
-    setVisible(false);
-  };
-
-  useNuiEvent('progressCancel', progressCancel);
+  });
 
   useNuiEvent<CircleProgressbarProps>('circleProgress', (data) => {
     if (visible) return;
@@ -90,13 +83,13 @@ const CircleProgressbar: React.FC = () => {
   return (
     <>
       <Stack spacing={0} className={classes.container}>
-        <ScaleFade visible={visible}>
+        <ScaleFade visible={visible} onExitComplete={() => fetchNui('progressComplete')}>
           <Stack spacing={0} align="center" className={classes.wrapper}>
             <RingProgress
               size={90}
               thickness={7}
               sections={[{ value: 0, color: theme.primaryColor }]}
-              onAnimationEnd={progressComplete}
+              onAnimationEnd={() => setVisible(false)}
               className={classes.progress}
               label={<Text className={classes.value}>{value}%</Text>}
             />

web/src/features/progress/Progressbar.tsx

@@ -52,16 +52,7 @@ const Progressbar: React.FC = () => {
   const [label, setLabel] = React.useState('');
   const [duration, setDuration] = React.useState(0);
 
-  const progressComplete = () => {
-    setVisible(false);
-    fetchNui('progressComplete');
-  };
-
-  const progressCancel = () => {
-    setVisible(false);
-  };
-
-  useNuiEvent('progressCancel', progressCancel);
+  useNuiEvent('progressCancel', () => setVisible(false));
 
   useNuiEvent<ProgressbarProps>('progress', (data) => {
     setVisible(true);
@@ -72,11 +63,11 @@ const Progressbar: React.FC = () => {
   return (
     <>
       <Box className={classes.wrapper}>
-        <ScaleFade visible={visible}>
+        <ScaleFade visible={visible} onExitComplete={() => fetchNui('progressComplete')}>
           <Box className={classes.container}>
             <Box
               className={classes.bar}
-              onAnimationEnd={progressComplete}
+              onAnimationEnd={() => setVisible(false)}
               sx={{
                 animation: 'progress-bar linear',
                 animationDuration: `${duration}ms`,