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); + } + }); } });