suid
suid copied to clipboard
Random LinearProgress animation even if value={0}
Video: https://github.com/swordev/suid/assets/5139482/33b0a174-f06f-4f88-87c7-24e1ff845299
Code for https://suid.io/tools/playground
import { onMount, onCleanup, createSignal, Show } from "solid-js";
import { Box } from "@suid/material";
import { LinearProgress } from "@suid/material";
import { Button } from "@suid/material";
import { createTheme, ThemeProvider } from '@suid/material/styles';
import CssBaseline from '@suid/material/CssBaseline';
export default function App() {
let [progressValue, setProgressValue] = createSignal(null);
let handleClick = () => {
setProgressValue({
pct: 0,
value: `? Kb`,
total: `? Kb`,
speed: `0 Kb/s`
});
setTimeout(() => setProgressValue(null), 1000);
};
return (
<ThemeProvider theme={createTheme()}>
<CssBaseline />
<Button variant="contained" disabled={progressValue()} onClick={handleClick}>
Click
</Button>
<Show when={progressValue()}>
<Box sx={{ width: '100%', mt: 1 }}>
<LinearProgress variant="determinate" value={0} />
</Box>
<Box>
{progressValue().value} / {progressValue().total}, {progressValue().speed}
</Box>
</Show>
</ThemeProvider>
);
}
Bug reproduces only when this part present:
<Box>
{progressValue().value} / {progressValue().total}, {progressValue().speed}
</Box>