From ec75dd89e325e4443359b9a63293f46c7b74f639 Mon Sep 17 00:00:00 2001
From: Nichole Frey <nicholeuf@users.noreply.github.com>
Date: Sat, 16 Dec 2023 15:59:57 -0500
Subject: [PATCH] bug fix for "ResizeObserver loop completed with undelivered
 notifications."

https://github.com/vuejs/vue-cli/issues/7431#issuecomment-1793385162
---
 course-react-ts-portfolio/jbook/src/index.tsx |  1 +
 .../jbook/src/resize-observer-bug-fix.ts      | 24 +++++++++++++++++++
 2 files changed, 25 insertions(+)
 create mode 100644 course-react-ts-portfolio/jbook/src/resize-observer-bug-fix.ts

diff --git a/course-react-ts-portfolio/jbook/src/index.tsx b/course-react-ts-portfolio/jbook/src/index.tsx
index 1dcdad5..496d16a 100644
--- a/course-react-ts-portfolio/jbook/src/index.tsx
+++ b/course-react-ts-portfolio/jbook/src/index.tsx
@@ -1,5 +1,6 @@
 import ReactDOM from 'react-dom';
 import CodeCell from './components/code-cell';
+import './resize-observer-bug-fix';
 
 const App = () => {
   return (
diff --git a/course-react-ts-portfolio/jbook/src/resize-observer-bug-fix.ts b/course-react-ts-portfolio/jbook/src/resize-observer-bug-fix.ts
new file mode 100644
index 0000000..870e1dd
--- /dev/null
+++ b/course-react-ts-portfolio/jbook/src/resize-observer-bug-fix.ts
@@ -0,0 +1,24 @@
+// Taken from https://github.com/vuejs/vue-cli/issues/7431#issuecomment-1793385162
+
+// Stop error resizeObserver
+const debounce = (callback: (...args: any[]) => void, delay: number) => {
+  let tid: any;
+  return function (...args: any[]) {
+    // eslint-disable-next-line no-restricted-globals
+    const ctx = self;
+    tid && clearTimeout(tid);
+    tid = setTimeout(() => {
+      callback.apply(ctx, args);
+    }, delay);
+  };
+};
+
+const _ = (window as any).ResizeObserver;
+(window as any).ResizeObserver = class ResizeObserver extends _ {
+  constructor(callback: (...args: any[]) => void) {
+    callback = debounce(callback, 20);
+    super(callback);
+  }
+};
+
+export {};