FumeNodes/ox_lib
1
0
Fork 0
mirror of https://github.com/CommunityOx/ox_lib.git synced 2026-08-19 07:56:02 +01:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
Chakra's ScaleFade transition was causing the progress bar not to rerender properly
This commit is contained in:
Luke
2022-05-10 16:39:05 +02:00
parent bc6a6c7a0a
commit 9c7d9c44b7
1 changed files with 7 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
web/src/features/progress/Progressbar.tsx
View File

@@ -1,5 +1,5 @@
import React from "react"; 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 { useNuiEvent } from "../../hooks/useNuiEvent";
import { debugData } from "../../utils/debugData"; import { debugData } from "../../utils/debugData";
import { fetchNui } from "../../utils/fetchNui"; import { fetchNui } from "../../utils/fetchNui";
@@ -40,7 +40,6 @@ const Progressbar: React.FC = () => {
useNuiEvent("progressCancel", progressCancel); useNuiEvent("progressCancel", progressCancel);
useNuiEvent<Props>("progress", (data) => { useNuiEvent<Props>("progress", (data) => {
if (visible) return;
setCancelled(false); setCancelled(false);
setVisible(true); setVisible(true);
setLabel(data.label); setLabel(data.label);
@@ -57,7 +56,7 @@ const Progressbar: React.FC = () => {
alignItems="center" alignItems="center"
> >
<Box width={350}> <Box width={350}>
<ScaleFade in={visible} unmountOnExit> {visible && (
<Box <Box
height={45} height={45}
bg="rgba(0, 0, 0, 0.6)" bg="rgba(0, 0, 0, 0.6)"
@@ -72,11 +71,14 @@ const Progressbar: React.FC = () => {
sx={ sx={
!cancelled !cancelled
? { ? {
width: "0%",
backgroundColor: "green.400", backgroundColor: "green.400",
animation: `progress-bar linear ${duration}ms`, animation: "progress-bar linear",
animationDuration: `${duration}ms`,
} }
: { : {
width: "100%", width: "100%",
animationPlayState: "paused",
backgroundColor: "rgb(198, 40, 40)", backgroundColor: "rgb(198, 40, 40)",
} }
} }
@@ -94,7 +96,7 @@ const Progressbar: React.FC = () => {
{label} {label}
</Text> </Text>
</Box> </Box>
</ScaleFade> )}
</Box> </Box>
</Flex> </Flex>
); );