From 39bbc212efd0d55847a9cc1b3b7c8e7f6e685bf9 Mon Sep 17 00:00:00 2001
From: Juanra GM <juanrgm724@gmail.com>
Date: Sun, 14 Jul 2024 20:11:28 +0200
Subject: [PATCH] fix(material): avoid random animation

Closes #290
---
 .../src/LinearProgress/LinearProgress.tsx     | 25 ++++++++++++++-----
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/packages/material/src/LinearProgress/LinearProgress.tsx b/packages/material/src/LinearProgress/LinearProgress.tsx
index c21ce5823..3f58a826d 100644
--- a/packages/material/src/LinearProgress/LinearProgress.tsx
+++ b/packages/material/src/LinearProgress/LinearProgress.tsx
@@ -12,7 +12,13 @@ import { redefine } from "@suid/system/createStyled";
 import { InPropsOf } from "@suid/types";
 import randomString from "@suid/utils/randomString";
 import clsx from "clsx";
-import { createEffect, createSignal, JSX, Show } from "solid-js";
+import {
+  createEffect,
+  createRenderEffect,
+  createSignal,
+  JSX,
+  Show,
+} from "solid-js";
 
 const $ = createComponentFactory<LinearProgressTypeMap>()({
   name: "MuiLinearProgress",
@@ -302,11 +308,6 @@ const LinearProgress = $.component(function LinearProgress({
         element.ref.ariaValueNow = Math.round(props.value).toString();
         element.ref.ariaValueMin = "0";
         element.ref.ariaValueMax = "100";
-        let transform = props.value - 100;
-        if (theme.direction === "rtl") {
-          transform = -transform;
-        }
-        setBar1Style({ transform: `translateX(${transform}%)` });
       } else if (process.env.NODE_ENV !== "production") {
         console.error(
           "MUI: You need to provide a value prop " +
@@ -316,6 +317,18 @@ const LinearProgress = $.component(function LinearProgress({
     }
   });
 
+  createRenderEffect(() => {
+    if (props.variant === "determinate" || props.variant === "buffer") {
+      if (props.value !== undefined) {
+        let transform = props.value - 100;
+        if (theme.direction === "rtl") {
+          transform = -transform;
+        }
+        setBar1Style({ transform: `translateX(${transform}%)` });
+      }
+    }
+  });
+
   createEffect(() => {
     if (props.variant === "buffer") {
       if (props.valueBuffer !== undefined) {