From 28ce82da7a65d6161076653aaa0f2f089469f803 Mon Sep 17 00:00:00 2001
From: Matt <github@nospam.33m.co>
Date: Fri, 5 Jul 2024 19:25:10 +0100
Subject: [PATCH] [docs][LinearBuffer] Fix demo

---
 .../components/progress/LinearBuffer.js       | 29 +++++++++++++++----
 .../components/progress/LinearBuffer.tsx      | 29 +++++++++++++++----
 2 files changed, 46 insertions(+), 12 deletions(-)

diff --git a/docs/data/material/components/progress/LinearBuffer.js b/docs/data/material/components/progress/LinearBuffer.js
index 1e9c03f8839610..e5ddb1939b694a 100644
--- a/docs/data/material/components/progress/LinearBuffer.js
+++ b/docs/data/material/components/progress/LinearBuffer.js
@@ -6,25 +6,42 @@ export default function LinearBuffer() {
   const [progress, setProgress] = React.useState(0);
   const [buffer, setBuffer] = React.useState(10);
 
+  const bufferRef = React.useRef(() => {});
+  React.useEffect(() => {
+    bufferRef.current = () => {
+      if (buffer < 100) {
+          const newBuffer = buffer + 1 + Math.random() * 10;
+          setBuffer(newBuffer > 100 ? 100 : newBuffer);
+      }
+    };
+  });
+
   const progressRef = React.useRef(() => {});
   React.useEffect(() => {
     progressRef.current = () => {
-      if (progress > 100) {
+      if (progress === 100) {
         setProgress(0);
         setBuffer(10);
       } else {
-        const diff = Math.random() * 10;
-        const diff2 = Math.random() * 10;
-        setProgress(progress + diff);
-        setBuffer(progress + diff + diff2);
+        setProgress(progress + 1);
       }
     };
   });
 
+    React.useEffect(() => {
+    const timer = setInterval(() => {
+      bufferRef.current();
+    }, 500);
+
+    return () => {
+      clearInterval(timer);
+    };
+  }, []);
+
   React.useEffect(() => {
     const timer = setInterval(() => {
       progressRef.current();
-    }, 500);
+    }, 100);
 
     return () => {
       clearInterval(timer);
diff --git a/docs/data/material/components/progress/LinearBuffer.tsx b/docs/data/material/components/progress/LinearBuffer.tsx
index 1e9c03f8839610..d0146de519809a 100644
--- a/docs/data/material/components/progress/LinearBuffer.tsx
+++ b/docs/data/material/components/progress/LinearBuffer.tsx
@@ -6,25 +6,42 @@ export default function LinearBuffer() {
   const [progress, setProgress] = React.useState(0);
   const [buffer, setBuffer] = React.useState(10);
 
+  const bufferRef = React.useRef(() => {});  
+  React.useEffect(() => {
+    bufferRef.current = () => {
+      if (buffer < 100) {
+          const newBuffer = buffer + 1 + Math.random() * 10;
+          setBuffer(newBuffer > 100 ? 100 : newBuffer);
+      }
+    };
+  });
+  
   const progressRef = React.useRef(() => {});
   React.useEffect(() => {
     progressRef.current = () => {
-      if (progress > 100) {
+      if (progress === 100) {
         setProgress(0);
         setBuffer(10);
       } else {
-        const diff = Math.random() * 10;
-        const diff2 = Math.random() * 10;
-        setProgress(progress + diff);
-        setBuffer(progress + diff + diff2);
+        setProgress(progress + 1);
       }
     };
   });
+  
+    React.useEffect(() => {
+    const timer = setInterval(() => {
+      bufferRef.current();
+    }, 500);
+
+    return () => {
+      clearInterval(timer);
+    };
+  }, []);
 
   React.useEffect(() => {
     const timer = setInterval(() => {
       progressRef.current();
-    }, 500);
+    }, 100);
 
     return () => {
       clearInterval(timer);