From 97dc0cabdde06d26e933b85c65dee76904114074 Mon Sep 17 00:00:00 2001
From: Luke <sabolukas03@gmail.com>
Date: Sat, 31 Dec 2022 15:52:39 +0100
Subject: [PATCH] refactor(web/progress): use scale fade transition for
 progress

---
 .../features/progress/CircleProgressbar.tsx   | 17 +++---
 web/src/features/progress/Progressbar.tsx     | 59 ++++++++++++-------
 2 files changed, 46 insertions(+), 30 deletions(-)

diff --git a/web/src/features/progress/CircleProgressbar.tsx b/web/src/features/progress/CircleProgressbar.tsx
index b504619..709dd38 100644
--- a/web/src/features/progress/CircleProgressbar.tsx
+++ b/web/src/features/progress/CircleProgressbar.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { RingProgress, Text, useMantineTheme, keyframes, Stack, createStyles } from '@mantine/core';
 import { useNuiEvent } from '../../hooks/useNuiEvent';
 import { fetchNui } from '../../utils/fetchNui';
+import ScaleFade from '../../transitions/ScaleFade';
 
 export interface CircleProgressbarProps {
   label?: string;
@@ -18,11 +19,11 @@ const progressCircle = keyframes({
 
 const useStyles = createStyles((theme, params: { position: 'middle' | 'bottom'; duration: number }) => ({
   container: {
+    width: '100%',
+    height: params.position === 'middle' ? '100%' : '20%',
+    bottom: 0,
     position: 'absolute',
-    top: params.position === 'middle' ? '50%' : undefined,
-    bottom: params.position === 'bottom' ? '20%' : undefined,
-    left: '50%',
-    transform: 'translate(-50%, -50%)',
+    display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
   },
@@ -85,8 +86,8 @@ const CircleProgressbar: React.FC = () => {
 
   return (
     <>
-      {visible && (
-        <Stack spacing={0} className={classes.container} bottom="0">
+      <Stack spacing={0} className={classes.container}>
+        <ScaleFade visible={visible}>
           <RingProgress
             size={90}
             thickness={7}
@@ -96,8 +97,8 @@ const CircleProgressbar: React.FC = () => {
             label={<Text className={classes.value}>{value}%</Text>}
           />
           {label && <Text className={classes.label}>{label}</Text>}
-        </Stack>
-      )}
+        </ScaleFade>
+      </Stack>
     </>
   );
 };
diff --git a/web/src/features/progress/Progressbar.tsx b/web/src/features/progress/Progressbar.tsx
index c798291..36d9885 100644
--- a/web/src/features/progress/Progressbar.tsx
+++ b/web/src/features/progress/Progressbar.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { Progress, Box, Text, createStyles } from '@mantine/core';
 import { useNuiEvent } from '../../hooks/useNuiEvent';
 import { fetchNui } from '../../utils/fetchNui';
+import ScaleFade from '../../transitions/ScaleFade';
 
 export interface ProgressbarProps {
   label: string;
@@ -12,29 +13,39 @@ const useStyles = createStyles((theme) => ({
   container: {
     width: 350,
     height: 45,
-    position: 'absolute',
-    bottom: '15%',
-    left: '50%',
-    transform: 'translate(-50%)',
     borderRadius: theme.radius.xs,
     backgroundColor: 'rgba(0, 0, 0, 0.5)',
   },
+  wrapper: {
+    width: '100%',
+    height: '20%',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    bottom: 0,
+    position: 'absolute',
+  },
   bar: {
     height: '100%',
     borderRadius: theme.radius.xs,
     backgroundColor: theme.colors[theme.primaryColor][theme.fn.primaryShade()],
   },
+  labelWrapper: {
+    position: 'absolute',
+    display: 'flex',
+    width: 350,
+    height: 45,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
   label: {
     maxWidth: 350,
     padding: 8,
     textOverflow: 'ellipsis',
     overflow: 'hidden',
     whiteSpace: 'nowrap',
-    position: 'absolute',
-    top: '50%',
-    left: '50%',
-    transform: 'translate(-50%, -50%)',
     fontSize: 20,
+    textShadow: theme.shadows.sm,
   },
 }));
 
@@ -66,20 +77,24 @@ const Progressbar: React.FC = () => {
 
   return (
     <>
-      {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>
-      )}
+      <Box className={classes.wrapper}>
+        <ScaleFade visible={visible}>
+          <Box className={classes.container}>
+            <Box
+              className={classes.bar}
+              onAnimationEnd={progressComplete}
+              sx={{
+                animation: 'progress-bar linear',
+                animationDuration: `${duration}ms`,
+              }}
+            >
+              <Box className={classes.labelWrapper}>
+                <Text className={classes.label}>{label}</Text>
+              </Box>
+            </Box>
+          </Box>
+        </ScaleFade>
+      </Box>
     </>
   );
 };