Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix sheet height locking too early for filter help #10391

Merged
merged 6 commits into from
May 8, 2024

Conversation

ryan-rushton
Copy link
Contributor

@ryan-rushton ryan-rushton commented May 4, 2024

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.

src/app/dim-ui/Sheet.tsx Outdated Show resolved Hide resolved
frozenHeightIntervalRef.current = undefined;
return true;
};
frozenHeightIntervalRef.current = tryRepeatedlyWithLimit(setHeight);
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Comment on lines +550 to +553
fallback={
<Portal>
<Loading message={t('Loading.FilterHelp')} />
</Portal>
Copy link
Contributor Author

@ryan-rushton ryan-rushton May 5, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 ryan-rushton changed the title Attempt at fixing sheet height locking too early Fix sheet height locking too early for filter help May 5, 2024
Comment on lines +556 to +558
{/* 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. */}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Contributor

@bhollis bhollis left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cool, I think that works. The original intent was that the sheet would show immediately, and the FilterHelp component would load in after. But I acknowledge that that messes with the sheet height calculation.

@ryan-rushton
Copy link
Contributor Author

ryan-rushton commented May 8, 2024

@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.

@ryan-rushton ryan-rushton merged commit 3b94f62 into master May 8, 2024
7 checks passed
@ryan-rushton ryan-rushton deleted the fix-sheet-locked-before-contents-loaded branch May 8, 2024 22:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants