swordev / suid

A port of Material-UI (MUI) built with SolidJS.
https://suid.io
MIT License
660 stars 47 forks source link

Random LinearProgress animation even if value={0} #290

Closed Azq2 closed 2 weeks ago

Azq2 commented 3 months ago

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>