suid icon indicating copy to clipboard operation
suid copied to clipboard

Random LinearProgress animation even if value={0}

Open Azq2 opened this issue 1 year ago • 0 comments

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>

Azq2 avatar Apr 21 '24 14:04 Azq2