Merge pull request #10391 from DestinyItemManager/fix-sheet-locked-be…

…fore-contents-loaded Fix sheet height locking too early for filter help
DestinyItemManager · May 8, 2024 · 3b94f62 · 3b94f62
2 parents a3985de + ea1a97c
commit 3b94f62
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 15 deletions.
diff --git 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<HTMLDivElement | null>(null);
 
   const [frozenHeight, setFrozenHeight] = useState<number | undefined>(undefined);
+  const frozenHeightIntervalRef = useRef<NodeJS.Timeout | undefined>(undefined);
   const [disabled, setParentDisabled] = useDisableParent(forceDisabled);
 
   const reducedMotion = Boolean(useReducedMotion());
@@ -222,13 +223,20 @@ export default function Sheet({
   );
 
   useLayoutEffect(() => {
+    clearInterval(frozenHeightIntervalRef.current);
     if (freezeInitialHeight && sheetContents.current && !frozenHeight) {
       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);
+          frozenHeightIntervalRef.current = undefined;
+          return true;
+        };
+        frozenHeightIntervalRef.current = tryRepeatedlyWithLimit(setHeight);
       }
     }
   }, [freezeInitialHeight, frozenHeight]);
@@ -321,3 +329,17 @@ export default function Sheet({
     </Portal>
   );
 }
+
+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;
+    }
+  }, timeout);
+}
diff --git 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,21 +546,30 @@ function SearchBar(
         </LayoutGroup>
 
         {filterHelpOpen && (
-          <Sheet
-            onClose={() => setFilterHelpOpen(false)}
-            header={
-              <>
-                <h1>{t('Header.Filters')}</h1>
-                <UserGuideLink topic="Item-Search" />
-              </>
+          <Suspense
+            fallback={
+              <Portal>
+                <Loading message={t('Loading.FilterHelp')} />
+              </Portal>
             }
-            freezeInitialHeight
-            sheetClassName={styles.filterHelp}
           >
-            <Suspense fallback={<Loading message={t('Loading.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. */}
+            <Sheet
+              onClose={() => setFilterHelpOpen(false)}
+              header={
+                <>
+                  <h1>{t('Header.Filters')}</h1>
+                  <UserGuideLink topic="Item-Search" />
+                </>
+              }
+              freezeInitialHeight
+              sheetClassName={styles.filterHelp}
+            >
               <LazyFilterHelp />
-            </Suspense>
-          </Sheet>
+            </Sheet>
+          </Suspense>
         )}
 
         {autocompleteMenu}