OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

ResizeObserver loop completed with undelivered notifications in React

  • Thread starter Thread starter Ziad Assem
  • Start date Start date
Z

Ziad Assem

Guest
enter image description hereI currently have a project (a code debugger) that has 2 monaco editors side by side. there is a button bar that hides one of the editors and resizes the other one to fill the screen. Initially the page works fine. this error appears when i revert back to side by side. Even then i can dismiss the error and continue. ERROR ResizeObserver loop completed with undelivered notifications. at handleError (http://localhost:3000/static/js/bundle.js:104767:58) at http://localhost:3000/static/js/bundle.js:104786:7

Code:
import "./Options.css";
import "./MainView.css";
import ButtonBar from "../Button/Button_Bar.js";
import React, { useState, useRef, useEffect, useCallback } from "react";
import ApiHandler from "../../ApiHandler/ApiHandler";
import Editor from "@monaco-editor/react";
import { Box, IconButton, CircularProgress } from "@mui/material";
import { IoMdSend } from "react-icons/io";

function MainView() {
  const [code, setCode] = useState("");
  const [comment, setComment] = useState("");
  const [codeResult, setCodeResult] = useState("");
  const [commentResult, setCommentResult] = useState("");
  const [loading, setLoading] = useState(false);
  const inputsRef = useRef(null);
  const outputsRef = useRef(null);

  const [mode, setMode] = useState("Side-by-Side"); // Default mode

  // Debounce function
  const debounce = (func, wait) => {
    let timeout;
    return (...args) => {
      clearTimeout(timeout);
      timeout = setTimeout(() => {
        func(...args);
      }, wait);
    };
  };

  const handleModeChange = useCallback(
    debounce((buttonName) => {
      setMode(buttonName);
      setTimeout(() => {
        if (inputsRef.current) {
          inputsRef.current.dispatchEvent(new Event("resize"));
        }
        if (outputsRef.current) {
          outputsRef.current.dispatchEvent(new Event("resize"));
        }
      },100 );
    }, 200), // Adjust debounce time if necessary
    []
  );

  const handleButtonClick = async () => {
    try {
      setLoading(true);
      const formatCodeToJSON = (code) => {
        return JSON.stringify({ code });
      };
      const formattedCode = formatCodeToJSON(code);
      const response = await ApiHandler.submitCode(formattedCode, comment);
      var correctedCode = response["data"]["corrected_code"];
      if (correctedCode.startsWith("```python")) {
        correctedCode = correctedCode.split("```");
      }
      setCodeResult(correctedCode);
      setCommentResult(response["data"]["comment"]);
    } catch (error) {
      console.error(error);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    const handleResize = debounce(() => {
      if (inputsRef.current) {
        inputsRef.current.dispatchEvent(new Event("resize"));
      }
      if (outputsRef.current) {
        outputsRef.current.dispatchEvent(new Event("resize"));
      }
    }, 100);

    window.addEventListener("resize", handleResize);
    return () => {
      window.removeEventListener("resize", handleResize);
    };
  }, []);

  return (
    <div className="main-container">
      <div>
        <ButtonBar handleModeChange={handleModeChange} />
      </div>

      <div className="codefixer-area">
        <div
          ref={inputsRef}
          className={`inputs ${mode === "Buggy" ? "fullscreen" : mode === "Side-by-Side" ? "side-by-side" : "hide"}`}
        >
          <div className="rounded-editor">
            <Editor
            
              height="430px"
              language="python"
              theme="vs-dark"
              value={code}
              onChange={(value) => setCode(value)}
              options={{
                scrollbars: "none",
                inlineSuggest: true,
                fontSize: "14px",
                marginBottom: "8px",
                formatOnType: true,
                autoClosingBrackets: true,
              }}
            />
          </div>
          <Box className="chat-input">
            <textarea
              type="text"
              value={comment}
              onChange={(e) => setComment(e.target.value)}
              onKeyDown={(e) => {
                if (e.key === "Enter") {
                  handleButtonClick();
                }
              }}
              placeholder="Type additional comments here..."
              rows="4"
              style={{
                width: "100%",
                whiteSpace: "pre-wrap",
                overflowWrap: "break-word",
                border: "none",
                outline: "none",
                resize: "none",
              }}
            />
            <IconButton onClick={handleButtonClick}>
              <IoMdSend />
            </IconButton>
          </Box>
        </div>

        <div
          ref={outputsRef}
          className={`outputs ${mode === "Corrected" ? "fullscreen" : mode === "Side-by-Side" ? "side-by-side" : "hide"}`}
        >
          {loading ? (
            <Box display="flex" justifyContent="center" alignItems="center" height="100%">
              <CircularProgress />
            </Box>
          ) : (
            <div className="rounded-editor">
              <Editor
                height="430px"
                language="python"
                width="100%"
                theme="vs-dark"
                value={codeResult}
                onChange={(value) => setCodeResult(value)}
                options={{
                  readOnly: true,
                  inlineSuggest: true,
                  fontSize: "14px",
                  marginBottom: "8px",
                  formatOnType: true,
                  autoClosingBrackets: true,
                }}
              />
            </div>
          )}
          <Box className="chat-input">
            <textarea
              value={commentResult}
              rows="4"
              style={{
                width: "100%",
                resize: "none",
                boxSizing: "border-box",
                border: "none",
                outline: "none",
                resize: "none",
              }}
              readOnly
            />
          </Box>
        </div>
      </div>
    </div>
  );
}

export default MainView;

Code:
.main-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-top: 11%;
}

.codefixer-area {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.inputs,
.outputs {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin: 10px;
  transition: all 0.5s ease;
}

.inputs.hide,
.outputs.hide {
  display: none;
}

.inputs.fullscreen,
.outputs.fullscreen {
  width: 100%;
  flex: 1;
}

.inputs.side-by-side,
.outputs.side-by-side {
  width: 50%;
  
}

.rounded-editor {
  border-radius: 20px; 
  overflow: hidden; 
}

.chat-input {
  display: flex;
  gap: 4px;
  align-items: center;
  background-color: rgba(61, 59, 77, 0.3);
  border-radius: 20px;
  padding: 12px;
  width: 100%;
  margin-top: 1rem;
}

textarea {
  background-color: transparent;
  flex: 1;
  padding: 8px;
  font-size: 16px;
  border: 5px solid #1e1e1e;
  border-radius: 4px;
  resize: vertical;
  color: white;
}

i tried various methods like using a debounce method to fix it but nth works

<p><a href="https://i.sstatic.net/jtPoOgBF.png" rel="nofollow noreferrer">enter image description here</a>I currently have a project (a code debugger) that has 2 monaco editors side by side. there is a button bar that hides one of the editors and resizes the other one to fill the screen. Initially the page works fine. this error appears when i revert back to side by side. Even then i can dismiss the error and continue.
ERROR
ResizeObserver loop completed with undelivered notifications.
at handleError (http://localhost:3000/static/js/bundle.js:104767:58)
at http://localhost:3000/static/js/bundle.js:104786:7</p>
<pre><code>import "./Options.css";
import "./MainView.css";
import ButtonBar from "../Button/Button_Bar.js";
import React, { useState, useRef, useEffect, useCallback } from "react";
import ApiHandler from "../../ApiHandler/ApiHandler";
import Editor from "@monaco-editor/react";
import { Box, IconButton, CircularProgress } from "@mui/material";
import { IoMdSend } from "react-icons/io";

function MainView() {
const [code, setCode] = useState("");
const [comment, setComment] = useState("");
const [codeResult, setCodeResult] = useState("");
const [commentResult, setCommentResult] = useState("");
const [loading, setLoading] = useState(false);
const inputsRef = useRef(null);
const outputsRef = useRef(null);

const [mode, setMode] = useState("Side-by-Side"); // Default mode

// Debounce function
const debounce = (func, wait) => {
let timeout;
return (...args) => {
clearTimeout(timeout);
timeout = setTimeout(() => {
func(...args);
}, wait);
};
};

const handleModeChange = useCallback(
debounce((buttonName) => {
setMode(buttonName);
setTimeout(() => {
if (inputsRef.current) {
inputsRef.current.dispatchEvent(new Event("resize"));
}
if (outputsRef.current) {
outputsRef.current.dispatchEvent(new Event("resize"));
}
},100 );
}, 200), // Adjust debounce time if necessary
[]
);

const handleButtonClick = async () => {
try {
setLoading(true);
const formatCodeToJSON = (code) => {
return JSON.stringify({ code });
};
const formattedCode = formatCodeToJSON(code);
const response = await ApiHandler.submitCode(formattedCode, comment);
var correctedCode = response["data"]["corrected_code"];
if (correctedCode.startsWith("```python")) {
correctedCode = correctedCode.split("```");
}
setCodeResult(correctedCode);
setCommentResult(response["data"]["comment"]);
} catch (error) {
console.error(error);
} finally {
setLoading(false);
}
};

useEffect(() => {
const handleResize = debounce(() => {
if (inputsRef.current) {
inputsRef.current.dispatchEvent(new Event("resize"));
}
if (outputsRef.current) {
outputsRef.current.dispatchEvent(new Event("resize"));
}
}, 100);

window.addEventListener("resize", handleResize);
return () => {
window.removeEventListener("resize", handleResize);
};
}, []);

return (
<div className="main-container">
<div>
<ButtonBar handleModeChange={handleModeChange} />
</div>

<div className="codefixer-area">
<div
ref={inputsRef}
className={`inputs ${mode === "Buggy" ? "fullscreen" : mode === "Side-by-Side" ? "side-by-side" : "hide"}`}
>
<div className="rounded-editor">
<Editor

height="430px"
language="python"
theme="vs-dark"
value={code}
onChange={(value) => setCode(value)}
options={{
scrollbars: "none",
inlineSuggest: true,
fontSize: "14px",
marginBottom: "8px",
formatOnType: true,
autoClosingBrackets: true,
}}
/>
</div>
<Box className="chat-input">
<textarea
type="text"
value={comment}
onChange={(e) => setComment(e.target.value)}
onKeyDown={(e) => {
if (e.key === "Enter") {
handleButtonClick();
}
}}
placeholder="Type additional comments here..."
rows="4"
style={{
width: "100%",
whiteSpace: "pre-wrap",
overflowWrap: "break-word",
border: "none",
outline: "none",
resize: "none",
}}
/>
<IconButton onClick={handleButtonClick}>
<IoMdSend />
</IconButton>
</Box>
</div>

<div
ref={outputsRef}
className={`outputs ${mode === "Corrected" ? "fullscreen" : mode === "Side-by-Side" ? "side-by-side" : "hide"}`}
>
{loading ? (
<Box display="flex" justifyContent="center" alignItems="center" height="100%">
<CircularProgress />
</Box>
) : (
<div className="rounded-editor">
<Editor
height="430px"
language="python"
width="100%"
theme="vs-dark"
value={codeResult}
onChange={(value) => setCodeResult(value)}
options={{
readOnly: true,
inlineSuggest: true,
fontSize: "14px",
marginBottom: "8px",
formatOnType: true,
autoClosingBrackets: true,
}}
/>
</div>
)}
<Box className="chat-input">
<textarea
value={commentResult}
rows="4"
style={{
width: "100%",
resize: "none",
boxSizing: "border-box",
border: "none",
outline: "none",
resize: "none",
}}
readOnly
/>
</Box>
</div>
</div>
</div>
);
}

export default MainView;

</code></pre>
<pre><code>.main-container {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
padding-top: 11%;
}

.codefixer-area {
display: flex;
width: 100%;
justify-content: space-between;
}

.inputs,
.outputs {
flex: 1;
display: flex;
flex-direction: column;
margin: 10px;
transition: all 0.5s ease;
}

.inputs.hide,
.outputs.hide {
display: none;
}

.inputs.fullscreen,
.outputs.fullscreen {
width: 100%;
flex: 1;
}

.inputs.side-by-side,
.outputs.side-by-side {
width: 50%;

}

.rounded-editor {
border-radius: 20px;
overflow: hidden;
}

.chat-input {
display: flex;
gap: 4px;
align-items: center;
background-color: rgba(61, 59, 77, 0.3);
border-radius: 20px;
padding: 12px;
width: 100%;
margin-top: 1rem;
}

textarea {
background-color: transparent;
flex: 1;
padding: 8px;
font-size: 16px;
border: 5px solid #1e1e1e;
border-radius: 4px;
resize: vertical;
color: white;
}

</code></pre>
<p>i tried various methods like using a debounce method to fix it but nth works</p>
 

Latest posts

S
Replies
0
Views
1
Safwan Aipuram
S
Top