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`,

web/src/transitions/ScaleFade.tsx

@@ -1,9 +1,13 @@
 import { AnimatePresence, motion } from 'framer-motion';
 
-const ScaleFade: React.FC<{ visible: boolean; children: React.ReactNode }> = ({ visible, children }) => {
+const ScaleFade: React.FC<{ visible: boolean; children: React.ReactNode; onExitComplete?: () => void }> = ({
+  visible,
+  children,
+  onExitComplete,
+}) => {
   return (
     <>
-      <AnimatePresence>
+      <AnimatePresence onExitComplete={onExitComplete}>
         {visible && (
           <motion.div
             initial={{ opacity: 0, scale: 0.95 }}