Fix sheet height locking too early for filter help #10391
Conversation
| frozenHeightIntervalRef.current = undefined; | ||
| return true; | ||
| }; | ||
| frozenHeightIntervalRef.current = tryRepeatedlyWithLimit(setHeight); |
There was a problem hiding this comment.
I think this is just a slightly better version of the intended functionality. I don't think it is explicitly needed for this fix, but it was something I noticed upon having a read of the code. Happy to remove if requested.
Note: I did it initially with a timeout and a backoff but cancelation came to mind. An interval was just simpler to implement then having to deal with recursive timeouts with a backoff so I did this instead.
| fallback={ | ||
| <Portal> | ||
| <Loading message={t('Loading.FilterHelp')} /> | ||
| </Portal> |
There was a problem hiding this comment.
I was just going to delete this until I realise the Loading component is a full screen mask. For it to display, I needed to stick it in a portal.
To test it, delay the loading using the following
const LazyFilterHelp = lazy(
() =>
new Promise<{ default: () => React.ReactNode }>((resolve) => {
setTimeout(() => resolve(import(/* webpackChunkName: "filter-help" */ './FilterHelp')), 5000);
}),
);
Here is a video of the current state
Screen.Recording.2024-05-06.at.9.40.40.AM.mov
ryan-rushton
changed the title
| {/* 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. */} |
There was a problem hiding this comment.
|
@bhollis yeah I get that original intent, and we can keep it if we provide an "onCallbackLockHeight" type callback but I personally don't see the user value in doing that. The full screen mask shows that something is loading anyways and the load in of a lazy component is pretty quick compared to a data load event. |
Based on comments in the thread it should fix it. It works fine on desktop so it doesn't introduce anything unexpected in the filters help component as far as I can see.
Related to #10346 #9240
Edit: Confirmed this fixes it by installing a local dev version of the PWA. I couldn't reproduce on mobile websites, only when installing the PWA. The specific behaviour I was seeing was on first open of filter help it would be a really short sheet, and it would be fine on second open. After fixing it was the correct height first time.