From 529efbaa839577e870972813a8a7ccd3ed7828e9 Mon Sep 17 00:00:00 2001
From: Steven Serrata <9343811+sserrata@users.noreply.github.com>
Date: Thu, 21 Mar 2024 10:59:33 -0400
Subject: [PATCH] ensure resize observer is calculated once per frame to avoid
 loops (#763)

---
 .../src/theme/ApiTabs/index.js                       | 12 +++++++-----
 .../src/theme/DiscriminatorTabs/index.js             | 12 +++++++-----
 .../src/theme/MimeTabs/index.js                      | 12 +++++++-----
 .../src/theme/OperationTabs/index.js                 | 12 +++++++-----
 .../src/theme/SchemaTabs/index.js                    | 12 +++++++-----
 5 files changed, 35 insertions(+), 25 deletions(-)

diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ApiTabs/index.js b/packages/docusaurus-theme-openapi-docs/src/theme/ApiTabs/index.js
index 951adc0c5..dfdd4b20c 100644
--- a/packages/docusaurus-theme-openapi-docs/src/theme/ApiTabs/index.js
+++ b/packages/docusaurus-theme-openapi-docs/src/theme/ApiTabs/index.js
@@ -67,11 +67,13 @@ function TabList({
   useEffect(() => {
     const resizeObserver = new ResizeObserver((entries) => {
       for (let entry of entries) {
-        if (entry.target.offsetWidth < entry.target.scrollWidth) {
-          setShowTabArrows(true);
-        } else {
-          setShowTabArrows(false);
-        }
+        requestAnimationFrame(() => {
+          if (entry.target.offsetWidth < entry.target.scrollWidth) {
+            setShowTabArrows(true);
+          } else {
+            setShowTabArrows(false);
+          }
+        });
       }
     });
 
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/DiscriminatorTabs/index.js b/packages/docusaurus-theme-openapi-docs/src/theme/DiscriminatorTabs/index.js
index bd41ab443..ca2c57d25 100644
--- a/packages/docusaurus-theme-openapi-docs/src/theme/DiscriminatorTabs/index.js
+++ b/packages/docusaurus-theme-openapi-docs/src/theme/DiscriminatorTabs/index.js
@@ -57,11 +57,13 @@ function TabList({ className, block, selectedValue, selectValue, tabValues }) {
   useEffect(() => {
     const resizeObserver = new ResizeObserver((entries) => {
       for (let entry of entries) {
-        if (entry.target.offsetWidth < entry.target.scrollWidth) {
-          setShowTabArrows(true);
-        } else {
-          setShowTabArrows(false);
-        }
+        requestAnimationFrame(() => {
+          if (entry.target.offsetWidth < entry.target.scrollWidth) {
+            setShowTabArrows(true);
+          } else {
+            setShowTabArrows(false);
+          }
+        });
       }
     });
 
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/MimeTabs/index.js b/packages/docusaurus-theme-openapi-docs/src/theme/MimeTabs/index.js
index 6792763f6..b81b60abe 100644
--- a/packages/docusaurus-theme-openapi-docs/src/theme/MimeTabs/index.js
+++ b/packages/docusaurus-theme-openapi-docs/src/theme/MimeTabs/index.js
@@ -94,11 +94,13 @@ function TabList({
   useEffect(() => {
     const resizeObserver = new ResizeObserver((entries) => {
       for (let entry of entries) {
-        if (entry.target.offsetWidth < entry.target.scrollWidth) {
-          setShowTabArrows(true);
-        } else {
-          setShowTabArrows(false);
-        }
+        requestAnimationFrame(() => {
+          if (entry.target.offsetWidth < entry.target.scrollWidth) {
+            setShowTabArrows(true);
+          } else {
+            setShowTabArrows(false);
+          }
+        });
       }
     });
 
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/OperationTabs/index.js b/packages/docusaurus-theme-openapi-docs/src/theme/OperationTabs/index.js
index dd96c1bb2..d0b5b3d0a 100644
--- a/packages/docusaurus-theme-openapi-docs/src/theme/OperationTabs/index.js
+++ b/packages/docusaurus-theme-openapi-docs/src/theme/OperationTabs/index.js
@@ -60,11 +60,13 @@ function TabList({ className, block, selectedValue, selectValue, tabValues }) {
   useEffect(() => {
     const resizeObserver = new ResizeObserver((entries) => {
       for (let entry of entries) {
-        if (entry.target.offsetWidth < entry.target.scrollWidth) {
-          setShowTabArrows(true);
-        } else {
-          setShowTabArrows(false);
-        }
+        requestAnimationFrame(() => {
+          if (entry.target.offsetWidth < entry.target.scrollWidth) {
+            setShowTabArrows(true);
+          } else {
+            setShowTabArrows(false);
+          }
+        });
       }
     });
 
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/SchemaTabs/index.js b/packages/docusaurus-theme-openapi-docs/src/theme/SchemaTabs/index.js
index 34008bfb0..ed5b19a9b 100644
--- a/packages/docusaurus-theme-openapi-docs/src/theme/SchemaTabs/index.js
+++ b/packages/docusaurus-theme-openapi-docs/src/theme/SchemaTabs/index.js
@@ -57,11 +57,13 @@ function TabList({ className, block, selectedValue, selectValue, tabValues }) {
   useEffect(() => {
     const resizeObserver = new ResizeObserver((entries) => {
       for (let entry of entries) {
-        if (entry.target.offsetWidth < entry.target.scrollWidth) {
-          setShowTabArrows(true);
-        } else {
-          setShowTabArrows(false);
-        }
+        requestAnimationFrame(() => {
+          if (entry.target.offsetWidth < entry.target.scrollWidth) {
+            setShowTabArrows(true);
+          } else {
+            setShowTabArrows(false);
+          }
+        });
       }
     });