disable ResizeObsserver

sctg-development · Nov 6, 2024 · 253a864 · 253a864
1 parent a859828
commit 253a864
Show file tree

Hide file tree

Showing 9 changed files with 11 additions and 110 deletions.
diff --git a/src/aipane/components/Aipane.tsx b/src/aipane/components/Aipane.tsx
@@ -213,21 +213,6 @@ const Aipane: React.FC<AipaneProps> = (props: AipaneProps): React.JSX.Element =>
     }
   }, []);
 
-  useEffect(() => {
-    const resizeObserverErr = (e: ErrorEvent) => {
-      if (e.message === "ResizeObserver loop completed with undelivered notifications.") {
-        console.error("ResizeObserver loop error in Aipane");
-        e.stopImmediatePropagation();
-        e.stopPropagation();
-        e.preventDefault();
-      }
-    };
-    window.addEventListener("error", resizeObserverErr);
-    // return () => {
-    //   window.removeEventListener("error", resizeObserverErr);
-    // };
-  }, []);
-
   return (
     <div className={styles.root}>
       <Header logo="assets/logo-filled.png" title={props.title} message="AI emailer" />

diff --git a/src/aipane/components/Header.tsx b/src/aipane/components/Header.tsx
@@ -5,7 +5,6 @@
 */
 import * as React from "react";
 import { Image, tokens, makeStyles } from "@fluentui/react-components";
-import { useEffect } from "react";
 
 export interface HeaderProps {
   title: string;
@@ -33,21 +32,6 @@ const Header: React.FC<HeaderProps> = (props: HeaderProps) => {
   const { title, logo, message } = props;
   const styles = useStyles();
 
-  useEffect(() => {
-    const resizeObserverErr = (e: ErrorEvent) => {
-      if (e.message === "ResizeObserver loop completed with undelivered notifications.") {
-        console.error("ResizeObserver loop error in Header");
-        e.stopImmediatePropagation();
-        e.stopPropagation();
-        e.preventDefault();
-      }
-    };
-    window.addEventListener("error", resizeObserverErr);
-    // return () => {
-    //   window.removeEventListener("error", resizeObserverErr);
-    // };
-  }, []);
-
   return (
     <section className={styles.welcome__header}>
       <Image width="90" height="90" src={logo} alt={title} />

diff --git a/src/aipane/components/HeroApiKey.tsx b/src/aipane/components/HeroApiKey.tsx
@@ -6,7 +6,6 @@
 import * as React from "react";
 import { makeStyles, useId, Button, Input, Label } from "@fluentui/react-components";
 import { AIProvider } from "../AIPrompt";
-import { useEffect } from "react";
 
 interface HeroApiKeyProps {
   provider: AIProvider;
@@ -34,21 +33,6 @@ const HeroApiKey: React.FC<HeroApiKeyProps> = ({ apiKey, onApiKeyChange, onApiKe
   const styles = useStyles();
   const inputId = useId("input");
 
-  useEffect(() => {
-    const resizeObserverErr = (e: ErrorEvent) => {
-      if (e.message === "ResizeObserver loop completed with undelivered notifications.") {
-        console.error("ResizeObserver loop error in HeroApiKey");
-        e.stopImmediatePropagation();
-        e.stopPropagation();
-        e.preventDefault();
-      }
-    };
-    window.addEventListener("error", resizeObserverErr);
-    // return () => {
-    //   window.removeEventListener("error", resizeObserverErr);
-    // };
-  }, []);
-
   return (
     <div className={styles.root}>
       <Label htmlFor={inputId} size="large">

diff --git a/src/aipane/components/HeroComboPrompts.tsx b/src/aipane/components/HeroComboPrompts.tsx
@@ -87,21 +87,6 @@ const HeroComboPrompts: React.FC<HeroComboPromptsProps> = ({ onChange, standalon
     onChange(selectedValue);
   }, [selectedValue, onChange]);
 
-  useEffect(() => {
-    const resizeObserverErr = (e: ErrorEvent) => {
-      if (e.message === "ResizeObserver loop completed with undelivered notifications.") {
-        console.error("ResizeObserver loop error in HeroComboPrompts");
-        e.stopImmediatePropagation();
-        e.stopPropagation();
-        e.preventDefault();
-      }
-    };
-    window.addEventListener("error", resizeObserverErr);
-    // return () => {
-    //   window.removeEventListener("error", resizeObserverErr);
-    // };
-  }, []);
-
   return (
     <div className={styles.root}>
       <Label htmlFor={inputId} size="large">

diff --git a/src/aipane/components/HeroModels.tsx b/src/aipane/components/HeroModels.tsx
@@ -48,21 +48,6 @@ const HeroModels: React.FC<HeroModelsProps> = ({ onChange, provider }) => {
     onChange(selectedValue);
   }, [selectedValue, onChange]);
 
-  useEffect(() => {
-    const resizeObserverErr = (e: ErrorEvent) => {
-      if (e.message === "ResizeObserver loop completed with undelivered notifications.") {
-        console.error("ResizeObserver loop error in HeroModels");
-        e.stopImmediatePropagation();
-        e.stopPropagation();
-        e.preventDefault();
-      }
-    };
-    window.addEventListener("error", resizeObserverErr);
-    // return () => {
-    //   window.removeEventListener("error", resizeObserverErr);
-    // };
-  }, []);
-
   return (
     <div className={styles.root}>
       <Label htmlFor={selectId} size="large">

diff --git a/src/aipane/components/HeroProviders.tsx b/src/aipane/components/HeroProviders.tsx
@@ -38,21 +38,6 @@ const HeroProviders: React.FC<HeroProvidersProps> = ({ onChange }) => {
     setProviders(config.providers);
   }, []);
 
-  useEffect(() => {
-    const resizeObserverErr = (e: ErrorEvent) => {
-      if (e.message === "ResizeObserver loop completed with undelivered notifications.") {
-        console.error("ResizeObserver loop error in HeroProviders");
-        e.stopImmediatePropagation();
-        e.stopPropagation();
-        e.preventDefault();
-      }
-    };
-    window.addEventListener("error", resizeObserverErr);
-    // return () => {
-    //   window.removeEventListener("error", resizeObserverErr);
-    // };
-  }, []);
-
   const handleChange = React.useCallback(
     (event: React.FormEvent<HTMLButtonElement>, option?: any) => {
       event.preventDefault();

diff --git a/src/aipane/components/TextInsertion.tsx b/src/aipane/components/TextInsertion.tsx
@@ -144,21 +144,6 @@ const TextInsertion: React.FC<TextInsertionProps> = (props: TextInsertionProps):
     });
   }, []);
 
-  useEffect(() => {
-    const resizeObserverErr = (e: ErrorEvent) => {
-      if (e.message === "ResizeObserver loop completed with undelivered notifications.") {
-        console.error("ResizeObserver loop error in TextInsertion");
-        e.stopImmediatePropagation();
-        e.stopPropagation();
-        e.preventDefault();
-      }
-    };
-    window.addEventListener("error", resizeObserverErr);
-    // return () => {
-    //   window.removeEventListener("error", resizeObserverErr);
-    // };
-  }, []);
-
   return (
     <div className={styles.textPromptAndInsertion}>
       <Field className={styles.textAreaField} size="large" label="Enter your message.">

diff --git a/src/aipane/index.html b/src/aipane/index.html
@@ -11,14 +11,22 @@
     <link rel="shortcut icon" type="image/x-icon" href="../../assets/favicon.ico">
     <title>SCTG AI Emailer Add-in</title>
 
-    <!-- Office JavaScript API -->
     <script type="text/javascript">
         // Backup history functions to prevent Office.js from breaking it
         globalThis.backupHistoryFunctions = {
             pushState: window.history.pushState,
             replaceState: window.history.replaceState,
         };
+        // Workaround for "ResizeObserver loop completed with undelivered notifications."
+        globalThis.backupResizeObserver = { ResizeObserver: window.ResizeObserver };
+        window.ResizeObserver = class ResizeObserver {
+            ResizeObserver() { };
+            observe() { };
+            unobserve() { };
+            disconnect() { };
+        };
     </script>
+    <!-- Office JavaScript API -->
     <script type="text/javascript" src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js"></script>
 </head>
 

diff --git a/src/version.ts b/src/version.ts
@@ -1,4 +1,4 @@
 export const versionInfo = {
-  commit: "a93ed0016c9321520a3e5b66c080609d967d4938",
-  date: "2024-11-06 17:21:05 +0100",
+  commit: "a859828ce077447711338df714a4ea6a0b0236f2",
+  date: "2024-11-06 17:40:45 +0100",
 };