From 748e42cc6c74da5a28648e1d78ff076b1ecde8d6 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.tsx                  | 16 +++++++++-------
 .../src/theme/DiscriminatorTabs/index.tsx        | 12 +++++++-----
 .../src/theme/MimeTabs/index.tsx                 | 12 +++++++-----
 .../src/theme/OperationTabs/index.tsx            | 12 +++++++-----
 .../src/theme/SchemaTabs/index.tsx               | 12 +++++++-----
 5 files changed, 37 insertions(+), 27 deletions(-)

diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ApiTabs/index.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/ApiTabs/index.tsx
index 3393e0c08..f87bc7459 100644
--- a/packages/docusaurus-theme-openapi-docs/src/theme/ApiTabs/index.tsx
+++ b/packages/docusaurus-theme-openapi-docs/src/theme/ApiTabs/index.tsx
@@ -89,11 +89,13 @@ function TabList({
   useEffect(() => {
     const resizeObserver = new ResizeObserver((entries) => {
       for (let entry of entries) {
-        if (entry.target.clientWidth < entry.target.scrollWidth) {
-          setShowTabArrows(true);
-        } else {
-          setShowTabArrows(false);
-        }
+        requestAnimationFrame(() => {
+          if (entry.target.clientWidth < entry.target.scrollWidth) {
+            setShowTabArrows(true);
+          } else {
+            setShowTabArrows(false);
+          }
+        });
       }
     });
 
@@ -159,8 +161,8 @@ function TabList({
                 parseInt(value) >= 400
                   ? "danger"
                   : parseInt(value) >= 200 && parseInt(value) < 300
-                    ? "success"
-                    : "info",
+                  ? "success"
+                  : "info",
                 {
                   active: selectedValue === value,
                 }
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/DiscriminatorTabs/index.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/DiscriminatorTabs/index.tsx
index 58a6b40d1..5a7e7193b 100644
--- a/packages/docusaurus-theme-openapi-docs/src/theme/DiscriminatorTabs/index.tsx
+++ b/packages/docusaurus-theme-openapi-docs/src/theme/DiscriminatorTabs/index.tsx
@@ -82,11 +82,13 @@ function TabList({
   useEffect(() => {
     const resizeObserver = new ResizeObserver((entries) => {
       for (let entry of entries) {
-        if (entry.target.clientWidth < entry.target.scrollWidth) {
-          setShowTabArrows(true);
-        } else {
-          setShowTabArrows(false);
-        }
+        requestAnimationFrame(() => {
+          if (entry.target.clientWidth < entry.target.scrollWidth) {
+            setShowTabArrows(true);
+          } else {
+            setShowTabArrows(false);
+          }
+        });
       }
     });
 
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/MimeTabs/index.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/MimeTabs/index.tsx
index b17183037..939930681 100644
--- a/packages/docusaurus-theme-openapi-docs/src/theme/MimeTabs/index.tsx
+++ b/packages/docusaurus-theme-openapi-docs/src/theme/MimeTabs/index.tsx
@@ -119,11 +119,13 @@ function TabList({
   useEffect(() => {
     const resizeObserver = new ResizeObserver((entries) => {
       for (let entry of entries) {
-        if (entry.target.clientWidth < entry.target.scrollWidth) {
-          setShowTabArrows(true);
-        } else {
-          setShowTabArrows(false);
-        }
+        requestAnimationFrame(() => {
+          if (entry.target.clientWidth < entry.target.scrollWidth) {
+            setShowTabArrows(true);
+          } else {
+            setShowTabArrows(false);
+          }
+        });
       }
     });
 
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/OperationTabs/index.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/OperationTabs/index.tsx
index 3e557e56c..35f01fe1c 100644
--- a/packages/docusaurus-theme-openapi-docs/src/theme/OperationTabs/index.tsx
+++ b/packages/docusaurus-theme-openapi-docs/src/theme/OperationTabs/index.tsx
@@ -81,11 +81,13 @@ function TabList({
   useEffect(() => {
     const resizeObserver = new ResizeObserver((entries) => {
       for (let entry of entries) {
-        if (entry.target.clientWidth < entry.target.scrollWidth) {
-          setShowTabArrows(true);
-        } else {
-          setShowTabArrows(false);
-        }
+        requestAnimationFrame(() => {
+          if (entry.target.clientWidth < entry.target.scrollWidth) {
+            setShowTabArrows(true);
+          } else {
+            setShowTabArrows(false);
+          }
+        });
       }
     });
 
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/SchemaTabs/index.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/SchemaTabs/index.tsx
index d212e445f..75e52fcaf 100644
--- a/packages/docusaurus-theme-openapi-docs/src/theme/SchemaTabs/index.tsx
+++ b/packages/docusaurus-theme-openapi-docs/src/theme/SchemaTabs/index.tsx
@@ -82,11 +82,13 @@ function TabList({
   useEffect(() => {
     const resizeObserver = new ResizeObserver((entries) => {
       for (let entry of entries) {
-        if (entry.target.clientWidth < entry.target.scrollWidth) {
-          setShowTabArrows(true);
-        } else {
-          setShowTabArrows(false);
-        }
+        requestAnimationFrame(() => {
+          if (entry.target.clientWidth < entry.target.scrollWidth) {
+            setShowTabArrows(true);
+          } else {
+            setShowTabArrows(false);
+          }
+        });
       }
     });