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