feat(nui): Circle progressbar

web/src/components/App.tsx

@@ -1,8 +1,11 @@
 import Notifications from "./Notifications";
+import CircleProgressbar from "./CircleProgressbar";
+import { CircularProgress } from "@chakra-ui/react";
 
 const App: React.FC = () => {
   return (
     <>
+      <CircleProgressbar />
       <Notifications />
     </>
   );

web/src/components/CircleProgressbar.tsx

@@ -0,0 +1,80 @@
+import React from "react";
+import {
+  CircularProgress,
+  CircularProgressLabel,
+  Flex,
+  ScaleFade,
+} from "@chakra-ui/react";
+import { useNuiEvent } from "../hooks/useNuiEvent";
+import { debugData } from "../utils/debugData";
+import { fetchNui } from "../utils/fetchNui";
+
+interface Props {
+  duration: number;
+}
+
+debugData([
+  {
+    action: "circleProgress",
+    data: {
+      duration: 8000,
+    },
+  },
+]);
+
+const CircleProgressbar: React.FC = () => {
+  const [visible, setVisible] = React.useState(false);
+  const [progressDuration, setProgressDuration] = React.useState(0);
+  const [value, setValue] = React.useState(0);
+
+  const progressComplete = () => {
+    setVisible(false);
+    fetchNui("progressComplete");
+  };
+
+  useNuiEvent<Props>("circleProgress", (data) => {
+    if (visible) return;
+    setVisible(true);
+    setValue(0);
+    setProgressDuration(data.duration);
+    const onePercent = data.duration * 0.01;
+    const updateProgress = setInterval(() => {
+      setValue((previousValue) => {
+        const newValue = previousValue + 1;
+        newValue >= 100 && clearInterval(updateProgress);
+        return newValue;
+      });
+    }, onePercent);
+  });
+
+  return (
+    <Flex
+      h="20%"
+      w="100%"
+      position="absolute"
+      bottom="0"
+      justifyContent="center"
+      alignItems="center"
+    >
+      <ScaleFade in={visible} unmountOnExit>
+        <CircularProgress
+          value={value}
+          size="7rem"
+          onAnimationEnd={progressComplete}
+          sx={{
+            ".chakra-progress__indicator": {
+              transition: "none !important",
+              animation: "progress linear forwards !important",
+              animationDuration: `${progressDuration}ms !important`,
+              opacity: "1 !important",
+            },
+          }}
+        >
+          <CircularProgressLabel color="black">{value}%</CircularProgressLabel>
+        </CircularProgress>
+      </ScaleFade>
+    </Flex>
+  );
+};
+
+export default CircleProgressbar;

web/src/index.css

@@ -17,3 +17,12 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
+
+@keyframes progress {
+  0% {
+    stroke-dasharray: 0, 264;
+  }
+  100% {
+    stroke-dasharray: 264, 0;
+  }
+}

web/src/index.tsx

@@ -5,6 +5,14 @@ import App from "./components/App";
 import { VisibilityProvider } from "./providers/VisibilityProvider";
 import { ChakraProvider } from "@chakra-ui/react";
 import { theme } from "./theme";
+import { debugData } from "./utils/debugData";
+
+debugData([
+  {
+    action: "setVisible",
+    data: true,
+  },
+]);
 
 ReactDOM.render(
   <React.StrictMode>