From c7cdcedf55a83677c6a620ae641022a6e1f97dac Mon Sep 17 00:00:00 2001 From: Ryan Date: Sun, 5 May 2024 09:31:56 +1000 Subject: [PATCH 1/6] Attempt at fixing sheet height locking too early --- src/app/dim-ui/Sheet.tsx | 24 +++++++++++++++++++++--- 1 file changed, 21 insertions(+), 3 deletions(-) diff --git a/src/app/dim-ui/Sheet.tsx b/src/app/dim-ui/Sheet.tsx index 8cd44ba751..04855e00dc 100644 --- a/src/app/dim-ui/Sheet.tsx +++ b/src/app/dim-ui/Sheet.tsx @@ -226,9 +226,14 @@ export default function Sheet({ if (sheetContents.current.clientHeight > 0) { setFrozenHeight(sheetContents.current.clientHeight); } else { - setTimeout(() => { - sheetContents.current && setFrozenHeight(sheetContents.current.clientHeight); - }, 500); + const setHeight = () => { + if (!sheetContents.current || sheetContents.current.clientHeight === 0) { + return false; + } + setFrozenHeight(sheetContents.current.clientHeight); + return true; + }; + tryWithBackoff(setHeight); } } }, [freezeInitialHeight, frozenHeight]); @@ -321,3 +326,16 @@ export default function Sheet({ ); } + +function tryWithBackoff(callback: () => boolean, timeout: number = 500, limit: number = 5_000) { + if (timeout > limit) { + return; + } + setTimeout(() => { + const res = callback(); + if (res) { + return; + } + tryWithBackoff(callback, timeout * 1.25); + }, timeout); +} From d023776ffcf55dad201ddf8401e9141e333eeb00 Mon Sep 17 00:00:00 2001 From: Ryan Date: Sun, 5 May 2024 09:51:31 +1000 Subject: [PATCH 2/6] Fix problem in search bar using a lazy component and locking sheet height --- src/app/search/SearchBar.tsx | 32 ++++++++++++++++++-------------- 1 file changed, 18 insertions(+), 14 deletions(-) diff --git a/src/app/search/SearchBar.tsx b/src/app/search/SearchBar.tsx index 3c7dd25efe..6183e80351 100644 --- a/src/app/search/SearchBar.tsx +++ b/src/app/search/SearchBar.tsx @@ -545,21 +545,25 @@ function SearchBar( {filterHelpOpen && ( - setFilterHelpOpen(false)} - header={ - <> -

{t('Header.Filters')}

- - - } - freezeInitialHeight - sheetClassName={styles.filterHelp} - > - }> + }> + {/* Because FilterHelp suspends, the entire sheet will suspend while it is loaded. + * This stops us having issues with incorrect frozen initial heights as it will + * get locked to the fallback height if we don't do this. + */} + setFilterHelpOpen(false)} + header={ + <> +

{t('Header.Filters')}

+ + + } + freezeInitialHeight + sheetClassName={styles.filterHelp} + > - - + + )} {autocompleteMenu} From 87fa980ba50ca7ecc26fb425af492c98b5de1a98 Mon Sep 17 00:00:00 2001 From: Ryan Date: Sun, 5 May 2024 10:05:58 +1000 Subject: [PATCH 3/6] Linting --- src/app/dim-ui/Sheet.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/dim-ui/Sheet.tsx b/src/app/dim-ui/Sheet.tsx index 04855e00dc..c9008bc8d7 100644 --- a/src/app/dim-ui/Sheet.tsx +++ b/src/app/dim-ui/Sheet.tsx @@ -327,7 +327,7 @@ export default function Sheet({ ); } -function tryWithBackoff(callback: () => boolean, timeout: number = 500, limit: number = 5_000) { +function tryWithBackoff(callback: () => boolean, timeout = 500, limit = 5_000) { if (timeout > limit) { return; } From 044e57fee528d11f212b009079844a2867900393 Mon Sep 17 00:00:00 2001 From: Ryan Date: Sun, 5 May 2024 10:23:20 +1000 Subject: [PATCH 4/6] Move to interval so we can cancel. --- src/app/dim-ui/Sheet.tsx | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/src/app/dim-ui/Sheet.tsx b/src/app/dim-ui/Sheet.tsx index c9008bc8d7..6493d8add7 100644 --- a/src/app/dim-ui/Sheet.tsx +++ b/src/app/dim-ui/Sheet.tsx @@ -155,6 +155,7 @@ export default function Sheet({ const sheetContents = useRef(null); const [frozenHeight, setFrozenHeight] = useState(undefined); + const frozenHeightIntervalRef = useRef(undefined); const [disabled, setParentDisabled] = useDisableParent(forceDisabled); const reducedMotion = Boolean(useReducedMotion()); @@ -222,6 +223,7 @@ export default function Sheet({ ); useLayoutEffect(() => { + clearInterval(frozenHeightIntervalRef.current); if (freezeInitialHeight && sheetContents.current && !frozenHeight) { if (sheetContents.current.clientHeight > 0) { setFrozenHeight(sheetContents.current.clientHeight); @@ -231,9 +233,10 @@ export default function Sheet({ return false; } setFrozenHeight(sheetContents.current.clientHeight); + frozenHeightIntervalRef.current = undefined; return true; }; - tryWithBackoff(setHeight); + frozenHeightIntervalRef.current = tryRepeatedlyWithLimit(setHeight); } } }, [freezeInitialHeight, frozenHeight]); @@ -327,15 +330,16 @@ export default function Sheet({ ); } -function tryWithBackoff(callback: () => boolean, timeout = 500, limit = 5_000) { - if (timeout > limit) { - return; - } - setTimeout(() => { +function tryRepeatedlyWithLimit(callback: () => boolean, timeout = 500, limit = 5_000) { + let totalTime = 0; + return setInterval(() => { + if (totalTime > limit) { + return; + } const res = callback(); + totalTime += timeout; if (res) { return; } - tryWithBackoff(callback, timeout * 1.25); }, timeout); } From 531c0d68c20f3d9b94a76bf707c01f027603438f Mon Sep 17 00:00:00 2001 From: Ryan Date: Mon, 6 May 2024 09:42:29 +1000 Subject: [PATCH 5/6] Put loading in a portal --- src/app/search/SearchBar.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/app/search/SearchBar.tsx b/src/app/search/SearchBar.tsx index 6183e80351..ecbfb49c20 100644 --- a/src/app/search/SearchBar.tsx +++ b/src/app/search/SearchBar.tsx @@ -13,6 +13,7 @@ import { toggleSearchResults } from 'app/shell/actions'; import { useIsPhonePortrait } from 'app/shell/selectors'; import { useThunkDispatch } from 'app/store/thunk-dispatch'; import { isiOSBrowser } from 'app/utils/browsers'; +import { Portal } from 'app/utils/temp-container'; import clsx from 'clsx'; import { UseComboboxState, UseComboboxStateChangeOptions, useCombobox } from 'downshift'; import { AnimatePresence, LayoutGroup, Variants, motion } from 'framer-motion'; @@ -545,7 +546,13 @@ function SearchBar( {filterHelpOpen && ( - }> + + + + } + > {/* Because FilterHelp suspends, the entire sheet will suspend while it is loaded. * This stops us having issues with incorrect frozen initial heights as it will * get locked to the fallback height if we don't do this. From ea1a97cca2fb9463667ff23d1ef7c99858515042 Mon Sep 17 00:00:00 2001 From: Ryan Date: Mon, 6 May 2024 09:50:36 +1000 Subject: [PATCH 6/6] Comment cleanup --- src/app/search/SearchBar.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/app/search/SearchBar.tsx b/src/app/search/SearchBar.tsx index ecbfb49c20..2a68062643 100644 --- a/src/app/search/SearchBar.tsx +++ b/src/app/search/SearchBar.tsx @@ -555,8 +555,7 @@ function SearchBar( > {/* Because FilterHelp suspends, the entire sheet will suspend while it is loaded. * This stops us having issues with incorrect frozen initial heights as it will - * get locked to the fallback height if we don't do this. - */} + * get locked to the fallback height if we don't do this. */} setFilterHelpOpen(false)} header={