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

perf(ui): gallery / image perf #7101

Merged
merged 12 commits into from
Oct 11, 2024
Merged

perf(ui): gallery / image perf #7101

merged 12 commits into from
Oct 11, 2024

Conversation

psychedelicious
Copy link
Collaborator

Summary

The gallery was getting very slow.

On main, on FF in dev mode, after loading 2 pages of the gallery so the images are cached, switching between them took ~105ms across 7 renders.

With the changes in this PR, that's down to ~55ms across 3 renders.

This translates to the initial load of gallery pages and switching tabs in the app. Feels way better.

Specific changes:

  • Refactor image context menu to be a singleton. Previously, we were creating a new context menu component for every visible image. When changing pages in the gallery, we had to create new menu components, which was hugely wasteful. Now there is a single context menu and we just update the image it is for, as it is opened.
  • Defer a lot of logic in IAIDndImage & GalleryImage (rendering components, calling hooks) until it's actually needed. We were spending a lot of time doing calculations or renders for things would likely never be used.
  • Memoize a handful of components.

Tested on FF, Safari, Chrome and iOS Safari. Makes a really big difference on iOS.

Related Issues / Discussions

n/a

QA Instructions

Poke around the gallery. Should feel snappier.

Merge Plan

n/a

Checklist

  • The PR has a short but descriptive title, suitable for a changelog
  • Tests added / updated (if applicable)
  • Documentation added / updated (if applicable)

@github-actions github-actions bot added the frontend PRs that change frontend files label Oct 11, 2024
@hipsterusername
Copy link
Member

Oh this is smooooth.

@maryhipp maryhipp enabled auto-merge (rebase) October 11, 2024 13:34
@maryhipp maryhipp merged commit bb59ad4 into main Oct 11, 2024
14 checks passed
@maryhipp maryhipp deleted the psyche/perf/ui/image-component branch October 11, 2024 13:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
frontend PRs that change frontend files
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants