diff --git a/packages/nicolium/src/components/ui/layout.tsx b/packages/nicolium/src/components/ui/layout.tsx index 0f8c6964d..cff2697a4 100644 --- a/packages/nicolium/src/components/ui/layout.tsx +++ b/packages/nicolium/src/components/ui/layout.tsx @@ -1,4 +1,5 @@ import clsx from 'clsx'; +import debounce from 'lodash/debounce'; import React, { Suspense, useEffect, useState } from 'react'; import StickyBox from 'react-sticky-box'; @@ -77,9 +78,15 @@ const useWindowControlsOverlay = () => { const overlay = navigator.windowControlsOverlay; if (!overlay) return; - const update = () => setRect(overlay.visible ? overlay.getTitlebarAreaRect() : null); + const update = debounce( + () => setRect(overlay.visible ? overlay.getTitlebarAreaRect() : null), + 100, + ); overlay.addEventListener('geometrychange', update); - return () => overlay.removeEventListener('geometrychange', update); + return () => { + overlay.removeEventListener('geometrychange', update); + update.cancel(); + }; }, []); return rect; diff --git a/packages/nicolium/src/init/nicolium-head.tsx b/packages/nicolium/src/init/nicolium-head.tsx index a610f1b48..ee91afb23 100644 --- a/packages/nicolium/src/init/nicolium-head.tsx +++ b/packages/nicolium/src/init/nicolium-head.tsx @@ -1,4 +1,5 @@ import clsx from 'clsx'; +import debounce from 'lodash/debounce'; import React, { useEffect, useMemo } from 'react'; import InlineStyle from '@/components/inline-style'; @@ -51,7 +52,7 @@ const NicoliumHead = () => { const overlay = navigator.windowControlsOverlay; if (!overlay) return; - const update = () => { + const update = debounce(() => { setWcoVisible(overlay.visible); if (overlay.visible) { const rect = overlay.getTitlebarAreaRect(); @@ -59,10 +60,14 @@ const NicoliumHead = () => { } else { setWcoRight(false); } - }; + }, 100); update(); + overlay.addEventListener('geometrychange', update); - return () => overlay.removeEventListener('geometrychange', update); + return () => { + overlay.removeEventListener('geometrychange', update); + update.cancel(); + }; }, []); const color = useMemo(() => {